Angular在同一個應用程序中的兩個不同的佈局

我使用AngularJS作爲商店應用程序（使用Laravel作爲API的後端）。但現在我想在同一個應用上實現一個博客。例如，我在商店（這有一個佈局），我點擊菜單中的博客鏈接，它將我重定向到另一個具有完全不同佈局的頁面。這可能嗎？Angular在同一個應用程序中的兩個不同的佈局

這裏是我的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屬性的不同部分文件。但是當我點擊博客鏈接時，我想讓它導致一個完全不同的佈局和菜單的不同文件。

我想把兩者都放在同一個應用程序中，因爲這兩個部分的註冊和登錄都是相同的。當一個用戶在商店中登錄時，如果他轉到博客部分，我仍然希望他不用做任何事情就可以登錄。

任何想法？

來源

2016-10-07 Adam Silva

是的，它是可以做到的。您必須配置路由器以像這樣工作。你有沒有'$ stateProvider'配置？ –

是的，我編輯了我的問題。 –

看看我的回答，讓我知道它是否對你有幫助。 –

如果你有類似於ui路由器的結構，你有路由名稱，所以你只需要創建具有不同佈局的新路由並重定向到新路由。

來源

2016-10-07 16:23:28

那麼有一種方法可以做到這一點，使用像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'); 
});

來源

2016-10-07 16:40:30

Angular在同一個應用程序中的兩個不同的佈局

回答

相關問題