CODEWITHSUNDEEP
angularjsroutesangular-ui-router
Yasir
Yasir

Reputation: 909

Angular UI Router Nested States with nested Views / Controllers

Trying to find a way to load both nested state views and controllers under a parent view and controller. I have it successfully routing, but it doesn't load the nested template or the controller.

Appreciate the help!

stateHelperProvider.state({
name: 'artist',
url: '/' + artistSlug,
abstract: true,
resolve: {
  artist: ['appArtist', function(appArtist) {
    return app.getArtist();
  }]
},
children: [
  {
    name: 'events',
    url: '/',
    templateUrl: "/templates/events/events.html",
    controller: "eventsCtrl",
    parent: 'artist'
  },
  {
    name: 'extra-info',
    url: '/extra-info',
    templateUrl: "/templates/extra-info.html",
    parent: 'artist'
  },
  {
    name: 'articles',
    url: '/articles',
    templateUrl: "/templates/articles/articles.html",
    controller: "articlesCtrl",
    parent: 'artist'
  }
]
});

Upvotes: 0

Views: 145

Answers (1)

Dinesh Ram
Dinesh Ram

Reputation: 402

You can do it as follows:

var myApp = angular.module('angularApp', ['ui-router'])

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('artist.events', {
        url: '/events',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('artist.extra-info', {
        url: '/extra_info',
        templateUrl: '/templates/extra-info.html'
    })
    .state('artist.articles', {
        url: '/articles',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});

(or)

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('events', {
        url: '/events',
        parent:'artist',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('extra-info', {
        url: '/extra_info',
        parent:'artist',
        templateUrl: '/templates/extra-info.html'
    })
    .state('articles', {
        url: '/articles',
        parent:'artist',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});

Upvotes: 1

Related Questions