前端架构:Angular与requirejs集成实践

这几天angular与requirejs、browserify的集成弄的博主头好晕,今天终于成功集成了requirejs,现写些心得体会在这里。

 

核心思想:angular加载时有一定的顺序,必须依次加载(按照先后顺序)angular,angular-route,module模块,service模块,controller模块,而且requirejs里面的define([......],function(){})加载顺序就很没谱了(毕竟requirejs是异步加载),因此要思路是:

 

1、先建个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',即页面可不写。

2、app.js---创建module 

1 define(["angular",'angular-route'],function(angular){

2     return angular.module("data",['ngRoute']);

3 })

    这里的angular在shim中要定义exports,要不然会粗错哦

3、service层---处理各种业务逻辑与数据持久化

1 define(['app'],function(app) {

2     app.factory('DataFactory',function($http){

3         var service = {};

4         .......

5         return service;

6     });

7 });

     这里有个特别有意思的现象,引入service后里面执行顺序很奇葩,具体等我过两天整理清楚了再放上来

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

5、在页面的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~

 

你可能感兴趣的:(requirejs)