Question

我从角度开始，我怎么能将代码从一个应用程序分解成多个文件？我看了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']);

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

Answer 1

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

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

异步加载

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

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

Answer 2

你必须有一个

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

每个您正在使用的文件。一旦你掌握了所有的参考资料，它就应该有效。

或者......查看this文章，了解如何滚动自己的控制器运行时解析。

Answer 3

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

一旦处理完文件，Angular就会处理其余的文件，只有在实际需要时才执行依赖项。

在上面的示例中，@ Jose，您的问题是您没有将依赖项正确附加到原始模块。您正在创建新模块并将依赖项嵌入其中。在第一个版本中，您使用var app来缓存对名为“app”的模块的引用，然后执行app.controller()等等。因此，您在.controller()上调用app方法{1}}模块。

但是在第二个中，您仍然需要将这些依赖项附加到主app模块。为此，您需要致电angular.module('app')以访问原始模块，然后您可以在检索到该模块时将该呼叫链接到.controller()或.directive()。

从底线开始，使用Angular的构造来加载Angular依赖项。如果在完成所有这些操作之后，仍然希望使用Require来加载第三方脚本，请继续。但我建议先测试一下，看看你是否真的在增值。

你可以使用Angular依赖注入而不是RequireJS吗？

3 个答案: