Nested template routes in ui.router

Question

(AngularJS v1.2.28 - angular-ui-router v0.2.13 In my index.html I have the following: <div class="wrapper" ui-view></div>

In my app.js I have my stateProvider set up as:

$urlRouterProvider.otherwise('/app/search');
    $stateProvider.state("app", {
        url: '/home',
        controller: 'MainCtrl',
        templateUrl: 'views/main.html'
    }).state('app.search', {

            resolve: {
                categories: function ($q, $stateParams, LiveOak) {

                    var deferred = $q.defer();
                    LiveOak.readMembers('/liveoak/storage/categories', {
                        success: function (categories) {
                            deferred.resolve(categories);
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                    return deferred.promise;
                }
            },
            url: '/search',
            templateUrl: 'views/search.html',
            controller: 'SearchCtrl'
        }
    ).state('app.subjects', {
            url: '/subjects/:id',
            abstract:true,
            templateUrl: '<ui-view/>'
        }
    ).state('app.subjects.default', {
            resolve: {
                subjects: function ($q, $stateParams, LiveOak) {

                    var deferred = $q.defer();
                    var categoryId = $stateParams.id;
                    var query = {
                        categoryId : categoryId
                    };
                    LiveOak.readMembers('/liveoak/storage/subjects', {
                        query: query,
                        success: function (subjects) {
                            console.log("subjects resolved")
                            deferred.resolve(subjects);
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                    return deferred.promise;
                },
                instructors: function ($q, $stateParams, LiveOak) {

                }
            },
            url: '',
            templateUrl: 'views/subject.html',
            controller: 'SubjectCtrl'
        }).state('app.subjects.authors', { //THIS IS NOT RECOGNIZED
            resolve: {
                authors: function ($q, $stateParams, LiveOak) {
                    var deferred = $q.defer();
                    var subjectId = $stateParams.id;
                    var query = {
                        query.subjectId : subjectId
                    };
                    LiveOak.readMembers('/liveoak/storage/authors', {
                            query: query,
                            success: function (authors) {
                                deferred.resolve(authors);
                            },
                            error: function (error) {
                                console.error(error);
                            }
                        }
                    );
                    return deferred.promise;
                }
            },
            url: '/subjects/:id/authors/',
            templateUrl: '../views/subjects.authors.html',
            controller: 'AuthorsCtrl'
        }
    );
}]);

I am wrestling with the state: app.subjects.authors. Right now app.search and app.subjects work. However, when I try to go the the state: app.subjects.authors it is not even recognized. I set up up a state app.subject as abstract, so hopefully app.subjects.authors wouldn't be overridden by app.subjects. Anyone see anything out of the ordinary? Thanks for the help!!

My subject.html looks like this:

        <div ng-repeat="subject in subjects" class="mdl-cell mdl-cell--4-col">
                <a href="#/app/subjects/{{subject.categoryId}}/authors">
                        <span>{{subject.name}}</span>

                </a>
         </div>

score 0 · Answer 1 · answered Jul 17 '15 at 19:44

0

Just change templateUrl: to template:. You don't need abstract:.

.state('app.subjects', {
  url: '/subjects/:id',
  template: '<ui-view/>'
})

answered Jul 17 '15 at 19:44

Daniel Cottone

4,257
24
39

Thanks Daniel, but now the subjects view is not render. It just goes to the url. – user1026498 Jul 17 '15 at 19:50

karaxuna · Answer 2 · 2015-07-17T19:56:03.327

0

You shall have:

url: '/authors',

Instead of:

url: '/subjects/:id/authors/',

Because url is relative. So the url of child state is continuation of parent state's url. So authors state will match following url:

/home/subjects/:id/authors

edited Jul 17 '15 at 19:56

answered Jul 17 '15 at 19:52

karaxuna

26,752
13
82
117

I didn't have just/authors because. the end goal is have the subjects and authors render on the same page. So, I could have /subjects/:id/authors/:authorId . I keep the url with two ids so i could use them in the queries. – user1026498 Jul 17 '15 at 19:54

Nested template routes in ui.router

2 Answers2