通過ng-route或angular-ui-router渲染不同的佈局| Angularjs

我需要將後端細分爲儀表板佈局和登錄佈局。它必須是兩種不同的佈局。通過ng-route或angular-ui-router渲染不同的佈局| Angularjs

如何使用angular-ui-router實現這個功能？

的index.html

<body ng-controller="MainCtrl"> 
    ... 
    <div id="page-wrapper" ui-view> 
    ...

app.config(['$stateProvider', function($stateProvider){ 
    $stateProvider. 
     state('login', { 
      url: '/login', 
      templateUrl: 'assets/templates/login.html', 
      controller: 'AuthCtrl' 
     }). 
     state('/products', { 
      url: '/products', 
      templateUrl: 'assets/templates/product-list.html', 
      controller: 'ProductListCtrl' 
     }). 
     state('/categories', { 
      url: '/categories', 
      templateUrl: 'assets/templates/category-list.html', 
      controller: 'CategoryListCtrl' 
     }). 
     state('/product/add', { 
      url: '/product/add', 
      templateUrl: 'assets/templates/add-product.html', 
      controller: 'AddProductCtrl' 
     }). 
     ... 
}]);

來源

2015-05-14 Alliswell

*什麼是最好的方法*是不是一種問題要解決在這裏，我會說。有什麼不工作？ *（BEST是令人驚訝的「回答」依賴...）* –

是）我不知道如何分割到不同的佈局工作，如果兩個佈局將在同一根索引文件..） – Alliswell

*我可以給你有這樣的提示：http://stackoverflow.com/q/25667660/1679310（我想這真的很接近你的情況）或http://stackoverflow.com/q/28800644/1679310但是..它取決於關於應用程序的實際需我可以告訴你我需要改變多少次我認爲是最好的* –

我已經找到了多個layots在角here路由非常好的解決方案。

它基於內置的Angular的$ route引擎，它擴展了它在Angularjs中的高級路由。

還想補充一點，使用和閱讀非常簡單，非常直觀。

爲了更好地理解，下面是解決我的特定問題的例子。一切運作良好。

app.config(['$routeSegmentProvider', function($routeSegmentProvider){ 
    $routeSegmentProvider. 

     when('/',    'main'). 
     when('/products',  'main.products'). 
     when('/product/add', 'main.productAdd'). 
     when('/categories', 'main.categories'). 
     when('/category/add', 'main.categoryAdd'). 
     when('/login',  'login'). 

     ... 

     segment('main', { 
      templateUrl: 'assets/templates/home.html', 
      controller: 'MainCtrl'}). 

     within(). 
      segment('products', { 
       default: true, 
       templateUrl: 'assets/templates/product-list.html', 
       controller: 'ProductListCtrl'}). 
      segment('productAdd', { 
       templateUrl: 'assets/templates/add-product.html', 
       controller: 'AddProductCtrl'}). 
      segment('categories', { 
       templateUrl: 'assets/templates/category-list.html', 
       controller: 'CategoryListCtrl'}). 
      segment('categoryAdd', { 
       templateUrl: 'assets/templates/add-category.html', 
       controller: 'AddCategoryCtrl'}). 
      up(). 

     segment('login', { 
      templateUrl: 'assets/templates/login.html', 
      controller: 'MainCtrl'}); 
     ... 
}]);

來源

2015-05-15 09:32:28 Alliswell

這聽起來像是一個真正的上帝解決方案！很棒的工作 –

@RadimKöhlerheh）最好感謝這個擴展的作者） – Alliswell

通過ng-route或angular-ui-router渲染不同的佈局| Angularjs

回答

相關問題