異なるcssとjsファイルを持つログインページ

私はangularjsを初めて使っていて、プロジェクトを開始したばかりです私は異なるビューを管理するためにui.routerを使用しています私はマスターページインデックスを持っています。例異なるcssとjsファイルを持つログインページ

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

すべての私の見解は、 <div ui-view=""></div> に読み込むが、私は完全に異なるCSSスタイル（ヘッド）とのjsファイルを持っているログインページ（フッタ）を持っている場合、私はそれが別のテンプレート内にロードする必要があるため、HTML例

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

私は、ネストされたUIビューでそれをやろう場合

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

私の/ログインページが別のビューを持っていますが、まだそれは私が私の/ログインページが完全に異なるヘッドを持ちたい、同じCSSやJSファイルをロードしますセクションとフッターセクション、どのように私はそれを達成するのですか？

出典

2016-06-01 Wasif Khalil

あなたがこれを行うにはしたくないのはなぜ？ –

一般的に言えば、これは推奨されるアプローチではありませんが、cssのためにこれを行うgithubプロジェクトがあります：https://github.com/manuelmazzuola/angular-ui-router-styles。これはui-routerによって直接サポートされるものではありません。

出典

2016-06-01 18:23:18

ありがとう、私はそれをするだろうが、私のテンプレートは、異なるスタイルシート –

ng-hrefを使用できます。そしてあなたのニーズに応じて、$stateChangeSuccessを聞いて、バインドされている値をng-hrefに変更する必要があります。あなたのHTMLのために

は、このような何かを：変数stylesheetを動的にスコープにバインドされ、そして必要に応じて値を変更することができます

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

。

次に、$stateChangeStartまたは$stateChangeSuccessを聞き取り、それに応じて$scope.stylesheetの値を変更することができます。ここで

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" 
     } 
    }) 
})

はplnkrです：http://plnkr.co/edit/qR7FLDAyRTkFndMQyWod?p=preview

UI-ルータのAPIの詳細を読むには：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state

出典

2016-06-01 18:51:17 CozyAzure

異なるcssとjsファイルを持つログインページ

答えて

関連する問題