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來分發處理，結構清晰，便於項目的維護等。因爲個人表達能力不大好，各位能看的明白，我很開心，看不明白但願各位多多見諒，哈哈！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。