首先，要用1.2以上的angular。。。因为这个原因浪费了我两天半的时间。。。
引用模块：angular-route
先加载require.js
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>{{'TODO supply a title'}}</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> 8 <link href="/assets/css/apply.css" rel="stylesheet"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 <img src="/images/logo.png"></div> 14 </header> 15 <main ng-view></main> 16 <footer> 17 <div class="container"></div> 18 </footer> 19 <script type="text/javascript" src="/assets/js/require.js" data-main="/assets/app/main.js"></script> 20 </body> 21 </html>
main.js
1 require.config({ 2 //配置angular的路径 3 baseUrl: "/assets", 4 paths: { 5 "angular": "js/angular/angular", 6 "angular-route": "js/angular/angular-route", 7 "angular-resource": "js/angular/angular-resource" 8 9 10 11 }, 12 //这个配置是你在引入依赖的时候的包名 13 shim: { 14 "jquery": { 15 exports: "jQuery" 16 }, 17 "angular": { 18 exports: "angular" 19 }, 20 "angular-route": { 21 deps: ['angular'], 22 exports: "angular-route" 23 }, 24 "angular-resource": { 25 deps: ['angular'], 26 exports: "angular" 27 } 28 } 29 }); 30 var app = 'app.js'; // 你的app模块 31 define(['angular', app, 'angular-route'], function(angular, app, config) { 32 angular.bootstrap(document, ['app']); // 关键 33 });
注意 angular.bootstrap(document,['app']) 必须要手动渲染，因为变成异步加载angular了。
在第二个参数写上你的module名称，这里我起名叫app（在app.js中定义）
app.js（关键点，本人亲自改造，主要运用$routeProvider.when方法中的参数resolve加上$q服务返回deferred对象实现）
apply.js
在第二个参数写上你的module名称，这里我起名叫app（在app.js中定义）
app.js（关键点，本人亲自改造，主要运用$routeProvider.when方法中的参数resolve加上$q服务返回deferred对象实现）
1 define([ 2 'angular', 3 'app/route/apply', // route 文件 4 // 's/md5', 5 'angular-route', 6 'angular-resource' 7 ], function(angular, config) { 8 var app = angular 9 .module('app', ['ngRoute', 'ngResource']) 10 .config(function($routeProvider, $controllerProvider) { 11 var router = function(config) { 12 return angular.extend({ 13 resolve: { 14 delay: function($q, $rootScope) { 15 var defer = $q.defer(); 16 require(config.require, function(s) { 17 $controllerProvider.register(config.controller, s); 18 defer.resolve(); 19 $rootScope.$apply(); 20 }) 21 return defer.promise; 22 } 23 } 24 }, config); 25 }; 26 // 下面的循环请亲自修改成适合自己项目的路径 27 for (var i in config) { 28 $routeProvider.when(i, router({ 29 templateUrl: 'html/' + config[i].html + '.html', // 加载的模板文件地址（同普通$routeProvider） 30 controller: i, 31 require: ['c/' + config[i].controller] // 加载的controller文件，对应的就是require()函数中的第一个参数 32 })); 33 } 34 $routeProvider.otherwise({ 35 redirectTo: '/login' 36 }); 37 }) 38 39 return app; 40 });
接下来是上面需要用到的路由配置文件
route.js1 define([], function() { 2 return { 3 "/": { 4 html: "apply/step1", 5 controller: "apply" 6 }, 7 "/step2": { 8 html: "apply/step2", 9 controller: "apply" 10 } 11 }; 12 });
最后是控制器 （注意命名要和你的controller一致）
1 define(['angular'], function(angular) { 2 'user strict'; 3 return ['$log', '$http', '$scope', '$resource', 4 function($log, $http, $scope, $resource) { 5 $http 6 .get('/data/option/apply') 7 .success(function(data) { 8 // console.log(data) 9 angular.extend($scope, data); 10 $scope.data = data.default; 11 }); 12 // 注册 13 $scope.save = function() { 14 var User = $resource('/users'); 15 User.save($scope.data, function(rs) { 16 17 }); 18 } 19 } 20 ]; 21 });
完成，写的文章不多所以不太好，见谅
另外，由于是手动加载angular的module和异步加载controller，所以无需再html标签上写ng-app和ng-controller，controller名自动设置（即你的路由规则字符串）