AngularCSS 的引入: CSS On-Demand for AngularJS
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的更多相关文章
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- Spring MVC:在jsp中引入css
为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...
- html引入css文件
在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...
- 引入CSS
前面的话 Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制.随着Mosaic网页浏览器的出现,网站开始到处涌现.对于页面改变外观的需求增加,于是增加了类似< ...
- jquery,js引入css文件,js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- 引入css外部样式表
前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 <link rel="stylesheet" href="style.css" /> ...
- 引入css ,使用@import和link的方式
我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 linklink就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一 ...
- 引入CSS文件的方式,以及link与@import的区别
一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
随机推荐
- 【数论】【快速幂】CODEVS 2952 细胞分裂 2
裸快速幂取模,背诵模板用. #include<cstdio> using namespace std; typedef long long LL; LL n=,m,q; LL Quick_ ...
- 设置MySQL数据库名不区分大小写
Linux下的MySQL默认是区分表名大小写的,通过如下设置,可以让MySQL不区分表名大小写: 1.用root登录,修改 /etc/my.cnf: 2.在[mysqld]节点下,加入一行: lowe ...
- delphi杀进程的两种方式
delphi杀进程的两种方式 uint unit Tlhelp32; 第一种:比较简单,根据标题,找到窗口,再找到进程,杀死进程 procedure KillProgram(WindowTitle : ...
- ubi层次
转:http://www.360doc.com/content/11/0518/13/496343_117643185.shtml UBI是什么? 它是一种flash管理方式 flash是一系列连续的 ...
- Debian6 安装Kscope(也适用于Ubuntu)
参考:http://soft.chinabyte.com/os/134/12307634.shtml kscope1.6.2在这里下载,下载后解压出kscope-1.6.2.tar.gz. 在ubun ...
- 我们知道写入过程比ZooKeeper集合中的读取过程要贵,因为所有节点都需要在数据库中写入相同的数据。因此,对于平衡的环境拥有较少数量(例如3,5,7)的节点比拥有大量的节点要好。
我们知道写入过程比ZooKeeper集合中的读取过程要贵,因为所有节点都需要在数据库中写入相同的数据.因此,对于平衡的环境拥有较少数量(例如3,5,7)的节点比拥有大量的节点要好. 组件 描述 写入( ...
- Redis设置使用几号库
Redis中SpringBoot项目中的配置: 1.引入 spring-boot-starter-redis(POM.XML) <dependency> <groupId>or ...
- Thunderbird使用发邮件模板
Thunderbird的强大之处是可以使用多种第三方插件,其中有个插件SmartTemplate4,是用来设置Thunderbird发件模板的. 然后,模板设置内容如下: <p>:< ...
- 13、mha高可用架构搭建
各节点架构: 192.168.1.20(mysql5.5) master主库 192.168.1.21(mysql5.5) slave1,目标:主库宕可提升为主库 192.168.1.22(mysql ...
- react使用引入svg的icon;svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...