4

我从 Angular 开始，如何将一个应用程序中的所有代码分解为多个文件？我看了 60 分钟的介绍，他们提到我可以在没有 requirejs 或任何其他框架的情况下做到这一点。

可以说我有这样的东西可以正常工作：

var app = angular.module('app', []);

app.factory('ExampleFactory', function () {
   var factory = {};
   factory.something = function(){
   /*some code*/
   }
   return factory;
});


app.controller ('ExampleCtrl', function($scope, ExampleFactory){
   $scope.something = function(){
      ExampleFactory.something();
    };
});

app.config(function ($routeProvider) {
    $routeProvider
    .when('/',
    {
    controller: 'ExampleCtrl',
        templateUrl: 'views/ExampleView.html'
    })
    .otherwise({ redirectTo: '/' });
});

如果我想将它放在单独的文件中怎么办？像这样

档案一：

   angular.module('factoryOne', [])
   .factory('ExampleFactory', function () {
       var factory = {};
       factory.something = function(){
       /*some code*/
       }
       return factory;
   });

文件二：

  angular.module('controllerOne', ['factoryOne'])
  .controller ('ExampleCtrl', function($scope,ExampleFactory){
      $scope.something = function(){
      ExampleFactory.something();
      };
  });

文件三：

angular.module('routes', ['controllerOne'])
.config(function ($routeProvider) {
     $routeProvider
     .when('/',
     {
    controller: 'ExampleCtrl',
        templateUrl: 'views/ExampleView.html'
     })
    .otherwise({ redirectTo: '/' });
 });

文件四：

  var app = angular.module('app', ['routes']);

我已经尝试过这样，但它不起作用。我可以做这样的事情并在主视图中只为文件四添加一个脚本标签吗？还是每个文件必须有一个脚本标签？谢谢你们的帮助。

4

3 回答 3

5

AngularJS 目前没有脚本加载器作为框架的一部分。为了加载依赖项，您需要使用第三方加载器，例如 RequireJS、script.js 等。

根据文档（http://docs.angularjs.org/guide/module#asynchronousloading）：

异步加载

模块是管理 $injector 配置的一种方式，与将脚本加载到 VM 中无关。有处理脚本加载的现有项目，可以与 Angular 一起使用。因为模块在加载时什么都不做，它们可以以任何顺序加载到 VM 中，因此脚本加载器可以利用此属性并并行化加载过程。

...或者，正如@xanadont 解释的那样，您可以<script>为每个文件添加标签到您的页面。

于 2013-07-01T18:26:53.647 回答
1

你必须有一个

<script src="file.js"></script>

每个您正在使用的文件。一旦您拥有所有参考资料，它应该可以工作。

或者...查看这篇文章，了解一种自行解决控制器运行时问题的方法。

于 2013-07-01T16:59:50.663 回答
0

您必须将下载的想法与在内存中加载和执行的想法分开。使用 Yeoman/grunt 或类似的构建工具来管理为附加到这些模块的 Angular 的各种模块控制器、指令、服务等添加单个文件到项目的过程。然后，在构建时，文件将被缩小和连接，以提高速度/带宽，这大大优于单个文件的延迟下载。

处理完文件后，Angular 会处理其余的，仅在实际需要时执行依赖项。

在上面的示例中，@Jose，您的问题是您没有正确地将依赖项附加到原始模块。您正在创建新模块并将依赖项埋在其中。在第一个版本中，您曾经var app缓存对名为 'app' 的模块的引用，然后是 didapp.controller()等。因此，您正在调用模块.controller()上的方法。app

但在第二种情况下，您仍然需要将这些依赖项附加到主app模块。为此，您需要调用angular.module('app')以访问原始模块，然后您可以在检索到该模块后将调用链接到该模块.controller()或.directive()从该模块链接调用。

最重要的是，使用 Angular 的构造来加载 Angular 依赖项。如果在完成所有这些操作后，您仍想使用 Require 来加载第三方脚本，请继续。但我建议先进行测试，看看你是否真的在增加价值。

于 2013-09-04T14:11:05.773 回答