首页 > 代码库 > 用requirejs使angularJS模块化开发

用requirejs使angularJS模块化开发

2024-08-02 13:19:43   212人阅读


 首先，要用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 = http://www.mamicode.com/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名自动设置（即你的路由规则字符串） 

用requirejs使angularJS模块化开发


联系
我们