CODEWITHSUNDEEP
angularjsangular-ui-router
MayK
MayK

Reputation: 1329

What is the best way to use ui-router to load directives

I have configred my ui-routes as follows: 

$stateProvider
.state('home', {
        url: '/',
        template: '<home>',
        resolve: {
            authorize: ['authorization',
                function(authorization) {
                    return authorization.authorize();
                }
            ]
        }
    })

.state('manage', {
    url: 'manage',
    abstract: true,
    template:'<div ui-view></div>',
    resolve: {
        authorize: ['authorization',
            function(authorization) {
                return authorization.authorize();
            }
        ]
    }
})

.state('manage.map', {
    parent: 'manage',
    url: '/map',
    template: '<dummy>',
    resolve: {
        authorize: ['authorization',
            function(authorization) {
                return authorization.authorize();
            }
        ]
    }
})

in my index. html, I have a ui-view : 

<div ui-view></div>

The problem i am having is that when i type : /manage/map (or any other child route) in the browser the view is not loaded, the state is considered invalid.

The only way for it to work loading 'home' first and then with a button (ui-sref) accessing the 'manage.map' state.

In fact, when I have $urlRouterProvider.otherwise('/'); 'manage.map' is always considered invalid, and I am always redirected to '/' even when i access it with ui-sref.

So I am not sure what i am doing wrong or what is the best way to use ui-router with directives ..

Upvotes: 1

Views: 65

Answers (1)

MayK
MayK

Reputation: 1329

The problem was the missing '/' from the definition of the parent state ..

.state('manage', {
    url: '/manage',
    abstract: true,
    template:'<div ui-view></div>',
    resolve: {
        authorize: ['authorization',
            function(authorization) {
                return authorization.authorize();
            }
        ]
    }
})

Upvotes: 0

Related Questions