首页 开发教程 正文
我要发布

angular css

开发教程
2025-12-07 0 650

Angularcss

CSS点播AngularJS

通过需要动态注入样式表，优化单页应用程序的演示层。

AngularCSS聆听路由（或状态）更改事件，添加了当前路由上定义的CSS，并从以前的路由中删除CSS。它还以与编译和范围销毁事件相同的方式与指令一起使用。有关更多详细信息，请参见下面的代码样本。

阅读文章

引入AngularCS：AngularJS的CSS点播

演示

Angular的Ngroute演示（来源）

UI路由器演示（来源）

快速开始

使用Bower或JSPM安装和管理。 CDNJS.COM也提供了CDN 

$ bower install angular-css
$ jspm install github:castillo-io/angular-css
  1. 在您的index.html中包括所需的JavaScript库（ngroute和UI路由器是可选的）。 
 < 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 >
  1. 将angularCSS添加为您的应用程序的依赖性。 
 var myApp = angular . module ( \'myApp\' , [ \'ngRoute\' , \'angularCSS\' ] ) ;

注意：模块名称“ door3.css”现在已弃用。

例子

该模块可以通过在路由值，指令中添加CSS属性或调用控制器和服务的$css服务方法来使用该模块。

CSS属性支持一个字符串，一系列字符串，对象符号或对象数组。

有关更多信息，请参见下面的示例。

在组件中

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

在指令中

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

在控制器中

 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 ( ) ;

} ) ;

对于路线（Angular的Ngroute）

需要ngroute作为依赖关系

 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\'
        }
      ]
    } ) ;

} ) ;

对于州（UI路由器）

需要ui.Router作为依赖关系

 myApp . config ( function ( $stateProvider ) {

  $stateProvider
    . state ( \'page1\' , {
      url : \'/page1\' ,
      templateUrl : \'page1/page1.html\' ,
      css : \'page1/page1.css\'
    } )
    . state ( \'page2\' , {
      url : \'/page2\' ,
      templateUrl : \'page2/page2.html\' ,
      css : {
        href : \'page2/page2.css\' ,
        preload : true ,
        persist : true
      }
    } )
    . state ( \'page3\' , {
      url : \'/page3\' ,
      templateUrl : \'page3/page3.html\' ,
      css : [ \'page3/page3.css\' , \'page3/page3-2.css\' ] ,
      views : {
        \'state1\' : {
          templateUrl : \'page3/states/page3-state1.html\' ,
          css : \'page3/states/page3-state1.css\'
        } ,
        \'state2\' : {
          templateUrl : \'page3/states/page3-state2.html\' ,
          css : [ \'page3/states/page3-state2.css\' ]
        } ,
        \'state3\' : {
          templateUrl : \'page3/states/page3-state3.html\' ,
          css : {
            href : \'page3/states/page3-state3.css\'
          }
        }
      }
    } )
    . state ( \'page4\' , {
      url : \'/page4\' ,
      templateUrl : \'page4/page4.html\' ,
      views : {
        \'state1\' : {
          templateUrl : \'states/page4/page4-state1.html\' ,
          css : \'states/page4/page4-state1.css\'
        } ,
        \'state2\' : {
          templateUrl : \'states/page4/page4-state2.html\' ,
          css : [ \'states/page4/page4-state2.css\' ]
        } ,
        \'state3\' : {
          templateUrl : \'states/page4/page4-state3.html\' ,
          css : {
            href : \'states/page4/page4-state3.css\'
          }
        }
      } ,
      css : [
        {
          href : \'page4/page4.css\' ,
        } , {
          href : \'page4/page4.mobile.css\' ,
          media : \'screen and (max-width : 768px)\'
        } , {
          href : \'page4/page4.print.css\' ,
          media : \'print\'
        }
      ]
    } ) ;

} ) ;

响应式设计

