[AngularJS] 使用AngularCSS动态加载CSS

前言

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

AngularCSS

前言01

安装

本篇文章以「使用AngularAMD动态加载Service」的范例程序为基础，为其附加动态加载CSS的功能。进入本篇的开发步骤之前，开发人员可以先依照上一篇文章的步骤来建立基础架构。

动态加载Service范例：点此下载

安装01

取得基础架构之后，开启命令提示字符CD到这个基础架构的文件夹输入下列指令，就可以使用bower来取得AngularCSS套件。

bower install angular-css

安装02

完成上列步骤后，开启工作文件夹里面的bower_components文件夹，可以发现加入了angular-css这个套件。

安装03

挂载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"
    }))
;