Render different layouts via ng-route or angular-ui-router | Angularjs

Question

I need to segment backend to dashboard layout and login layout. It must be two different layouts.

How I can implement this using angular-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'
        }).
        ...
}]);

*What is the best way* is not kind of question to be solved here, I'd say. Is something not working? *(BEST is surprisingly "answerer" dependent...)* — Radim Köhler, May 14 '15 at 13:00
Yes) I can't figure out how exactly is segmenting to different layouts working if both layout will be in the same root index file..) — Alliswell, May 14 '15 at 13:04
*I can give you some hints like this: http://stackoverflow.com/q/25667660/1679310 (which I guess is really close to your scenario) or that http://stackoverflow.com/q/28800644/1679310 but.. it depends on app real needs. I could tell you how many time I had to change what I thought is the best* — Radim Köhler, May 14 '15 at 13:07
@RadimKöhler, not exactly) I've found some solution that I like a little bit more :) Take a look, maybe you'll find it useful. Thanks once more for your time ;) — Alliswell, May 15 '15 at 09:34

Alliswell · Accepted Answer · 2015-05-15T09:41:21.330

I've found pretty much good solution for multiple layots routing in Angular here.

It is based on built-in Angular's $route engine, which extends it for advanced routing in Angularjs.

Also want to add that it is very simple to use and read, very intuitive.

For better understanding below is example of solving my particular issue. Everything works well.

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

@RadimKöhler heh) I'd better say thanks to the author of this extension) — Alliswell, May 15 '15 at 09:37

Render different layouts via ng-route or angular-ui-router | Angularjs

1 Answers1