CODEWITHSUNDEEP
angularjsuiviewangular-ui-router
Fábio Carvalho
Fábio Carvalho

Reputation: 103

Try to render two templates in same View (Ui-Router)

I'm trying to render two templates at the same time in same View using two differents ui-view. I'm probably missing something but I don't know what. Can I get some help ?

My App.js

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider) {

  //$urlRouterProvider.otherwise('/home');

  var People = {
    name: 'People',
    url: '/People',
    views: {
      'PeopleView': {
        templateUrl: 'People.html'
      }
    }

  }

  var Company = {
    name: 'Company',
    url: '/Company',
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      }
    }
  }

  $stateProvider.state(People);
  $stateProvider.state(Company);
});

HTML

<div class="container">
  <fieldset>
    <div class="row">
      <legend>Content</legend>
      <div ui-view="PeopleView" class="col col-md-4"></div>
      <div ui-view="CompanyView" class="col col-md-4"></div>
    </div>
  </fieldset>
</div>

Full Code

Upvotes: 0

Views: 89

Answers (1)

Fyodor
Fyodor

Reputation: 285

I'm not quite sure what you need to achieve, but I guess that you should put both your views into the same state and work on within it

$stateProvider.state('mainState', {
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      },
      'PeopleView': {
        templateUrl: 'People.html'
      }
    }
})

I've edited your plunk to illustrate what I mean - http://plnkr.co/edit/V0lF78MZhrOnwXF7F6Ih?p=preview

Upvotes: 1

Related Questions