Javascript 你能用角度依赖注入代替RequireJS吗？

我从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']);

文件二：

   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']);

文件三：

   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']);

文件四：

   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添加一个脚本标记吗？或者每个文件必须有一个脚本标记？。 谢谢你们的帮助。

你们一定有一个

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

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

---

或者。。。请阅读本文，了解一种方法来实现自己的控制器运行时解析。

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

根据文档（）：

异步加载

模块是管理模块的一种方式 配置，而与将脚本加载到 虚拟机。存在处理脚本加载的现有项目，其中 可与棱角形配合使用。因为模块在加载时什么都不做，所以 可以以任何顺序加载到VM中，因此脚本加载程序可以 利用此属性并并行化加载过程

---

…或者，正如@xanadont所解释的，您可以为每个文件向页面添加

标记。

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

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

在上面的示例中，@Jose，您的问题是没有将依赖项正确地附加到原始模块。您正在创建新模块，并将依赖项埋在其中。在第一个版本中，您使用

var-app

缓存对名为“app”的模块的引用，然后执行了

app.controller（）

等操作。因此，您正在调用

app

模块上的

.controller（）

方法

但是在第二种情况下，您仍然需要将这些依赖项附加到主

app

模块。为此，您需要调用

angular.module（'app'）

来访问原始模块，然后您可以在检索到该模块后，从该模块链接调用

.controller（）

或

.directive（）

---

总之，使用Angular的构造加载角度依赖项。如果在解决了所有这些问题之后，仍然希望使用Require加载第三方脚本，请继续。但我建议首先进行测试，看看您是否真的在增加价值

Angular的模块加载器不会将脚本注入页面。它只是加载页面上其他地方（很可能是其他文件中）已经定义的模块。如果您不喜欢在页面中包含所有这些文件，请使用构建步骤将它们连接到一个文件中，并可能使用工具将这些文件添加到页面中（适用于yeoman）