传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来。 通过使用 angular-async-loader 库,我们可以使用 requirejs 等加载器,在 module 初始化之后,在动态异步加载其他的 Controller, Services, Filters 等等......
See https://github.com/subchen/angular-async-loader
An async loader for angular 1.x application.
Support following components to dynamic register:
.controller
.services
.filter
.directive
.value
.constant
.provider
.decorator
Support following amd/cmd loaders:
Require.js
Sea.js
System.js
Support controllerUrl/denpendencies
config in angular-ui-router
and angular-route
:
$stateProvider.state
$routeProvider.when
npm install angular-async-loader
See Sample: https://github.com/subchen/angular-async-loader/blob/master/sample/
index.html
<script src="assets/requirejs/require.js"></script>
<script src="bootstrap.js"></script>
bootstrap.js
require.config({
baseUrl: '/',
paths: {
'angular': 'assets/angular/angular.min',
'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
'angular-async-loader': 'assets/angular-async-loader/angular-async-loader'
},
shim: {
'angular': {exports: 'angular'},
'angular-ui-router': {deps: ['angular']}
}
});
require(['angular', './app-routes'], function (angular) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
angular.element(document).find('html').addClass('ng-app');
});
});
app.js
define(function (require, exports, module) {
var angular = require('angular');
var asyncLoader = require('angular-async-loader');
require('angular-ui-router');
var app = angular.module('app', ['ui.router']);
// initialze app module for async loader
asyncLoader.configure(app);
module.exports = app;
});
app-routes.js
define(function (require) {
var app = require('./app');
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.html',
// new attribute for ajax load controller
controllerUrl: 'home/homeCtrl',
controller: 'homeCtrl'
})
.state('users', app.route({
url: '/users',
templateUrl: 'users/users.html',
// new attribute for ajax load controller
controllerUrl: 'users/usersCtrl',
controller: 'usersCtrl',
// load more controllers, services, filters, ...
dependencies: ['services/usersService']
}));
}]);
});
users/usersCtrl.js
define(function (require) {
var app = require('../app');
// dynamic load services here or add into dependencies of state config
// require('../services/usersService');
app.controller('usersCtrl', ['$scope', function ($scope) {
// shortcut to get angular injected service.
var userServices = app.get('usersService');
$scope.userList = usersService.list();
}]);
});