AngularCSS支持“智能媒体查询”。这意味着只有在断点匹配时，才会添加带有媒体查询的样式表。这将大大优化应用程序的负载时间。 

 $routeProvider
  . when ( \'/my-page\' , {
    templateUrl : \'my-page/my-page.html\' ,
    css : [
      {
        href : \'my-page/my-page.mobile.css\' ,
        media : \'(max-width: 480px)\'
      } , {
        href : \'my-page/my-page.tablet.css\' ,
        media : \'(min-width: 768px) and (max-width: 1024px)\'
      } , {
        href : \'my-page/my-page.desktop.css\' ,
        media : \'(min-width: 1224px)\'
      }
    ]
  } ) ;

即使您可以使用media属性来指定媒体查询，但管理断点的最佳方法是通过在提供商的默认设置中进行设置。例如： 

 myApp . config ( function ( $routeProvider , $cssProvider ) {

  angular . extend ( $cssProvider . defaults , {
    breakpoints : {
      mobile : \'(max-width: 480px)\' ,
      tablet : \'(min-width: 768px) and (max-width: 1024px)\' ,
      desktop : \'(min-width: 1224px)\'
    }
  } ) ;

  $routeProvider
    . when ( \'/my-page\' , {
      templateUrl : \'my-page/my-page.html\' ,
      css : [
        {
          href : \'my-page/my-page.mobile.css\' ,
          breakpoint : \'mobile\'
        } , {
          href : \'my-page/my-page.tablet.css\' ,
          breakpoint : \'tablet\'
        } , {
          href : \'my-page/my-page.desktop.css\' ,
          breakpoint : \'desktop\'
        }
      ]
    } ) ;

} ) ;

config

您可以在全局或样式表级别配置AngularCS。

配置全局选项

这些选项是在应用程序的config阶段或通过$cssProvider应用的。 

 myApp . config ( function ( $cssProvider ) {

  angular . extend ( $cssProvider . defaults , {
    container : \'head\' ,
    method : \'append\' ,
    persist : false ,
    preload : false ,
    bustCache : false
  } ) ;

} ) ;

配置CSS选项

这些选项应用于样式表级别。 

css: {
  href : \'file-path.css\' ,
  rel : \'stylesheet\' ,
  type : \'text/css\' ,
  media : false ,
  persist : false ,
  preload : false ,
  bustCache : false ,
  weight : 0
}

支持

AngularCSS完全由AngularJS> = V1.3 && <= V1.5支持

对AngularJS 1.2有部分支持。它不通过DDO（指示定义对象）支持css属性。解决方法是通过$css服务在指令的控制器或链接功能中绑定（或添加）CSS。 

 myApp . directive ( \'myDirective\' , function ( ) {
  return {
    restrict : \'E\' ,
    templateUrl : \'my-directive/my-directive.html\' ,
    controller : function ( $scope , $css ) {
      $css . bind ( \'my-directive/my-directive.css\' , $scope ) ;
    }
  }
} ) ;

角2

我可以在Angular 2中使用AngularCS吗？

在Angular 2中不需要AngularCSS！ Angular 2船具有类似的功能。它被称为styles和styleUrls ，看起来像这样： 

@ Component ( {
  selector : \'my-component\' ,
  templateUrl : \'app/components/my-component/my-component.html\' ,
  styleUrls : [ \'app/components/my-component/my-component.css\' ] ,
} )

浏览器

Chrome，Firefox，Safari，Ios Safari，Android和IE9+

IE9不支持MatchMedia API。这意味着在IE9中，将添加带有媒体查询的样式表，而无需检查断点是否匹配。

贡献

请提交所有拉动请求，反对主分支。如果您的拉请求包含JavaScript补丁或功能，则应包括相关的单元测试。

版权和许可

 The MIT License

Copyright (c) 2017 Alex Castillo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the \"Software\"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

下载源码

通过命令行克隆项目:

git clone https://github.com/castillo-io/angular-css.git

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 开发教程 angular css https://www.zuozi.net/31816.html

naruto
上一篇： naruto
poser
下一篇： poser
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的