[AngularJS] 使用AngularCSS动态加载CSS

时间:2021-12-13 14:56:51

[AngularJS] 使用AngularCSS动态加载CSS

前言

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

[AngularJS] 使用AngularCSS动态加载CSS

安装

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

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

[AngularJS] 使用AngularCSS动态加载CSS

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

bower install angular-css

[AngularJS] 使用AngularCSS动态加载CSS

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

[AngularJS] 使用AngularCSS动态加载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;
    }

[AngularJS] 使用AngularCSS动态加载CSS

执行

完成开发步骤后,就可以准备使用Chrome执行index.html来检视成果。但是在检视成果之前,必须要先参考下列数据开启Chrome的必要功能,后续就使用Chrome来正常的执行index.html。

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

[AngularJS] 使用AngularCSS动态加载CSS

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

[AngularJS] 使用AngularCSS动态加载CSS

范例下载

范例档案:点此下载