1 2 3 4{ {'TODO supply a title'}} 5 6 7 8 9 10 1112 15 16 19 20 211314
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 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名自动设置(即你的路由规则字符串)