2015-05-14 2 views
1

Мне нужно сегментировать бэкэнд на макет панели и макет входа. Это должно быть два разных макета.Рендеринг различных макетов через ng-маршрут или угловой-ui-router | Angularjs

Как я могу реализовать это с помощью углового ui-router?

index.html

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

JS

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' 
     }). 
     ... 
}]); 
+1

* Что является лучшим способом * не вопрос, который нужно решить здесь, я бы сказал. Что-то не работает? * (BEST на удивление зависим от «ответчика» ...) * –

+0

Да) Я не могу понять, как именно сегментируется работа с разными макетами, если оба макета будут в одном корневом файле индекса ..) – Alliswell

+2

* Я могу дать у вас есть несколько намеков: http://stackoverflow.com/q/25667660/1679310 (что, я думаю, действительно близко к вашему сценарию) или http://stackoverflow.com/q/28800644/1679310, но .. это зависит на реальных приложениях. Я мог бы рассказать вам, сколько раз мне приходилось менять то, что я считал лучшим * –

ответ

3

Я нашел довольно много хорошее решение для нескольких layots маршрутизации в угловых here.

Он основан на встроенном двигателе $ Angular, который расширяет его для расширенной маршрутизации в 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'}); 
     ... 
}]); 
+1

Это звучит для меня как действительно божественное решение! отличная работа –

+0

@ RadimKöhler heh) Мне лучше сказать спасибо автору этого расширения) – Alliswell