AngularJs與RequireJs整合

*

 參考文章：基於RequireJs和AngularJs的前端技術架構

一：預備知識

1，

RequireJS API 存在於RequireJS載入時建立的命名空間requirejs下。其主要API主要是下面三個函數:

• define– 該函數用戶建立模塊。每一個模塊擁有一個惟一的模塊ID，它被用於RequireJS的運行時函數，define函數是一個全局函數，不須要使用requirejs命名空間.
• require– 該函數用於讀取依賴。一樣它是一個全局函數，不須要使用requirejs命名空間.
• config– 該函數用於配置RequireJS.

2，AMD規範

require([module], callback);

目前，通行的Javascript模塊規範共有兩種：CommonJS和AMD。主要介紹AMD，可是要先從CommonJS講起。

參考：javascript模塊化編程

可是，因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。仍是上一節的代碼，若是在瀏覽器中運行，會有一個很大的問題，你能看出來嗎？

var math = require('math');

　　math.add(2, 3);

第二行math.add(2, 3)，在第一行require('math')以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。

這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。

所以，瀏覽器端的模塊，不能採用"同步加載"（synchronous），只能採用"異步加載"（asynchronous）。這就是AMD規範誕生的背景。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：

require([module], callback);

require(['math'], function (math) {

　　　　math.add(2, 3);

　　});

math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。因此很顯然，AMD比較適合瀏覽器環境。

目前，主要有兩個Javascript庫實現了AMD規範：require.js和curl.js。本系列的第三部分，將經過介紹require.js，進一步講解AMD的用法，以及如何將模塊化編程投入實戰。

****

AMD規範只定義了一個函數"define",它是一個全局變量，

define(id?,dependencies?, factory)

 

二：總體架

main.js

'use strict';

var min = ".min";
var appMin = "";

require.config({
    baseUrl: 'js/',
    paths: {
        //libs
        //'jQuery': 'libs/jquery/jquery' + min,
        //'bootstrap': 'libs/bootstrap/js/bootstrap' + min,
        'angular': 'libs/angular/angular' + min,
   },
    shim: {
        //libs
        'angular': {
            exports: 'angular'
        },
    }
});

require([
    //libs    'angular',
...
], function (domReady, angular) {
    require(['domReady'], function () {
        angular.bootstrap(document, ['ftApp']);//引導程序
    });
});

經過angular.bootstrap(document, ['app'])手動初始化靜態頁面使其支持angularJS

 

*

app.js

經過主函數入口main.js註冊的應用app.js來註冊整個應用程序的各個模塊，每一個模塊中定義各自的路由。

define(["angular"], function (angular) {
    'use strict';

    var ftApp = angular.module('ftApp',[...]).run(['$rootScope', '$http', function ($rootScope, $http) {        }]);

...

    return ftApp;
});

 

*