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属性，我点击的每个链接都会显示不同的部分文件。但是，当我点击博客链接时，我希望它导致一个完全不同的布局和菜单的不同文件。

我想把两者放在同一个应用程序中，因为两个部分的注册和登录都是一样的。当一个用户登录到商店时，如果他进入博客部分，我仍然希望他在没有做任何事情的情况下登录。

有什么想法吗？

Answer 1

如果你有类似ui-router的结构，你有路由名，所以你只需要创建不同布局的新路由并重定向到新路由。

Answer 2

使用像ui-router这样的合适路由器已经有办法做到这一点。

例如：

您有两个主要状态，商店和博客。您可以做的是在$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');
});

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

2 个答案: