脚本
我想自动加载我的AngularJS控制器,而不必手动将它们包含在主html文件中,这样当我在路由配置文件中引用它们时,它们将成功注册。
如何在不增加太多复杂性的情况下以最简单的方式自动加载控制器?
目录结构/代码
index.html的底部内容(准确地说是index.php)
...
<script src="app/app.js"></script>
<script src="app/route-config.js"></script>
</body>
</html>
app.js
angular.module('Main', ['ui.router', 'datatables', 'ngResource'])
.controller('MainController', function(){
});
angular.module('Action', ['Main']);
路由config.js
angular.module('Main').config(config);
function config($stateProvider, $urlRouterProvider)
{
$urlRouterProvider
.when('action', 'action')
.when('issue', 'issue')
.when('lesson', 'lesson')
.when('opportunity', 'opporutnity')
.when('risk', 'risk')
.otherwise('main');
$stateProvider
.state('main', {
url: "/main",
//templateUrl: '/app/tool/home/home.html',
controller: 'MainController'
});
$stateProvider
.state('action', {
url: "/actionitems",
templateUrl: '/app/tool/action/ActionItems.html',
controller: 'ActionController'
})
$stateProvider
.state('action.summary', {
url: "/actionitems/all",
templateUrl: '/app/tool/action/ActionItems.html',
controller: 'ActionController'
})
}
ActionController.js
angular.module('Action')
.controller('ActionController', ActionController);
function ActionController($resource)
{
$resource('actionitems.json').query().$promise.then(function(actionitems){
this.all = actionitems;
});
}
这是许多大型项目的共同需求,其中为了清晰和可读性,将正确设计的项目分解为许多文件。
为了实现这一点,许多人(包括我)使用gulp或grunt将文件编译成一个文件。
可以将这些技术配置为递归地查看文件夹(如果需要,可以使用异常),并在文件更改时重新编译。在您的应用程序中,您只需要包含已编译的文件,该文件将在您添加文件时更新并对原始代码文件进行更改。
使用以下目录结构和代码,我修改为在ActionController中使用ocLazyLoad.js。但这导致控制器(ActionController)在代码中具有裸功能。
目录结构
虽然取得了预期的结果,但我想知道是否可以进行任何改进或更正。
ActionController.js
function GetActionItems($resource)
{
return $resource('actionitems.json').query().$promise;
}
路由config.js
function config($stateProvider, $urlRouterProvider)
{
$urlRouterProvider
.when('action', 'action')
.when('issue', 'issue')
.when('lesson', 'lesson')
.when('opportunity', 'opporutnity')
.when('risk', 'risk')
.otherwise('main');
$stateProvider
.state('main', {
url: "/main",
//templateUrl: '/app/tool/home/home.html',
controller: 'MainController'
});
$stateProvider
.state('action', {
url: "/actionitems",
templateUrl: '/app/tool/action/ActionItems.html',
controller: 'ActionController'
})
$stateProvider
.state('action.summary', {
url: "/actionitems/all",
templateUrl: '/app/tool/action/ActionItems.html',
controller: 'ActionController'
})
}
app.js
angular.module('Action', ['datatables', 'ngResource']);
var app = angular.module('Main', ['ui.router', 'oc.lazyLoad', 'datatables', 'ngResource', 'Action']);
app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider){
config($stateProvider, $urlRouterProvider);
$ocLazyLoadProvider.config({
modules: [{
name: 'action',
files: ['app/tool/action/ActionController.js']
}]
});
}]).controller('MainController', function($ocLazyLoad){
}).controller('ActionController', function($ocLazyLoad, $resource, $scope){
$ocLazyLoad.load(['action']).then(
function(){
GetActionItems($resource).then(function(results){
$scope.actionitems = results;
});
});
});
ActionItems.html
<div ng-controller="ActionController">
ActionItems
<table datatables="ng">
<thead>
<tr>
<th>
ID
</th>
<th>
ActionItemTitle
</th>
<th>
Criticality
</th>
<th>
Assignor
</th>
<th>
Owner
</th>
<th>
AltOwner
</th>
<th>
Approver
</th>
<th>
AssignedDate
</th>
<th>
DueDate
</th>
<th>
ECD
</th>
<th>
CompletionDate
</th>
<th>
ClosedDate
</th>
<th>
Team
</th>
<th>
Meeting
</th>
<th>
Phase
</th>
<th>
Source
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="actionitem in actionitems">
<td>{{actionitem.id}}</td>
<td>{{actionitem.title}}</td>
<td>{{actionitem.criticality}}</td>
<td>{{actionitem.assignor}}</td>
<td>{{actionitem.altowner}}</td>
<td>{{actionitem.approver}}</td>
<td>{{actionitem.assigneddate}}</td>
<td>{{actionitem.duedate}}</td>
<td>{{actionitem.ecd}}</td>
<td>{{actionitem.completiondate}}</td>
<td>{{actionitem.closeddate}}</td>
<td>{{actionitem.team}}</td>
<td>{{actionitem.meeting}}</td>
<td>{{actionitem.phase}}</td>
<td>{{actionitem.source}}</td>
</tr>
</tbody>
</table>
</div>