angular+requirejs前端整合

　 requirejs或者seajs我相信在前端的开发工作中经常使用到，而angular，这个强大的web前端框架很多公司也在引入。本文主要记录自己在工作学习中如何对angular跟requirejs进行整合，如何构建前端的MVC项目，废话不多说，直接进入正题，上代码。

1、项目目录结构，如下图：

2、routes.js—》路由配置，用于请求加载各个页面脚本的分发配置，代码如下：

 /**
  * Created by ljc on 2015/7/7.
  */
 define(function () {
     var route = {
         "\/test1.*": {module:"controllers/test1/app",appDomain:"webApp"}
     };
     return {
         route: route,
         defaultRoute: "controllers/index/app"
     };
 });

3、javascripts/app.js—》用于配置require加载的基础模块，路由分发，代码如下：

 /**
  * Created by ljc on 2015/7/7.
  */
 require.config({
     baseUrl:"javascripts/",
     paths:{
         'jquery':['lib/jquery-1.8.2.min'],
         'underscore':['lib/underscore'],
         'text':['lib/text'],
         'angular':['lib/angular'],
         'angular-route':['angular-route']
     },
     shim:{
         'jquery':{
             exports:'$'
         },
         'underscore':{
             exports:'_'
         },
         'angular':{
             exports:'angular'
         },
         'text':{
             exports:'text'
         },
         'angular-route':{
             exports:"angular-route",
             deps: ["angular"]
         }
     },
     urlArgs:"v=11"
 });

 require(['routes/routes','angular','jquery','text','underscore'],function(route){
     var target = location.pathname;
     var match = null,
         re = null;
     for (var key in route.route) {
         re = new RegExp("^" + key + "$", "gi");
         if (re.test(target)) {
             match = route.route[key];
             break;
         }
     }
     if (!match) {
         match = route.defaultRoute;
     }
     if ($.type(match) === "string") {
         match = [match];
         require(match);
     }else{
         if(match.hasOwnProperty("module")){
             var _loadApp=[match["module"]];
             require(_loadApp,function(){
                 angular.module(match["appDomain"],["controllers","services"]);
                 angular.bootstrap(document,[match["appDomain"]]);
             });
         }
     }
 });

　　4、controllers/controllers.js—》用于创建控制器模块，代码如下：

　　

 /**
  * Created by ljc on 2015/7/7.
  */
 define([],function(){
     return angular.module("controllers",[]);
 });

　　5、services/services.js—》用于创建服务模块，代码如下：

 /**
  * Created by ljc on 2015/7/7.
  */
 define([],function(){
     return angular.module("services",[]);
 });

　　6、directives/directives.js—》用于创建指令模块，代码如下：

　　

 /**
  * Created by ljc on 2015/7/7.
  */
 define([],function(){
     return angular.module("directives",[]);
 });

　　7、controllers/test1/app.js—》具体页面js加载入口文件，通过javascripts/app.js进行分发

　　

 /**
  * Created by ljc on 2015/7/7.
  */
 define(['controllers/test1/test1controller','services/test1/test1service'],function(){
     /*angular.module("webApp",["controllers"]);
     angular.bootstrap(document,['webApp']);*/
 });

　　8、controllers/test1/test1controllers.js—》具体页面业务控制器，controllers/test1/app.js的依赖文件

　　

 /**
  * Created by ljc on 2015/7/7.
  */
 define(['controllers/controllers'],function(controllers){
     controllers.controller("test1Controller",['$scope','voteService',function($scope,data){
         $scope.name=data.name;
     }]);
 });

　　9、services/test1/test1service.js—》具体页面业务依赖的服务，controllers/test1/app.js的依赖文件

　　

 /**
  * Created by ljc on 2015/7/7.
  */
 define(["services/services"],function(services){
     services.factory("voteService",function(){
         return {
             name:"我是中国人"
         }
     });
 });

　　10、views/index_test1.ejs—》视图View，代码如下：

 <!DOCTYPE html>
 <html>
 <head>
     <title>angular_test1</title>
     <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body ng-controller="test1Controller">
 <label>{{name}}</label>
 </body>
 <script type="text/javascript" data-main="javascripts/app.js" src="javascripts/lib/require.js"></script>
 </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来分发处理，结构清晰，便于项目的维护等。由于我的表达能力不大好，各位能看的明白，我很开心，看不明白希望各位多多见谅，哈哈！