Angular js模塊化方法控制器結構

我發現this post關於構造角度應用程序，它真的很棒。我正計劃根據上述內容構建我的角度應用程序。現在，如果我們嘗試查看職位代碼：Angular js模塊化方法控制器結構

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

userModule.factory('userService', ['$http', function($http) { 
    return new UserService($http); 
}]); 

userModule.factory('userModel', ['userService', function(userService) { 
    return new UserModel(userService); 
}]); 

userModule.controller('loginController', ['$scope', 'userModel', LoginController]); 

userModule.controller('registrationController', ['$scope', 'userModel', RegistrationController]);

我不知道會在LoginController代碼可能是什麼樣子？同樣基於帖子，您將創建例如LoginModule.js文件並將其放在相關的js文件中。現在的問題是：是否自動包含LoginController.js文件，或者某處會有配置或代碼要求？

此查詢不僅限於控制器，也可能有服務，過濾器和指令這樣做的方法。你怎麼看？

來源

2014-02-10 user1966211

因此，如果我正確理解你的問題，你的問題是關於angularJS腳本的結構而不污染全球範圍？ – davekr

是的。真正的意圖是用js文件建立模塊化結構。這就像說每個控制器，服務，過濾器和指令都會有自己的文件。我有道理嗎？ – user1966211

基於文章的結構，這是我如何構建我的角度應用程序。

在這種情況下，我們有四個主要模塊（文件夾）：cart,common,product和user。每個主文件夾都可以有模塊，控制器，服務，指令等的子文件夾。我將專注於產品文件夾。

|-- product/ 
| |-- modules/ 
| | |-- Product.js 
| | |-- Search.js 
| |-- controllers/  
| | |-- search/ 
| | | |-- SearchResultsController.js 
| | |-- product/ 
| | | |-- ProductDetailController.js 
| |-- services/ 
| | |-- search/ 
| | | |-- SearchResultsModel.js 
| | |-- product/ 
| | | |-- ProductModel.js 
| | | |-- ProductService.js 
| |-- directives/ 
| | | |-- ProductDirective.js 
| | | |-- OtherDirective.js

每個主文件夾都必須有主要的angularJS模塊，它在那裏註冊其他東西。在產品的情況下，它是product/modules/Product.js這個模塊可以包含在您的應用程序中使用整個結構。

在產品的主要模塊，您可以有product.controllers，product.services和product.directives子模塊註冊其他子模塊像控制器，服務指令等。在產品模塊的情況下的子文件夾。它還會註冊搜索模塊，搜索模塊可以擁有自己的搜索控制器子模塊，指令...可以更好地分離。主product模塊的代碼則是這樣的：

angular.module('product.controllers', []); 
angular.module('product.services', []); 
angular.module('product.directives', []); 

angular.module('product', ['product.controllers', 'product.services', 'product.directives', 'search']) 
    .config(['$routeProvider', function($routeProvider){ 

    ... 

}]);

在子模塊的控制器，指令等你再註冊申請的其他的東西。 ProductService.js例如看起來是這樣的：

angular.module('product.services').factory('productSerivice', [function(){ 

    ... 

}]);

而且SearchResultsController.js migth是這樣的：

angular.module('search.controllers').controller('SearchResultsController', ['$scope', 
    function($scope){ 

    ... 

}]);

這可以讓你有每個實體，無論是控制器，服務或指令，在一個單獨的文件，而無需污染全球範圍。它也是分離和結構化的模塊，可以很容易地從整個應用程序中添加或刪除。

來源

2014-02-11 18:00:12 davekr

Angular js模塊化方法控制器結構

回答

相關問題