Login-Seite mit verschiedenen CSS- und JS-Dateien

Ich bin neu zu angularjs und begann gerade an einem Projekt zu arbeiten Ich benutze UI.Router für die Verwaltung verschiedener Ansichten Das Problem im Blick ist, dass ich einen Masterseitenindex habe. zum Beispiel htmlLogin-Seite mit verschiedenen CSS- und JS-Dateien

<html lang="en" ng-app="leadsangularApp"> 
<head> 
    <link href="style1.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div ui-view=""></div> 
</body> 
</html>

all meine Ansichten laden in <div ui-view=""></div> aber was ist, wenn ich eine Login-Seite, die völlig verschiedene CSS-Stile (Kopf) und js-Dateien (footer) ich brauche es in anderer Vorlage zu laden hat, Beispiel

<html lang="en" ng-app="leadsangularApp"> 
<head> 
    <link href="style2.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div ui-view=""></div> 
</body> 
</html>

wenn ich versuche, es mit verschachtelter ui-Ansicht zu tun

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
      // States 
      $stateProvider 
      .state('root', { 
       abstract: true, 
       templateUrl: 'views/default.html', 
      }) 
      .state('home', { 
       parent: "root", 
       url: "/home", 
       templateUrl: 'views/main.html', 
      }) 
      .state('login', { 
       url: "/login", 
       templateUrl: 'views/login.html', 
      }); 
    });

meine/Login-Seite hat andere Sicht aber noch lädt es die gleiche CSS und JS-Dateien ich meine/Login-Seite will ganz anderen Kopf hat Abschnitt und Fußzeile, wie erreiche ich das?

Quelle

2016-06-01 Wasif Khalil

Warum wollen Sie das tun? –

Im Allgemeinen ist dies kein empfohlener Ansatz, aber es gibt ein Github-Projekt, das dies für css tut: https://github.com/manuelmazzuola/angular-ui-router-styles. Es wird nicht direkt vom ui-router unterstützt.

Quelle

2016-06-01 18:23:18

danke ich würde das nicht tun, aber meine Vorlage hat Login-Seite mit verschiedenen Stylesheets –

Sie können ng-href verwenden. Und je nach Ihren Anforderungen müssen Sie $stateChangeSuccess hören und die Werte ändern, die an ng-href gebunden sind.

Für Ihre HTML, etwas tun, wie folgt aus:

<link rel="stylesheet" ng-href="{{stylesheet}}" />

, wo die Variable stylesheet dynamisch zu Ihrem Umfang binded wird, und Werte können nach Ihren Bedürfnissen verändern.

Dann können Sie entweder $stateChangeStart oder $stateChangeSuccess hören und die $scope.stylesheet Werte entsprechend ändern. Hier

app.controller('mainCtrl', function($scope, $state) { 
    $scope.stylesheet = "style.css"; 

    $scope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams) { 

     if (toState.name === "login") { 
     $scope.stylesheet = "style2.css" 
     } else { 
     $scope.stylesheet = "style.css" 
     } 
    }) 
})

ist die plnkr: http://plnkr.co/edit/qR7FLDAyRTkFndMQyWod?p=preview

Um mehr über ui-Router-API zu lesen: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state

Quelle

2016-06-01 18:51:17 CozyAzure

Login-Seite mit verschiedenen CSS- und JS-Dateien

Antwort

Verwandte Themen