传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来。 通过使用 angular-async-loader 库,我们可以使用 requirejs 等加载器,在 module 初始化之后,在动态异步加载其他的 Controller, Services, Filters 等等......
See
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
Installation
npm install angular-async-loader
Usage
See Sample:
index.html
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(); }]);});