angular+requirejs前端整合

时间 2019-11-11

标签 angular+requirejs angular requirejs 前端整合栏目 AngularJS 繁體版

原文原文链接

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

一、项目目录结构，以下图：css

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

 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 });

三、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 });

　　四、controllers/controllers.js—》用于建立控制器模块，代码以下：java

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

　　五、services/services.js—》用于建立服务模块，代码以下：jquery

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

　　六、directives/directives.js—》用于建立指令模块，代码以下：web

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

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

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 });

　　八、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 });

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

 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 });

　　十、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来分发处理，结构清晰，便于项目的维护等。因为个人表达能力不大好，各位能看的明白，我很开心，看不明白但愿各位多多见谅，哈哈！