使用requirejs加载外部javascript文件

时间:2016-03-28 06:39:25

标签: angularjs requirejs

我对angularjs完全不熟悉。我只是尝试使用requirejs加载外部JavaScript文件。我尝试了一些东西,但它没有帮助我。 这是我的文件夹结构:

angular-seed
-app
    -bowercomponents
        -requirejs
-view1
    -view1.html
    -view1.js
    -view1test1.js      

我想在view1.html中加载view1test1.js文件 这是我的index.html:

    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
   <link rel="stylesheet" href="/css/style1.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <script data-main="/app" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#/view1">Page 1</a></li>
      <li><a href="#/view2">Page 2</a></li>
    </ul>
  </div>
</nav>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>


  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

这是我的app.js

'use strict';
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);
g(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

requirejs(["view1/view1test1.js"], function(util) {

});

这是我的view1test1.js:

  function(util){
            var barChartData = {
                labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
                datasets : [
                                {
                                    fillColor : "#dd4b39",
                                    strokeColor : "#dd4b39",
                                    data : [10000,13000,56081,42001,5000,40000]
                                },
                                {
                                    fillColor : "#f39c12",
                                    strokeColor : "#f39c12",
                                    data : [40000,70000,55000,21001,45023,70121,60093]
                                },
                                {
                                    fillColor : "#00a65a",
                                    strokeColor : "#00a65a",
                                    data : [43010,75432,50966,66300,39000,12010,33098]
                                }
                            ]   
                                };
                new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);           

}

我找到了一些他们使用了一些依赖的例子,但我并不了解它。那么有谁能告诉我我做错了什么?

0 个答案:

没有答案