你的位置:首页 > Java教程

[Java教程]angular+requirejs前端整合


  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   skim:{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='http://www.cnblogs.com//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来分发处理,结构清晰,便于项目的维护等。由于我的表达能力不大好,各位能看的明白,我很开心,看不明白希望各位多多见谅,哈哈!