[AngularJS] 使用AngularCSS动态加载CSS

前言

上列两篇文章里，介绍了如何如何使用AngularAMD来动态加载Controller与Service。本篇文章以此为基础，介绍如何使用AngularCSS来动态加载CSS，让项目功能更加模块化，增加开发与维护的工作效率。主要为自己留个纪录，也希望能帮助到有需要的开发人员。

AngularCSS

安装

本篇文章以「使用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。

Chrome内的本地网页，使用XMLHttpRequest读取本地档案 - 昏睡领域

执行index.html之后，会系统依照路由设定进入预设的Home页面。而使用Chrome的开发者工具，可以看到系统加载了Home页面的Template、Controller、CSS，并且显示在页面上。

点击Home页面的About按钮，会切换到About页面。这时同样从Chrome的开发者工具中，可以看到系统是在点击了About按钮之后，才去加载About页面的Template、Controller、Service、CSS来显示在页面上，这也就是AngularCSS所提供的动态加载CSS功能。

范例下载

范例档案：点此下载