複数のui-view AngularJS

Question

私はui-routerと一緒に作業しています。私はいくつかのビューを別のhtmlをグループ化することができます。画像のようなもの、つまりビュー1と別のビュー2です。認証？

アイデア？

私の現在のコード：、少し複雑it'sa

角度の認証がUI-ルータに実装する必要があるかどうか

<div ng-include='"views/header.html"'></div> 
<div ui-view></div> 
<div ng-include='"views/footer.html"'></div> 

Answer 1

それを表示する：

ステップ1 - 定義状態プロバイダの「認証」のような変数

angular.module('myApp') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('view1', { 
     url: '/view1', 
     templateUrl: 'app/tests/view1.html', 
     controller: 'TestsCtrl1', 
     authenticate: false 
     }); 

     $stateProvider 
     .state('view2', { 
     url: '/view2', 
     templateUrl: 'app/views/view2.html', 
     controller: 'TestsCtrl2', 
     authenticate: true 
     }); 
    }); 

ステップ2 - クライアント/ app.jsの$ stateChangeStartのメソッドを変更します。これにより、stateChangeが検出され、宛先状態 に認証済みの値があるかどうかがチェックされます。 私はアプリ

// Redirect to login if route requires auth and you're not logged in 
    $rootScope.$on('$stateChangeStart', function (event, next) { 
     Auth.isLoggedInAsync(function(loggedIn) { 
     //Check if next view (ui-state) requires authentication 
     if (next.authenticate && !loggedIn) { 
      event.preventDefault(); 
      $rootScope.lastState=next.name; 
      $state.go('login'); 
     } 
     }); 
    }); 

ステップ3の実行（）関数でそれをやった - 各ビューの異なるHTMLテンプレートを作成します。

//view1.html 

<div ng-include='"views/headerA.html"'></div> 
<div ng-include='"views/contentA.html"'></div> 
<div ng-include='"views/footerA.html"'></div> 

//view2.html 

<div ng-include='"views/headerB.html"'></div> 
<div ng-include='"views/contentB.html"'></div> 
<div ng-include='"views/footerB.html"'></div> 

はそれが役に立てば幸い