可以使用Angular依賴注入代替RequireJS嗎？

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

我已經嘗試過這種方法，但它不起作用。 我可以做這樣的事情，並且在主視圖中只有文件4的腳本標簽嗎？ 還是每個文件必須有一個腳本標簽？ 感謝您的幫助。

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>

您正在使用的每個文件。 一旦所有引用都到位，它應該可以工作。

還是......看看這個文章的方式來控制器的卷制自己的運行時分辨率。

Answer 3

您必須將下載的思想與加載和執行內存的思想分開。 使用Yeoman / grunt或類似的構建工具來管理將單個文件添加到項目的過程，這些文件用於Angular附加到這些模塊的各種模塊控制器，指令，服務等。 然后，在構建時， 文件將被縮小和連接起來，以提高速度/帶寬，這大大優於延遲下載單個文件。

處理完文件后，Angular會處理其余的文件，僅在實際需要時才執行依賴項。

在上面的示例@Jose中，您的問題是您沒有將依賴項正確地附加到原始模塊。 您正在創建新模塊並將依賴項埋在其中。 在第一個版本中，您使用var app來緩存對名為“ app”的模塊的引用，然后對app.controller()等進行了緩存。因此，您要在app模塊上調用app.controller() .controller()方法。

但是在第二個步驟中，您仍然需要將這些依賴項附加到主app模塊。 為此，您需要調用angular.module('app')來訪問原始模塊，然后可以在檢索到該模塊后將其鏈接到.controller()或.directive() 。

底線是使用Angular的結構來加載Angular依賴項。 如果在解決了所有這些問題之后，仍然要使用Require加載第三方腳本，請繼續。 但是我建議先進行測試，看看您是否真的在增加價值。