Front-end architecture: angular and Requirejs integration practices

These days angular and requirejs, browserify integration of Bo Master Head good dizzy, today finally successfully integrated Requirejs, now write some experience here.

Core idea: Angular load when there is a certain order, must be loaded sequentially (in order) Angular,angular-route,module module, Service module, controller module, and Requirejs inside the Define ([...],function () {}) The load order is flaky (after all Requirejs is asynchronous loading), so the idea is:

1, the first to build a angular-bootstrap.js file (online love so named)

This file is the need to use the relevant JS file a whole brain loaded into

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");//Here data is the name of the module, That is the name of Ng-app 9     })

this is equivalent to writing ng-app= ' data ' on the page, that is, the page is not writable.

2. App.js---Create module

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

here's angular in shim to define exports, otherwise it will be coarse wrong oh

3. Service Layer---Handle various business logic and data persistence

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

here is a particularly interesting phenomenon, the introduction of service after the execution of the order is very wonderful, specifically, I have two days to clear up and then put up

4, CONTROLLER layer---and page two-way binding

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

5, in the page JS, require ([' angular-bootstrap ']) can

1 //Requirejs Configuration2 Shim: {3' Angular-route ': [' angular '],4"Angular":{5Exports: "Angular"6         },7"App":{8Exports: ' App '9         }Ten     }, One paths: { A' Domready ': '. /bower_components/domready/domready ', -' Angular ': '. /bower_components/angular/angular ', -' Angular-route ': '. /bower_components/angular-route/angular-route ', the' App-ng ': './angular ', -' App ': './angular/app ' -},

OK, basically is this, I am a lazy person, Lian Weibo, the circle of friends only see not hair Zhu Er, can write so many blog has been hard rare ... O (∩_∩) o~

Front-end architecture: angular and Requirejs integration practices