Search code examples
angularjsangular-ui-routerviewstateui-srefstate.go

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


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?


Solution

  • 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..