在Angular中创建完整的单独CSS页面

问题描述：

我想创建一个AngularJS项目的登录页面。有没有一种方法可以使这个登录页面尽可能独立，尤其是对于CSS。基本上，我想为这个特定的登录页面实现一个单独的CSS，而不需要从母版页继承任何样式。在Angular中创建完整的单独CSS页面

作为此SPA角度应用程序的此登录页面的一部分，这可能吗？

不要将任何样式表链接到登录页面？ –

答

您可以删除link元素 - 并保留一个引用，以便在需要时将其放回原位。

var css = document.querySelector('link[href~="bootstrap.css"]'); 
document.removeChild(css);

或者你也可以有条件地应用CSS样式，回答here：

ng-class - 使用时设定的CSS样式是静态/事先已知的

ng-style - 当您无法定义CSS类时使用，因为样式值可能会动态更改。认为风格值的可编程控制。

ng-show和ng-hide - 使用，如果你只需要显示或隐藏着什么（修改CSS）

ng-if - 新的1.1.5版本，如果你改用了更详细的NG-开关只需要检查单个条件（修改DOM）

ng-switch - 使用的，而不是使用多个互相排斥的NG-显示（修改DOM）

ng-disabled和ng-readonly - 用于限制表单元素行为

ng-animate - 新的版本1.1.4，使用添加CSS3过渡/动画

答

如果您正在使用的用户界面路由器，您可以为所需的每个视图使用不同的主视图。

 .state('masterLogin', { 
        abstract: true, 
        url: "/master", 
        templateUrl: "/app/Commons/views/masterlogin.html", 
       }) 

    .state('masterLogin.login', { 
        url: "/login", 
        templateUrl: "/app/Modules/views/login.html", 
        data: { pageTitle: 'Forbidden' } 
       }) 

    .state('anotherMaster', { 
        abstract: true, 
        url: "/anothermaster", 
        templateUrl: "/app/Commons/views/anotherMaster.html", 
       }) 

    .state('anotherMaster.Home', { 
        url: "/Home", 
        templateUrl: "/app/Modules/views/home.html", 
        data: { pageTitle: 'Home' } 
       })

在Angular中创建完整的单独CSS页面

相关推荐