角度同じアプリケーション内に2つの異なるレイアウトがあります

Question

私はストアアプリにAngularJSを使用しています（APIとしてバックエンドにLaravelを使用しています）。しかし今、私は同じアプリでブログを実装したい。たとえば私は店舗にいます（これは1つのレイアウトを持っています）。メニューのBlogリンクをクリックすると、まったく違うレイアウトの別のページにリダイレクトされます。これは可能ですか？ここで

は私のindex.htmlである：ここでは

<div class="row"> 
<!-- Menu --> 
<div class="col-sm-2"> 
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="/#/"><i class="ion-ios7-pulse-strong"></i> Ugurt</a> 
    </div> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"> 
     <li ng-if="isAuthenticated()"><a href="/#/post">Post</a></li> 
     <li ng-if="isAuthenticated()"><a href="/#/blog">Blog</a></li> 
     </ul> 
     <ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right"> 
     <li><a href="/#/login">Login</a></li> 
     <li><a href="/#/signup">Sign up</a></li> 
     </ul> 
     <ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right"> 
     <li><a href="/#/logout">Logout</a></li> 
     </ul> 
    </div> 
</div> 
</div> 
<!-- Different Partial Files --> 
<div class="col-sm-10"> 
    <div ui-view></div> 
</div> 
</div> 

は私のstateProvider設定（一部）である：私は上をクリックし

angular.module('Ugurt', ['ngResource', 'ngMessages', 'ngAnimate', 'toastr', 'ui.router', 'satellizer', 'checklist-model', 'ngCart', 'textAngular']) 
.config(function($stateProvider, $urlRouterProvider, $authProvider) { 
$stateProvider 
    .state('home', { 
    url: '/', 
    controller: 'HomeCtrl', 
    templateUrl: 'partials/home.html' 
    }) 
    .state('store', { 
    url: '/store', 
    controller: 'StoreCtrl', 
    templateUrl: 'partials/store.html' 
    }) 

すべてのリンクがあるためui-view属性の異なる部分的なファイルを示してい。しかし、私がブログのリンクをクリックすると、全く違ったレイアウトやメニューの別のファイルにつなげたいと思っています。

登録とログインが両方の部分で同じになるため、両方のアプリケーションを同じアプリに入れたいと思っています。そして、1人のユーザーが店にログインしたときに、彼がブログの部分に行くと、私はまだ何もせずにログインする必要があります。

アイデア？

Answer 1

ui-routerのような構造をしている場合は、ルート名があるので、別のレイアウトの新しいルートを作成して新しいルートにリダイレクトするだけで済みます。

Answer 2

すでに、ui-routerのような適切なルータを使用して、これを行う方法があります。

例：

あなたには2つの主要な状態があります。店舗とブログです。あなたが行うことができるのは、$stateProviderの2つの状態をapp.configに設定することです。例えば

：

myApp.config(function ($stateProvider){ 

    $stateProvider.state('store', { 
     url: '/store', 
     templateUrl: 'store-layout.html' 
    }); 

    // and then, when it requires to have substate of store you must inherit this state from store state 
    // also you'll have to specify a new ui-view inside store-layout.html to be the outlet of the nested states 

    $stateProvider.state('store.categories', { 
     url: '/store/categories', 
     templateUrl: 'store-categories.html' 
    }); 

    $stateProvider.state('blog', { 
     url: '/blog', 
     templateUrl: 'blog-layout.html' 
    }); 

    $stateProvider.otherwise('/store'); 
});