前言

上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Service。本篇文章以此為基礎,介紹如何使用AngularCSS來動態載入CSS,讓專案功能更加模組化,增加開發與維護的工作效率。主要為自己留個紀錄,也希望能幫助到有需要的開發人員。

安裝

本篇文章以「使用AngularAMD動態載入Service」的範例程式為基礎,為其附加動態載入CSS的功能。進入本篇的開發步驟之前,開發人員可以先依照上一篇文章的步驟來建立基礎架構。

動態載入Service範例:點此下載

取得基礎架構之後,開啟命令提示字元CD到這個基礎架構的資料夾輸入下列指令,就可以使用bower來取得AngularCSS套件。

bower install angular-css

完成上列步驟後,開啟工作資料夾裡面的bower_components資料夾,可以發現加入了angular-css這個套件。

掛載AngularCSS

取得AngularCSS套件之後,接著就要將套件掛載到系統的Angular裡面。首先編輯工作資料夾內既有的app.js檔案,修改檔案中的require.js的設定參數,用來加入系統運行時AngularCSS的套件路徑、以及相依性。(相關require.js的使用介紹,可以參考:require.js的用法 - 阮一峰的网络日志)

require.config({
paths: { // ...... // angularCSS
"angularCSS": "bower_components/angular-css/angular-css"
},
shim: { // ...... // angularCSS
"angularCSS": ["angular"]
}
});

修改完成require.js設定參數之後,在同一個app.js裡,修改下列require語法用來將AngularCSS加入專案的載入套件清單。(相關require語法的使用介紹,同樣可以參考:require.js的用法 - 阮一峰的网络日志)

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

接著在同一個require語法內,修改下列angular語法來啟動angularCSS套件。這邊要特別注意,angularCSS的module名稱是「"door3.css"」,要小心不要打錯了。(相關angular的使用介紹,建議參考:AngularJS 建置與執行 - Shyam Seshadri, Brad Green)

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

最後,同樣在require語法內,使用angularCSS語法所提供的css參數,來定義每個ui-router路由被啟動時所要動態載入的CSS檔案。(相關AngularCSS所提供的css參數定義,可以參考:AngularAMD:For States (UI Router) - Door3)

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

開發Template、CSS

修改app.js用以掛載AngularCSS之後,就可以著手使用CSS語法,來建立系統裡每個路由所使用的CSS檔案。

  • home.css

    h1 {
    color: blue;
    }
  • about.css

    h1 {
    color: red;
    }

執行

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

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

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

範例下載

範例檔案:點此下載

篇章三:[AngularJS] 使用AngularCSS動態載入CSS的更多相关文章

  1. 篇章一:[AngularJS] 使用AngularAMD動態載入Controller

    前言 使用AngularJS來開發Single Page Application(SPA)的時候,可以選用AngularUI Router來提供頁面內容切換的功能.但是在UI Router的使用情景裡 ...

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

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

  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及動態產生比例圖 (1):NetBeans 寫 Servlet (转帖)

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

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

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

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

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

  9. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

随机推荐

  1. Codeforces Round #267 (Div. 2) B. Fedor and New Game【位运算/给你m+1个数让你判断所给数的二进制形式与第m+1个数不相同的位数是不是小于等于k,是的话就累计起来】

    After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...

  2. Mediocre String Problem (2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细心讲解)

    layout: post title: Mediocre String Problem (2018南京M,回文+LCP 3×3=9种做法 %%%千年好题 感谢"Grunt"大佬的细 ...

  3. poj2774(最长公共子串)

    poj2774 题意 求两个字符串的最长公共子串 分析 论文 将两个字符串合并,中间插入分隔符,在找最大的 height 值的时候保证,两个字符串后缀的起始点分别来自原来的两个字符串. code #i ...

  4. 线段树【p1115】 最大子段和

    题目描述-->p1115 最大子段和 虽然是一个普及-的题,但我敲了线段树 qwq 数组定义 \(lsum[ ]\)代表 该区间左端点开始的最大连续和. \(rsum[ ]\)代表 该区间右端点 ...

  5. 洛谷 P4538 收集邮票

    题目描述 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮票,所 ...

  6. Oracle触发器简单入门记录

    写在前面: 最近,老项目新增了日报优化的需求,丽姐让我用触发器去实现当数据插入或者更新的时候,实现对日报表数据更新操作.嗯嗯嗯呢,之前学习数据库的时候,有碰到过触发器,但都是一跳而过,也没怎么去真正的 ...

  7. Orchard EventBus 事件总线及 IEventHandler作用

    事件总线接口定义: public interface IEventBus : IDependency { IEnumerable Notify(string messageName, IDiction ...

  8. Android使用FFMpeg实现推送视频直播流到服务器

    背景 在过去的2015年中,视频直播页的新宠无疑是户外直播.随着4G网络的普及和覆盖率的提升,主播可以在户外通过手机进行直播.而观众也愿意为这种可以足不出户而观天下事的服务买单.基于这样的背景,本文主 ...

  9. mysql truncate drop delete的区别

    以下讨论,针对于mysql数据库. 为什么会想到这个问题呢? 因为项目中需要清除数据库的数据,而且需要实现自增的主键从0开始计数.所以想到总结一个几个常用的删除语法的差异. 可以做一个测试 建一个带有 ...

  10. linux 关闭ping探测

    先切换到root echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all 1代表关闭 0代表开启 用iptables iptables -I INPUT ...