在同一个应用程序中有两个不同的布局

Question

我正在将AngularJS用于商店应用程序（使用Laravel作为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属性，我单击的每个链接都显示不同的部分文件。 但是，当我单击Blog链接时，我希望它导致另一个文件，而该文件具有完全不同的布局和菜单。

我想将两者都放在同一个应用程序中，因为这两个部分的注册和登录将是相同的。 当一个用户登录商店时，如果他去了Blog部分，我仍然希望他不做任何事情就登录。

有任何想法吗？

Answer 1

如果您具有类似ui-router的结构，则您具有路由名称，因此您只需要创建具有不同布局的新路由并重定向到新路由即可。

Answer 2

好了，已经有一种使用ui-router类的适当路由器来做到这一点的方法。

例如：

您有两个主要状态，即商店和博客。 您可以做的是在app.config下的te $stateProvider配置这两个状态。

例如：

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