CODEWITHSUNDEEP
angularjsangular-ui-router
Jente Rosseel
Jente Rosseel

Reputation: 1205

AngularJS ui-router with different URL parameters

While using ui-view in AngularJS, I'm trying to use URL parameters inside of nested views.

For entities of a given type, I want to be able to show all of the entities when navigating to the url /entities, but I would also like to see only the entities of a given type if I go to entities/ofcategory/categoryName. Lastly, I also want to be able to navigate to /entities/details/entityName to see the details of one entity.

Is this structure possible?

This is my ui-routercode:

app.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
        .state('entities', {
            url: '/entities',
            templateUrl: 'app/entities/views/entities.html'

        })
       .state('entities.ofcategory', {
            url: '/ofcategory/:categoryName',
            templateUrl: 'app/entities/views/entities.ofcategory.html'          
        }
        .state('entities.details', {
            url: '/details/:entityName',
            templateUrl: 'app/entities/views/entities.details.html'         
        });
}]);

If I'm navigating to entities/ofcategory/aname or /entities/details/aname I enter the regular entities controller instead of the category or detailsController

Upvotes: 0

Views: 160

Answers (1)

boyomarinov
boyomarinov

Reputation: 615

One option is to add an abstract state, which serves as a parent to all your entities states. In that case all your urls become relative to this parent state. Please note that you have to define a ui-view in the template of the abstract state, so it could be used for loading the child templates.

app.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
        .state('entities', {
            url: '/entities',
            abstract: true,
            templateUrl: 'app/entities/views/entities.html'
        })
        .state('entities.all', {
            url: '/',
            templateUrl: 'app/entities/views/entities.all.html'
        })
        .state('entities.ofcategory', {
            url: '/:categoryName',
            templateUrl: 'app/entities/views/entities.ofcategory.html'          
        }
        .state('entities.details', {
            url: '/details/:entityName',
            templateUrl: 'app/entities/views/entities.details.html'         
        });
}]);

app/entities/views/entities.html:

<div>
   <h1>Entities<h1>
   <div ui-view></div>
</div>

Upvotes: 1

Related Questions