requirejs或者seajs我相信在前端的開發工作中經常使用到，而angular，這個強大的web前端框架很多公司也在引入。本文主要記錄自己在工作學習中如何對angular跟requirejs進行整合，如何構建前端的MVC項目，廢話不多說，直接進入正題，上代碼。
1、項目目錄結構，如下圖：
2、routes.js—》路由配置，用於請求加載各個頁面腳本的分發配置，代碼如下：
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define(function () { 5 var route = { 6 "\/test1.*": {module:"controllers/test1/app",appDomain:"webApp"} 7 }; 8 return { 9 route: route, 10 defaultRoute: "controllers/index/app" 11 }; 12 });
3、javascripts/app.js—》用於配置require加載的基礎模塊，路由分發，代碼如下：
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 require.config({ 5 baseUrl:"javascripts/", 6 paths:{ 7 'jquery':['lib/jquery-1.8.2.min'], 8 'underscore':['lib/underscore'], 9 'text':['lib/text'], 10 'angular':['lib/angular'], 11 'angular-route':['angular-route'] 12 }, 13 shim:{ 14 'jquery':{ 15 exports:'$' 16 }, 17 'underscore':{ 18 exports:'_' 19 }, 20 'angular':{ 21 exports:'angular' 22 }, 23 'text':{ 24 exports:'text' 25 }, 26 'angular-route':{ 27 exports:"angular-route", 28 deps: ["angular"] 29 } 30 }, 31 urlArgs:"v=11" 32 }); 33 34 require(['routes/routes','angular','jquery','text','underscore'],function(route){ 35 var target = location.pathname; 36 var match = null, 37 re = null; 38 for (var key in route.route) { 39 re = new RegExp("^" + key + "$", "gi"); 40 if (re.test(target)) { 41 match = route.route[key]; 42 break; 43 } 44 } 45 if (!match) { 46 match = route.defaultRoute; 47 } 48 if ($.type(match) === "string") { 49 match = [match]; 50 require(match); 51 }else{ 52 if(match.hasOwnProperty("module")){ 53 var _loadApp=[match["module"]]; 54 require(_loadApp,function(){ 55 angular.module(match["appDomain"],["controllers","services"]); 56 angular.bootstrap(document,[match["appDomain"]]); 57 }); 58 } 59 } 60 });
4、controllers/controllers.js—》用於創建控制器模塊，代碼如下：
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define([],function(){ 5 return angular.module("controllers",[]); 6 });
5、services/services.js—》用於創建服務模塊，代碼如下：
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define([],function(){ 5 return angular.module("services",[]); 6 });
6、directives/directives.js—》用於創建指令模塊，代碼如下：
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define([],function(){ 5 return angular.module("directives",[]); 6 });
7、controllers/test1/app.js—》具體頁面js加載入口文件，通過javascripts/app.js進行分發
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define(['controllers/test1/test1controller','services/test1/test1service'],function(){ 5 /*angular.module("webApp",["controllers"]); 6 angular.bootstrap(document,['webApp']);*/ 7 });
8、controllers/test1/test1controllers.js—》具體頁面業務控制器，controllers/test1/app.js的依賴文件
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define(['controllers/controllers'],function(controllers){ 5 controllers.controller("test1Controller",['$scope','voteService',function($scope,data){ 6 $scope.name=data.name; 7 }]); 8 });
9、services/test1/test1service.js—》具體頁面業務依賴的服務，controllers/test1/app.js的依賴文件
1 /** 2 * Created by ljc on 2015/7/7. 3 */ 4 define(["services/services"],function(services){ 5 services.factory("voteService",function(){ 6 return { 7 name:"我是中國人" 8 } 9 }); 10 });
10、views/index_test1.ejs—》視圖View，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>angular_test1</title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 </head> 7 <body ng-controller="test1Controller"> 8 <label>{{name}}</label> 9 </body> 10 <script type="text/javascript" data-main="javascripts/app.js" src="javascripts/lib/require.js"></script> 11 </html>
運轉流程說明：所有的頁面只引入一個腳本，javascripts/app.js，該腳本執行時會去匹配routes/routes.js配置的路由，然后去加載具體頁面的業務js，加載完畢后創建routes/routes.js配置的angular應用作用域(前提是在routes/routes.js配置了angular應用的作用域，如果沒配置則需要在具體頁面依賴的js中手動創建和啟動)，這里的具體頁面的業務運轉的業務js入口就是controllers/test1/app.js，當這個js運轉起來后會加載相關的依賴腳本，比如控制器，服務，指令等。
以上便是angular+requirejs搭建前端的MVC項目的具體流程。眾所周知，MVC是很流行的一種設計框架，它使得我們的項目得到很好的解耦，視圖歸視圖，業務邏輯歸業務邏輯，一切請求都通過控制器Controller來分發處理，結構清晰，便於項目的維護等。由於我的表達能力不大好，各位能看的明白，我很開心，看不明白希望各位多多見諒，哈哈！