1) Include the required JavaScript libraries in your index.html (ngRoute and UI Router are optional).  引入

<script src="/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="/libs/angularjs/1.5.6/angular-routes.min.js"></script>
<script src="/libs/angular-css/angular-css.min.js"></script>

You can download AngularCSS from GitHub. Also available via Bower and CDN.

2. Add angularCSS as a dependency for your app.    配置

var myApp = angular.module('myApp', ['ngRoute','angularCSS']);

3.Examples

In Components

myApp.component('myComponent', {
css: 'my-component/my-component.css' // <--- magic!
templateUrl: 'my-component/my-component.html',
});

In Directives

myApp.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
/* Binding css to directives */
css: 'my-directive/my-directive.css'
}
});

In Controllers

myApp.controller('pageCtrl', function ($scope, $css) {

  // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
$css.bind({
href: 'my-page/my-page.css' // 该路径为文件所在路径
}, $scope); // Simply add stylesheet(s)
$css.add('my-page/my-page.css'); // Simply remove stylesheet(s)
$css.remove(['my-page/my-page.css','my-page/my-page2.css']); // Remove all stylesheets
$css.removeAll(); });

For Routes (Angular's ngRoute)

Requires ngRoute as a dependency

myApp.config(function($routeProvider) {

  $routeProvider
.when('/page1', {
templateUrl: 'page1/page1.html',
controller: 'page1Ctrl',
/* Now you can bind css to routes */
css: 'page1/page1.css'
})
.when('/page2', {
templateUrl: 'page2/page2.html',
controller: 'page2Ctrl',
/* You can also enable features like bust cache, persist and preload */
css: {
href: 'page2/page2.css',
bustCache: true
}
})
.when('/page3', {
templateUrl: 'page3/page3.html',
controller: 'page3Ctrl',
/* This is how you can include multiple stylesheets */
css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
templateUrl: 'page4/page4.html',
controller: 'page4Ctrl',
css: [
{
href: 'page4/page4.css',
persist: true
}, {
href: 'page4/page4.mobile.css',
/* Media Query support via window.matchMedia API
* This will only add the stylesheet if the breakpoint matches */
media: 'screen and (max-width : 768px)'
}, {
href: 'page4/page4.print.css',
media: 'print'
}
]
}); });

相关链接参考:

https://github.com/castillo-io/angular-css(github源码)

http://door3.com/insights/introducing-angularcss-css-demand-angularjs#.V-CKT5FJIdZ(Introducing AngularCSS: CSS On-Demand for AngularJS)

http://www.ituring.com.cn/tupubarticle/1385(第 11 章 AngularJS模块加载)

AngularCSS 的引入: CSS On-Demand for AngularJS的更多相关文章

  1. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  2. Spring MVC:在jsp中引入css

    为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...

  3. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  4. 引入CSS

    前面的话 Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制.随着Mosaic网页浏览器的出现,网站开始到处涌现.对于页面改变外观的需求增加,于是增加了类似< ...

  5. jquery,js引入css文件,js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  6. 引入css外部样式表

    前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 <link rel="stylesheet" href="style.css" /> ...

  7. 引入css ,使用@import和link的方式

    我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 linklink就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一 ...

  8. 引入CSS文件的方式,以及link与@import的区别

    一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...

  9. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  10. HTML中引入CSS的方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...

随机推荐

  1. 【2-SAT】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D. Innokenty and a Football League

    先反复地扫(不超过n次),把所有可以确定唯一取法的给确定下来. 然后对于剩下的不能确定的,跑2-SAT.输出可行解时,对于a和¬a,如果a所在的强连通分量序号在¬a之前,则取a,否则不取a.如果a和¬ ...

  2. 【线性筛】【筛法求素数】【素数判定】URAL - 2102 - Michael and Cryptography

    暴力搞肯定不行,因此我们从小到大枚举素数,用n去试除,每次除尽,如果已经超过20,肯定是no.如果当前枚举到的素数的(20-已经找到的质因子个数)次方>剩下的n,肯定也是no.再加一个关键的优化 ...

  3. Djanog|requirements.txt生成

    Django | requirement.txt 生成 pip django 1   pip 通常我们熟悉使用的都是 pip, 这个工具确实方便项目管理依赖包.当想把当前项目依赖的包的名称和版本导入指 ...

  4. @requestBody注解的使用(上)

    1.@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容,比如说:application/json或者是ap ...

  5. 《深入理解Spark-核心思想与源码分析》(三)第三章SparkContext的初始化

    3.1 SparkContext概述 SparkConf负责配置参数,主要通过ConcurrentHaspMap来维护各种Spark的配置属性. class SparkConf(loadDefault ...

  6. 使用GIT时排除NuGet的packages文件夹

    这段时间一直在用GIT做本地自己写的程序的源码管理工具,在使用的过程中发现了一个问题:Git往往会把NuGet的packages文件夹作为项目的一部分给添加进来了.网上搜了一下,原因是GIT只是和文件 ...

  7. 【摘】请问make -j8 和make -j4 是什么意思?什么作用?

    看到别人写的Shell脚本中有 make -j8 等字眼,Google了一下,网友说是: make linux kernel/rootfs时候多线程执行.

  8. WebGL的颜色渲染-渲染一张DEM(数字高程模型)

    目录 1. 具体实例 2. 解决方案 1) DEM数据.XYZ文件 2) showDEM.html 3) showDEM.js 4) 运行结果 3. 详细讲解 1) 读取文件 2) 绘制函数 3) 使 ...

  9. insert语句太长,有StringBuilder优化一下

    private void btnSave_Click(object sender, RoutedEventArgs e) { if (IsInsert) { //假设日历控件没有选日期,那帮它赋一个当 ...

  10. Spring的学习(IoC,AOP)等

    下面这个系列是非常好的例子: http://www.yiibai.com/spring/spring-3-hello-world-example.html 正在看,把一些基础夯实. IoC可以从下面一 ...