AngularJS從文件夾加載控制器

Question

我是AngularJS中的新手，並且有問題我如何從結構化文件夾中加載控制器和其他js？

例如我有結構：

app/
-common
-users
--userController.js
--userService.js
-orders
-app.js

我應該如何從文件夾用戶加載控制器和服務？

還有一個小問題：什么意味着squre的支持？

app.config(['someThing'], function($routeProvider)

Answer 1

您可以將代碼放在您想要的位置。 如果將它們放入角度模塊中，角度將會找到它。 所以如果你在/app/common/services/foo.js有一個服務，比如：

angular.module('app').service('foo', function() { ... });

您可以在userController執行此操作：

angular.module('app').controller('UserController', function($scope, foo) { ... });

在這里你看到我如何在控制器中注入foo 。 Angular Dependency Injection系統非常智能，無論您將代碼放在何處，都可以找到您的代碼。

您還可以創建與app不同的模塊，您可以：

angular.module('other').service('bar', function() { ... });

在您定義app模塊的位置，如下所示：

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

你只需要在那里添加新模塊作為依賴項，這就是[]的用途：

angular.module('app', ['other']);

現在您也可以使用控制器中的服務bar :)

另一方面，您所討論的語法是數組表示法，如下所示：

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);

如果你在縮小代碼時破壞代碼，則需要這樣做，因為在縮小代碼中，你可以得到類似這樣的代碼：

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);

如你所見，函數參數現在是f和g而Angular根據這些名稱不知道要注入什么，因此它會查看我們提供的字符串，因此它會知道f是$scope而g是foo 。

沒有必要直接使用這個注釋，有幾個工具可以像ngmin一樣為你做這些。

干杯。

編輯 ：您需要將每個javascript文件添加到<script>否則將無法加載，Angular將無法找到它。

逐個添加文件很痛苦，因為你可以有5個，或者你可以有200個。

最好連接它們，為此我建議： grunt-concat-sourcemap因為它會生成一個源圖，所以你將擁有整個應用程序的1個文件，但在開發工具中你會看到它們在不同的文件中。

我建議你檢查linemanjs這是一個很好的工具來開發javascript應用程序，它為你連接文件，源地圖，minify，數組符號的東西也...

Answer 2

您必須鏈接主HTML頁面中的所有文件並確保它們已加載。 正如Dwight上面指出的那樣。

另一種方法是使用像Grunt.js這樣的東西來“構建”應用程序。 這包括將所有controller.js文件合並為一個 - 然后將其加載到HTML頁面中。 這樣，所有文件將分開進行開發，但會被調制以進行部署。