首页 > 代码库 > AngularCSS 的引入： CSS On-Demand for AngularJS

AngularCSS 的引入： CSS On-Demand for AngularJS

2024-08-14 00:54:28   219人阅读

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

<script src=http://www.mamicode.com/"/libs/angularjs/1.5.6/angular.min.js"></script><script src=http://www.mamicode.com/"/libs/angularjs/1.5.6/angular-routes.min.js"></script><script src=http://www.mamicode.com/"/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






























        

            
                
                  
                
                

                    联系

                    我们