首先，要用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对象实现）
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.js
1 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一致）
apply.js
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名自动设置（即你的路由规则字符串）
时间： 2024-08-04 01:17:07