Create page with complete separate CSS in Angular

Question

I want to create a login page for an AngularJS project. Is there a way that I can make this login page as independent as possible, especially for CSS. Basically, I want to implement a separate CSS for this specific login page without inherit any style from master page.

As this login page part of this SPA angular application, is this possible?

don't link any stylesheets to the login page? – Aleksei Maide Feb 15 '17 at 20:54 — Aleksei Maide, Feb 15 '17 at 20:54

score 0 · Answer 1 · edited May 23 '17 at 12:24

You could just remove the link element - and keep a reference to put it back in place if need be.

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

Or you can conditionally apply css styles as answered here:

ng-class - use when the set of CSS styles is static/known ahead of time

ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.

ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)

ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)

ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)

ng-disabled and ng-readonly - use to restrict form element behavior

ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

score 0 · Answer 2 · answered Feb 15 '17 at 21:26

If you are using ui-router, you can use diferent master views for every view that you want.

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

Create page with complete separate CSS in Angular

2 Answers2