我正在使用 angularJS 开发一个模块化应用程序。
有一个菜单允许在多个视图中导航。 （我正在使用 ngRoute）
每个视图都分为几个部分，每个部分都应该加载一个独立的模块（我们称之为“模块”atm）。这些模块将使用 api 检索动态数据，并且这些模块可以在多个视图中使用。
最好的方法是什么？使用带有模板和控制器的自定义指令？
【问题讨论】：
标签： angularjs
我会使用“module.(module #)”创建模块，这样您就可以分隔所有 js 文件。像这样的东西，因为你使用的是 ngroute：
MyApp.controller('module.one', function ($scope, $http, $routeParams, moduleOneResource) {...logic... }
为每个模块创建一个工厂：
angular.module('module.one').factory('moduleOneResource', ['$resource', function ($resource) {
return $resource('/api_root/module/:module_id', {} {
'save': {
method: 'POST',
headers: {"Content-Type": "application/json"},
'get': {
method: 'GET',
headers: {"Content-Type": "application/json"},
}
}
});
}]);
以及模块的配置：
angular.module('module.one', []).config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/module/one/new', {templateUrl: 'partials/moduleOne/new.html', controller: 'ModuleOneCtrl'});
$routeProvider.when('/module/one/list_all', {templateUrl: 'partials/moduleOne/list.html', controller: 'ModuleOneCtrl'});
}]);
然后继续为每个模块创建这些文件中的每一个，每个模块应该是 3 个文件...如果您想为一个模块添加多个控制器，例如在一个控制器文件中，您可以包含多个控制器，与工厂相同。
angular.module('module.two', []).config([ .... config module for each module with url routes and html source , etc...
【讨论】：
您可以为此使用 ng-include，但我会说使用 ui-router 而不是 ngRoute 更好。 ui-router 允许您使用多个命名视图和嵌套视图，这可能是您想要的。例如
<body ng-app="myApp">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</body>
在配置中
var mypApp = angular.module("myApp",[ui-router]);
myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('empty', {
url:'/',
views: {
'header': {
templateUrl: 'apps/header.html',
controller: headController
},
'content': {
templateUrl: 'apps/content.html'.
controller: contentController
},
'footer': {
templateUrl : 'apps/footer.html',
controller: footerController
}
}
})
.state('test',{
url:'/test',
views: {
'header': {
templateUrl: 'apps/headertest.html'
controller: headtTestController
},
'content': {
templateUrl: 'apps/contenttest.html',
controller: contenTesttController
},
'footer': {
templateUrl : 'apps/footertest.html',
controller: footerTestController
}
}
})
}]);
这是一个关于如何将应用划分为多个 ui 视图的基本示例，您可以通过类似的方式为每个视图分配一个控制器。
【讨论】：