前言

使用AngularJS來開發Single Page Application(SPA)的時候,可以選用AngularUI Router來提供頁面內容切換的功能。但是在UI Router的使用情景裡,需要開發人員將每個State所使用的Controller預先載入之後,才能正常的切換頁面內容。這也就代表開發人員所建立的SPA,必須要在啟動的當下,就先將整個SPA所用到的Controller都預先載入到瀏覽器之中。而這樣的預先載入所有Controller備用的動作,在大型的專案中很容易造成瀏覽器效能上的負擔,進而影響使用者的操作體驗。

本篇文章介紹如何使用AngularAMD來動態載入Controller,讓SPA的啟動過程更加輕量化,用以提升使用者的操作體驗。主要為自己留個紀錄,也希望能幫助到有需要的開發人員。

安裝

AngularAMD使用bower來發佈套件本體與其相依套件。而要使用bower必須要先安裝Node.js、接著安裝npm、最後安裝bower,完成安裝步驟之後,開發人員就可以使用bower來下載套件。相關bower的安裝步驟,可以參考下列資料:

安裝完bower之後,開發人員就可以建立一個新的資料夾作為工作資料夾。接著開啟命令提示字元CD到這個工作資料夾之後,輸入下列指令,就可以使用bower來取得AngularAMD套件本體與其相依套件。

bower install angularAMD

而因為後續範例需要使用AngularUI Router這個Angular套件,來提供頁面內容切換的功能,所以還需要使用下列指令,使用bower來取得AngularUI Router這個套件。

bower install angular-ui-router

完成上列步驟後,開啟工作資料夾可以看到多出來一個bower_components資料夾,而這個資料夾內擺放了angularAMD套件本體、以及angular、require.js、angular-ui-router這三個套件。

開發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的用法 - 阮一峰的网络日志)

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

接著在require語法內,使用下列ui-router+angularAMD語法,來定義系統內ui-router的路由設定、以及預設的開啟路徑。(相關ui-router語法的使用介紹,可以參考:学习 ui-router管理状态 - bubkoo)

// 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>

執行

完成開發步驟後,就可以準備使用Chrome執行index.html來檢視成果。但是在檢視成果之前,必須要先參考下列資料開啟Chrome的必要功能,後續就使用Chrome來正常的執行index.html。

執行index.html之後,會系統依照路由設定進入預設的Home頁面。而使用Chrome的開發者工具,可以看到系統加載了Home頁面的Template、Controller,並且顯示在頁面上。

點擊Home頁面的About按鈕,會切換到About頁面。這時同樣從Chrome的開發者工具中,可以看到系統是在點擊了About按鈕之後,才去加載About頁面的Template、Controller來顯示在頁面上,這也就是AngularAMD所提供的動態載入Controller功能。

範例下載

範例下載:點此下載

篇章一:[AngularJS] 使用AngularAMD動態載入Controller的更多相关文章

  1. 篇章二:[AngularJS] 使用AngularAMD動態載入Service

    前言 「使用AngularAMD動態載入Controller」:這篇文章裡介紹如何使用AngularAMD來動態載入Controller.本篇文章以此為基礎,介紹如何使用AngularAMD來動態載入 ...

  2. 篇章三:[AngularJS] 使用AngularCSS動態載入CSS

    前言 使用AngularAMD動態載入Controller 使用AngularAMD動態載入Service 上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Ser ...

  3. [Xamarin] 動態載入Fragment (转帖)

    這篇我們來動態加入,一樣務求好懂簡單 1.一樣先將專案調整成3.0以上版本 2.首先建立自定Control的Layout \Resources\Layout\MyControlLayout1.axml ...

  4. Jquery easy ui datagrid動態加載列問題

    1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

  5. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (3):部署設定及應用 (转帖)

    說明:這一篇主要是說明如何將程式部署到Application Server,以及程式如何運作,產生的檔案置於何處,以及如何以瀏覽器呈現(Applet),或是當成桌面應用程式,或是 桌面Applet,這 ...

  6. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (2):JavaFX建立及程式碼說明 (转帖)

    說明:就如同標題一樣,前端會用到JavaFX.Swing.Java Web Start.Google Map 的技術, 後端就是JDBC.Servlet的技術,以及我們會簽署認證jar檔案,這樣才可存 ...

  7. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (1):NetBeans 寫 Servlet (转帖)

    JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (1):NetBeans 寫 Servlet 功能:這支程式的主要功能是將 javafx 與 swi ...

  8. 小林的VB6動態壁紙模擬程序

    本項目參考了以下資料[這可能對你理解程序運行有幫助]: https://github.com/Yinmany/WinWallpaper https://blog.csdn.net/breaksoftw ...

  9. [AngularJS] 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

随机推荐

  1. kylin

    Kylin只能导入扁平化的Hive表,简而言之,其不支持Hive的复杂数据类型,如array.struct.map等

  2. HDU 17新生赛 正品的概率【数论-概率论】

    正品的概率 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  3. [Math Review] Statistics Basics: Main Concepts in Hypothesis Testing

    Case Study The case study Physicians' Reactions sought to determine whether physicians spend less ti ...

  4. (寒假集训)Mooo Moo (完全背包)

    Mooo Moo 时间限制: 1 Sec  内存限制: 64 MB提交: 5  解决: 4[提交][状态][讨论版] 题目描述 Farmer John has completely forgotten ...

  5. POJ 2155 Matrix(树状数组+容斥原理)

    [题目链接] http://poj.org/problem?id=2155 [题目大意] 要求维护两个操作,矩阵翻转和单点查询 [题解] 树状数组可以处理前缀和问题,前缀之间进行容斥即可得到答案. [ ...

  6. 如何使用Delphi编写Modbus RTU CRC16的校验码

    在工业控制中,Modbus RTU CRC16的校验码用的比较广泛,包括本人富士产品中,PC与伺服电机以及PC与VP系列的变频器的Modbus RTU通讯中都使用到了CRC16.     而对CRC1 ...

  7. 使用ubifs格式的根文件系统---过程记录

    配置内核,使其支持ubifs文件系统 1)Device Drivers  --->Memory Technology Device (MTD) support  --->UBI - Uns ...

  8. hdu1013(C++)

    9的余数定理:一个数各位数字的总和除以9的余数与它本身除以9的余数同等 大数问题:防止大数,用字符串来存入数据,再转化为数字 #include<iostream>#include<s ...

  9. 如何给JQ的ajax方法中的success()传入参数?

    当时在使用JQuery提供的Ajax技术的时候,我有个需求,就是要给它请求成功后调用的success()方法传入参数: 所以,我就直接这样子写了: <script> function ge ...

  10. 16个Linux服务器监控命令

    在不同的Linux发行版中,会有不同的GUI程序可以显示各种系统信息,比如SUSE linux发行版中,就有非常棒的图形化的配置和管理工具YaST,KDE桌面环境里的KDE System Guard也 ...