AngularJS 項目搭建--基於RequireJs

較大規模的angular單頁應用因爲引用了大量的資源文件可能會致使在頁面加載速度較慢，然而這些資源並不是都須要在首頁使用，這裏咱們能夠使用了 RequireJs 和 angular-async-loader 來實現資源和angular模塊的異步加載，提升應用的加載速度和性能

依賴

使用bower管理項目依賴

Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。（bower須要依賴 nodejs）

安裝項目依賴

1.angular

bower install angular

2.angular-ui-router

bower install angular-ui-router

3.requirejs 詳細文檔

bower install requirejs

4.angular-async-loader

bower install https://github.com/subchen/angular-async-loader.git

---

目錄結構

└── project
    ├── js                        -- js目錄
         ├── app.js               -- 初始化app
         ├── login.js             -- 登錄頁控制器
         ├── router.js            -- 路由
         ├── service.js           -- 服務模塊
         └── productlist.json     -- 測試數據
    ├── template                  -- 模版html
    ├── index.html                -- 入口頁
    ├── bootstrap.js              -- 項目啓動器
    └── bower_components          -- bower維護的插件

調用

配置須要使用requirejs調用的模塊路徑和依賴（bootstrap.js）

require.config({
    baseUrl:'./',
    paths:{
        'angular':'bower_components/angular/angular',
        'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
        'service':'js/service.js'
    },
    shim:{
        'angular':{exports:'angular'},
        'angular-ui-router': {deps: ['angular']},
        'service':{deps: ['angular']}
    },
    waitSeconds: 0 //超時時間 設爲0即持續等待
})

初始化項目，啓動angular（bootstrap.js）

//載入angular和路由
require(['angular','js/router'],function(angular){
    angular.element(document).ready(function(){
        angular.bootstrap(document,['app']); //angular加載完成後手動啓動angular
    });
})

初始化angular主模塊並配置異步加載模塊（js/app.js）

define(function(require,exports,module){
    var angular = require('angular'); //引入angular
    var asyncLoader = require('angular-async-loader'); //引入異步加載模塊組件

    require('angular-ui-router')
    
    var app = angular.module('app', ['ui.router']); //定義app模塊

    asyncLoader.configure(app); //給app模塊配置異步加載
    
    module.exports = app; //做爲模塊導出
})

路由中要定義controller所在文件位置（js/router.js）

$stateProvider.state('login', {
    url:'/login',
    templateUrl: "template/login.html",
    controllerUrl: "js/login", //controller所在文件位置
    controller: "login" //controller名稱
})

新建自定義模塊（js/service.js）

define(function(require) {
    var angular = require('angular'); //引入angular

    angular.module('app.service', []) //建立模塊
        .factory('asyncModule', function() {
            return '個人模塊'
        })
})

controler中異步加載模塊（js/login.js）

define(function(require) {

    var app = require('js/app') //引入js/app.js下的app模塊

    require('service'); //加載服務模塊的js文件    
    app.useModule('app.service'); //異步加載app.service模塊

    // 控制器中注入方法     
    app.controller('login',['$scope','asyncModule',
    function($scope,asyncModule){
        alert(asyncModule);
    }]);
    
})