通过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

回答

相关问题