CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Doua Beri
Doua Beri

Reputation: 10949

angularjs ui router : nested views and nested states

I'm new to angular and I'm trying to understand nested views concept. Based on the example provided in their documentation: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

//home.html
<body>
  <div ui-view="header"></div>
  <div ui-view="settings"></div>
  <div ui-view="content"></div>
</body>

I have settings.html which has a check box. If it's checked it will load in the view(not named) the advanced settings template if not it will load the basic template

//settings.html
<input type="checkbox" ng-change="change()"  ng-model="advancedSettings" />
<div ui-view></div>

so far I have defined something like this:

$stateProvider
  .state('home', {
    views: {
      'header': {},
      'settings': {
           templateUrl: 'settings.html'
       },
      'content': {},
    }
  })

since I have 2 templates basicSettings.html and advancedSettings.html that I need to load in the view from settings.html based on that checkbox, I thought I have to declare something like this:

.state('[email protected]',(){
    templateUrl: 'basicSettings.html'
});

but it's not working, instead I receive a lot of errors on console. How is the best way to implement this, without removing names from homepage views(header,settings,content), also how do I change the view based on the check box?

Thanks

Upvotes: 1

Views: 898

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

There is a working plunker

Solution here could be with states defined like this:

  $stateProvider
    .state('home', {
      abstract: true,
      url: "/home",
      views: {
        'header': {
          template: "This is HEADER"
        },
        'settings': {
          templateUrl: 'settings.html',
          controller: 'HomeCtrl',
        },
        'content': {
          template: "This is CONTENT"
        },
      }
    })
    .state('home.basic', {
      url: "/basic",
      templateUrl: 'basicSettings.html'
    })
    .state('home.advanced', {
      url: "/advanced",
      templateUrl: 'advancedSettings.html'
    })

we have parent state "home" and two children. These are triggered on change by 'HomeCtrl', e.g. like this:

.controller('HomeCtrl', ['$scope', '$state',
    function($scope, $state) {

      $scope.advancedSettings = false;

      $scope.change = function(){
        var childState = $scope.advancedSettings
          ? "home.advanced"
          : "home.basic";
        $state.go(childState);
      } 
}])

So, based on the setting, the view target "settings" and its ui-view="" (unnamed one) is filled with a child state - basic or advanced

Check it here

Upvotes: 3

Related Questions