Угловые Два разных макета в одном приложении

Question

Я использую AngularJS для приложения магазина (используя Laravel для back-end как API). Но теперь я хочу реализовать блог в одном приложении. Например, я нахожусь в магазине (у этого есть один макет), я нажимаю ссылку в блоге в меню и перенаправляет меня на другую страницу, которая имеет совершенно другой формат. Это возможно?

Вот мой 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 , Но когда я нажимаю на ссылку в блоге, я хочу, чтобы это привело к тому, что другой файл имел совершенно другой макет и меню.

Я хочу поставить оба в том же приложении, потому что регистр и логин будут одинаковыми для обеих частей. И когда один пользователь входит в систему в магазине, если он переходит к блогу, я все равно хочу, чтобы он вошел в систему, ничего не делая.

Любые идеи?

Answer 1

Если у вас есть структура типа ui-router, у вас есть имена маршрутов, поэтому вам просто нужно создать новый маршрут с разным макетом и перенаправить на новый маршрут.

Answer 2

Ну, уже есть способ сделать это, используя подходящий маршрутизатор, например ui-router.

Например:

У вас есть два основных состояния, магазин и блог. Что вы можете сделать, это настроить эти два состояния в te $stateProvider под номером 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'); 
});