[AngularJS] 使用AngularCSS动态加载CSS

前言

• 使用AngularAMD动态加载Controller
• 使用AngularAMD动态加载Service

上列两篇文章里，介绍了如何如何使用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功能。

范例下载

范例档案：点此下载