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

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

 

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

 

1、先建个angular-bootstrap.js文件（网上都爱这么起名）

    这个文件是把需要使用的相关js文件一股脑全部加载进去

 

define(["angular",
    'domReady!',
    "angular-route",
    "app",
    "app-ng/service/test.service",
    "app-ng/controller/test.controller"
    ],function(angular,document){
        angular.bootstrap(document,["data"]);//此处data是module的名称，也就是ng-app的名称
    })

 

   这部同等于在页面上写ng-app='data'，即页面可不写。

2、app.js---创建module 

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

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

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

define(['app'],function(app) {
    app.factory('DataFactory',function($http){
        var service = {};
        .......
        return service;
    });
});

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

4、controller层---与页面双向绑定

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

5、在页面的js中，require(['angular-bootstrap'])即可

//requirejs配置
shim: {
        'angular-route':['angular'],
        "angular":{
            exports:"angular"
        },
        "app":{
            exports:'app'
        }
    },
    paths: {
        'domReady': '../bower_components/domReady/domReady',
        'angular': '../bower_components/angular/angular',
        'angular-route':'../bower_components/angular-route/angular-route',
        'app-ng':'./angular',
        'app':'./angular/app'
    },

 

好啦，基本就是这样，我是个懒人，连微博、朋友圈都只看不发的主儿，能写这么多博客已经狠难得了。。。O(∩_∩)O~