CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerstate-management
Leon Gaban
Leon Gaban

Reputation: 39018

Named view $states not rendering templates

https://plnkr.co/edit/9mFkN7oScYkKpPC0l57i?p=preview

Expected

After clicking Login and navigating to the container state. The named views dashboard and feed should render their templates.

Results

The templates for dashboard and feed do not render, nor to the logs in their controllers log.

The routerApp with login state

With the container module injected.

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', ['ui.router', 'container']);

tickersApp.config(function($stateProvider, $urlRouterProvider) {
    
  $urlRouterProvider.otherwise('/login');

  const login = {
    name: 'login',
    url: '/login',
    templateUrl: 'login-template.html',
    bindToController: true,
    controllerAs: 'l',
    controller: function($state) {
      this.login = function() {
        $state.go('container', { });
      }
    }
  }

  $stateProvider
    .state(login);
})

The container module/config and view states

Below I have the default view for container with it's template and controller, as well as 2 other named views dashboard and feed. However after clicking the Login and going to container state, none of the named views render in the markup.

// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {
    const container = {
      name: 'container',
      url: '/container',
      views: {
        '': {
          templateUrl: 'container-template.html',
          controller: function($scope) {
            console.log('CONTAINER view $state');
          }
        },
        'dashboard': {
          templateUrl: 'dashboard-template.html',
          controller: function($scope) {
            console.log('DASHBOARD view $state');
          }
        },
        'feed': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED view $state');
          }
        }
      }
    }
    $stateProvider.state(container);
  });

Finally the container-template.html

Below you can see both named views dashboard and feed, however their templates & controllers do not render/init.

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <section>
        <!--<dashboard-module></dashboard-module>-->
        <div ui-view="dashboard"></div>
      </section>
    </div>
    
    <div class="col-sm-4">
      <section>
        <!--<feed-module></feed-module>-->
        <div ui-view="feed"></div>
      </section>
    </div>
  </div>
</div>

Upvotes: 0

Views: 40

Answers (1)

Leon Gaban
Leon Gaban

Reputation: 39018

Still hoping for an answer as to why the named views above don't render. However I was able to get the templates for dasboard and feed to render by using absolutely named views:

https://plnkr.co/edit/XnDUIqfVuBS2Hr2N1ooy?p=preview

enter image description here

const container = {
  name: 'container',
  url: '/container',
  views: {
    '': {
      templateUrl: 'container-template.html',
      controller: function($scope) {
        console.log('CONTAINER view $state');
      }
    },
    'dashboard@container': {
      templateUrl: 'dashboard-template.html',
      controller: function($scope) {
        console.log('DASHBOARD view $state');
      }
    },
    'feed@container': {
      templateUrl: 'feed-template.html',
      controller: function($scope) {
        console.log('FEED view $state');
      }
    }
  }
}

$stateProvider.state(container);

And in the markup:

<div class="row">
  <div class="col-sm-8">
    <section>
      <div ui-view="dashboard"></div>
    </section>
  </div>

  <div class="col-sm-4">
    <section>
      <div ui-view="feed"></div>
    </section>
  </div>
</div>

Upvotes: 0

Related Questions