Angular js模块化方法控制器结构

时间:2014-02-10 07:30:51

标签: javascript angularjs

我发现this post关于构造角度应用程序,它真的很棒。我正计划根据前面提到的构建我的角度应用程序。现在,如果我们尝试查看帖子上的代码:

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文件是自动包含还是某个地方会有配置或代码要求?

此查询不仅限于控制器,也许还有使用服务,过滤器和指令的方法。你觉得怎么样?

1 个答案:

答案 0 :(得分:0)

根据文章的结构,这是我构建我的角度应用程序的方式。

在这种情况下,我们有四个主要模块(文件夹):cartcommonproductuser。每个主文件夹都可以有模块,控制器,服务,指令等的子文件夹。我将重点关注产品文件夹。

|-- 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.controllersproduct.servicesproduct.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){

    ...

}]);

这允许您将每个实体(无论是控制器,服务还是指令)放在单独的文件中,而不会污染全局范围。它也是分离和结构化的模块,可以很容易地从整个应用程序中添加或删除。