AngularCSS 的引入： CSS On-Demand for AngularJS

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘
        }
      ]
    });

});