[AngularJS] 使用AngularAMD動態加載Controller

時間 2019-11-18

標籤 angularjs 使用 angularamd 動態加載 controller 欄目 AngularJS 简体版

原文原文鏈接

[AngularJS] 使用AngularAMD動態加載Controller

前言

使用AngularJS來開發Single Page Application(SPA)的時候，能夠選用AngularUI Router來提供頁面內容切換的功能。可是在UI Router的使用情景裏，須要開發人員將每一個State所使用的Controller預先加載以後，才能正常的切換頁面內容。這也就表明開發人員所創建的SPA，必需要在啓動的當下，就先將整個SPA所用到的Controller都預先加載到瀏覽器之中。而這樣的預先加載全部Controller備用的動做，在大型的項目中很容易形成瀏覽器效能上的負擔，進而影響使用者的操做體驗。html

本篇文章介紹如何使用AngularAMD來動態加載Controller，讓SPA的啓動過程更加輕量化，用以提高使用者的操做體驗。主要爲本身留個紀錄，也但願能幫助到有須要的開發人員。git

AngularAMD

安裝

AngularAMD使用bower來發布套件本體與其相依套件。而要使用bower必需要先安裝Node.js、接着安裝npm、最後安裝bower，完成安裝步驟以後，開發人員就可使用bower來下載套件。相關bower的安裝步驟，能夠參考下列資料：github

Gulp, Grunt, Bower以及npm - 黑暗線程

安裝完bower以後，開發人員就能夠創建一個新的文件夾做爲工做文件夾。接着開啓命令提示字符CD到這個工做文件夾以後，輸入下列指令，就可使用bower來取得AngularAMD套件本體與其相依套件。npm

bower install angularAMD

而由於後續範例須要使用AngularUI Router這個Angular套件，來提供頁面內容切換的功能，因此還須要使用下列指令，使用bower來取得AngularUI Router這個套件。gulp

bower install angular-ui-router

完成上列步驟後，開啓工做文件夾能夠看到多出來一個bower_components文件夾，而這個文件夾內擺放了angularAMD套件本體、以及angular、require.js、angular-ui-router這三個套件。bootstrap

開發app.js

完成安裝步驟後，在工做文件夾內新增一個app.js檔案，用來定義系統運行時的相關參數、還有必要的啓動程序代碼。瀏覽器

接着須要在app.js裏面加入require.js的設定參數，用來定義系統運行時使用的套件路徑、以及套件之間的相依性。(相關require.js的使用介紹，能夠參考：require.js的用法 - 阮一峯的網絡日誌)網絡

require.config({
    paths: {
        // angular
        "angular": "bower_components/angular/angular",

        // angular-ui
        "angular-ui-router": "bower_components/angular-ui-router/release/angular-ui-router",

        // angularAMD
        "angularAMD": "bower_components/angularAMD/angularAMD",
        "ngload": "bower_components/angularAMD//ngload"
    },
    shim: {         
        // angular
        "angular": { exports: "angular" },

        // angular-ui
        "angular-ui-router": ["angular"],

        // angularAMD
        "angularAMD": ["angular"],
        "ngload": ["angularAMD"]
    }
});

完成require.js設定以後，在同一個app.js裏，加入下列require語法用來加載項目使用的套件。(相關require語法的使用介紹，一樣能夠參考：require.js的用法 - 阮一峯的網絡日誌)app

// bootstrap
define(["angular", "angularAMD", "angular-ui-router"], function (angular, angularAMD) {        
    // ......
});

接着在require語法內，使用下列ui-router+angularAMD語法，來定義系統內ui-router的路由設定、以及默認的開啓路徑。(相關ui-router語法的使用介紹，能夠參考：學習 ui-router管理狀態 - bubkoo)ide

// routes
var registerRoutes = function($stateProvider, $urlRouterProvider) {

    // default
    $urlRouterProvider.otherwise("/home");

    // route
    $stateProvider

        // home
        .state("home", angularAMD.route({
            url: "/home",
            templateUrl: "home.html",
            controllerUrl: "home.js"
        }))

        // home
        .state("about", angularAMD.route({
            url: "/about",
            templateUrl: "about.html",
            controllerUrl: "about.js"
        }))
    ;           
};

最後，一樣在require語法內，使用下列angular+angularAMD語法，來啓動系統裏的angular套件，這就完成了系統的運行參數、啓動程序代碼的相關設定。(相關angular的使用介紹，建議參考：AngularJS 建置與執行 - Shyam Seshadri, Brad Green)

// module
var app = angular.module("app", ["ui.router"]);

// config
app.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);

// bootstrap
return angularAMD.bootstrap(app);

開發Template、Controller

創建定義運行參數與啓動程序代碼的app.js以後，就能夠着手使用angular+require語法，來創建系統內ui-router所要切換使用的頁面樣板(Template)、以及頁面控制(Controller)。(相關angular的使用介紹，建議參考：AngularJS 建置與執行 - Shyam Seshadri, Brad Green)

home.html

<h1>{{ title }}</h1>
<br/>
<button ui-sref="about">About</button>

home.js

define([], function () {

    // controller
    return ["$scope", function ($scope) {

        // properties
        $scope.title = "This is Home page";
    }]; 
});

開發index.html

完成上列步驟以後，還須要創建index.html來作爲整個Single Page Application(SPA)的程序進入點。在這個index.html裏，最主要就是使用requirejs來加載與執行app.js，而且在body裏面加入一個用來讓ui-router擺放頁面內容的div。

<!DOCTYPE html>
<html>
<head>    
    <!-- meta -->
    <meta charset="utf-8">

    <!-- title -->
    <title></title>

    <!-- script -->
    <script data-main="app.js" src="bower_components/requirejs/require.js"></script>
</head>
<body>
    <!-- content -->
    <div ui-view></div> 
</body>
</html>