前端架構：Angular與requirejs集成實踐

這幾天angular與requirejs、browserify的集成弄的博主頭好暈，今天終於成功集成了requirejs，現寫些心得體會在這裏。

 

核心思想：angular加載時有必定的順序，必須依次加載（按照前後順序）angular，angular-route，module模塊，service模塊，controller模塊，並且requirejs裏面的define([......],function(){})加載順序就很沒譜了（畢竟requirejs是異步加載），所以要思路是：

 

一、先建個angular-bootstrap.js文件（網上都愛這麼起名）

    這個文件是把須要使用的相關js文件一股腦所有加載進去

 

1 define(["angular",
2     'domReady!',
3     "angular-route",
4     "app",
5     "app-ng/service/test.service",
6     "app-ng/controller/test.controller"
7     ],function(angular,document){
8         angular.bootstrap(document,["data"]);//此處data是module的名稱，也就是ng-app的名稱
9     })

 

   這部同等於在頁面上寫ng-app='data'，即頁面可不寫。

二、app.js---建立module 

1 define(["angular",'angular-route'],function(angular){
2     return angular.module("data",['ngRoute']);
3 })

    這裏的angular在shim中要定義exports,要否則會粗錯哦

三、service層---處理各類業務邏輯與數據持久化

1 define(['app'],function(app) {
2     app.factory('DataFactory',function($http){
3         var service = {};
4         .......
5         return service;
6     });
7 });

     這裏有個特別有意思的現象，引入service后里面執行順序很奇葩，具體等我過兩天整理清楚了再放上來

四、controller層---與頁面雙向綁定

1 define(['app','app-ng/service/test.service'],function(app) {
2     app.controller('mainController', function($scope,$http,DataFactory) {
3         $scope.formData = {};
4         .....
5       )};
6 )};

五、在頁面的js中，require(['angular-bootstrap'])便可

 1 //requirejs配置
 2 shim: {
 3         'angular-route':['angular'],
 4         "angular":{
 5             exports:"angular"
 6         },
 7         "app":{
 8             exports:'app'
 9         }
10     },
11     paths: {
12         'domReady': '../bower_components/domReady/domReady',
13         'angular': '../bower_components/angular/angular',
14         'angular-route':'../bower_components/angular-route/angular-route',
15         'app-ng':'./angular',
16         'app':'./angular/app'
17     },

 

好啦，基本就是這樣，我是個懶人，連微博、朋友圈都只看不發的主兒，能寫這麼多博客已經狠可貴了。。。O(∩_∩)O~