在Angular中創建完整的單獨CSS頁面

Question

我想創建一個AngularJS項目的登錄頁面。有沒有一種方法可以使這個登錄頁面儘可能獨立，尤其是對於CSS。基本上，我想爲這個特定的登錄頁面實現一個單獨的CSS，而不需要從母版頁繼承任何樣式。

作爲此SPA角度應用程序的此登錄頁面的一部分，這可能嗎？

Answer 1

您可以刪除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過渡/動畫

Answer 2

如果您正在使用的用戶界面路由器，您可以爲所需的每個視圖使用不同的主視圖。

 .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' } 
       })