Angularjs: How to use $state.go() for redirect on views of the same state?

Question

On the $stateProvider of my app, I define all of the app's states:

+ function () {
"use strict";

function cataneiConfig($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller: 'loginCtrl as $ctrl'
        })
        .state('layout', {
            url: '/layout',
            views:{
                '':{//Default layout
                    templateUrl: 'views/layout.html',
                    controller: 'layoutCtrl as $ctrl'
                },
                'list@layout':{
                    templateUrl: 'views/list.html',
                    controller: 'listPersonaCtrl as $ctrl'
                },
                'form@layout': {
                    templateUrl: 'views/form.html',
                    controller:'createPersonaCtrl as $ctrl'
                },
                'edit@layout':{
                    params: { obj: null },
                    templateUrl: 'views/edit.html',
                    controller:'editPersonaCtrl as $ctrl'
                }
            },
        })   
        .state('error', {
            url: '/error',
            templateUrl: 'views/error.html'
        });
    $urlRouterProvider.otherwise('login');
}
cataneiConfig.$inject = [
    "$stateProvider",
    "$urlRouterProvider",
    "$httpProvider",
];
angular
    .module("appTareas")
    .config(cataneiConfig);
}();

From login controller ===> $state.go('layout') works and redirects to layout.html....as expected.

From layout.html ===> <ui-view ='list'/> properly displays list.html within the layout state.

From list controller ===> $state.go('form') or $state.go('edit'), does not work. In list.html <a ui-sref='form'/> doesn't work.

How can I redirect between the different views & their controllers?

I'm assuming you have already looked through this, but if not, [here is a sample app doing what you are trying to achieve](https://ui-router.github.io/resources/sampleapp/) — Tyler, May 01 '18 at 22:14
@Tyler Yes, but they used different logic. They use advanced components and i only need a simple way in the $stateProvider and the use of $state if is possible — Dr oscar, May 01 '18 at 22:30

score 0 · Answer 1 · answered May 01 '18 at 22:55

You can't do $state.go('form') because you didn't define that state in the $stateProvider

If you want to navigate between states you'll have to break it out like so:

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller: 'loginCtrl as $ctrl'
        })
        .state('layout', {
            url: '/layout',
            views:{
                '':{//Default layout
                    templateUrl: 'views/layout.html',
                    controller: 'layoutCtrl as $ctrl'
                },
                'list@layout':{
                    templateUrl: 'views/list.html',
                    controller: 'listPersonaCtrl as $ctrl'
                },
                'edit@layout':{
                    params: { obj: null },
                    templateUrl: 'views/edit.html',
                    controller:'editPersonaCtrl as $ctrl'
                }
            },
        })
        .state('form', {
            url: '/form',
            templateUrl: 'views/form.html',
            controller: 'createPersonaCtrl as $ctrl'
        })  
        .state('error', {
            url: '/error',
            templateUrl: 'views/error.html'
        });

The situation is that i need conserve layout, but when in list controller or list.html redirect to form, i need layout.html display form.html... of this way is like redirect inside layout.html but calling states from his views — Dr oscar, May 01 '18 at 23:03

score 0 · Accepted Answer · answered May 02 '18 at 01:01

Finally i see isn't necessary use views in my case. I can use layout with another states using parents por display and direct:

$stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'views/login.html',
                controller: 'loginCtrl as $ctrl'
            })
            .state('layout', {
                url: '/',
                templateUrl: 'views/layout.html',
                controller: 'layoutCtrl as $ctrl'
            })
            .state('layout.list', {
                url: '/list',
                templateUrl: 'views/list.html',
                controller: 'listPersonaCtrl as $ctrl'
            })
            .state('layout.form', {
                url: '/form',
                templateUrl: 'views/form.html',
                controller: 'formPersonaCtrl as $ctrl'
            })
            .state('error', {
                url: '/error',
                templateUrl: 'views/error.html'
            });
        $urlRouterProvider.otherwise('login');
    }

And in layout.html only apply: <ui-view></ui-view>. When need refer another state from layout: $state.go('layout.form') for example..

Just a FYI for future questions. I could have saved you two hours if you included the html so that I realized you needed the parent property. — BShaps, May 02 '18 at 17:23

Angularjs: How to use $state.go() for redirect on views of the same state?

2 Answers2