用requirejs使angularJS模块化开发

浏览数：259 / 时间：2015年06月09日

首先，要用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 });