Ionic - Multiple view in same page

Question

I am kind of a noob in Ionic and I need help / guidelines to build something that sounds easy. I want to have a single page composed of multiple content, the idea is to have multiple views in the same page each of them being linked to a specific controller.

Here is my code:

index.html content:

   <ion-pane>
     <ion-nav-view></ion-nav-view>

     <ion-view ng-controller="FirstController">
       <ion-content>
       </ion-content>
     </ion-view>

     <ion-view ng-controller="ScdController">
       <ion-content>
       </ion-content>
     </ion-view>
  </ion-pane>

In my app.js:

 angular.module('app', [])
 .controller('FirstController', function($scope) {
 })

 .controller('ScdController', function($scope) {
 });

In my config.routes.js:

angular.module('app')
.config(configure);

function configure($stateProvider){
  $stateProvider
    .state('first', {
      url: '/',
      templateUrl: 'templates/first.html',
      controller: 'FirstController'
    })
   .state('second', {
      url: '/',
      templateUrl: 'templates/second.html',
      controller: 'ScdController'
   });
 }

Templates are very simple:

first.html:

<div>first</div>

second.html:

<div>Second</div>

Right now nothing is displayed.

What do you guys think?

Thanks for your help!

How do you want to show multiple contents on a single page? In columns or in rows? — denden130
– denden130, Commented Nov 12, 2015 at 20:55

suneetha · Accepted Answer · 2015-11-13 11:38:55Z

4

Your requirement is multiple named views. Following document is useful to implement multiple views in a single page https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Example code:

HTML:

<ion-view title="">
   <ion-content scroll="true">
     <div ui-view="first"></div>
     <div ui-view="second"></div>
   </ion-content>
</ion-view>

JS:

angular.module('app')
 .config(function($stateProvider) {
   $stateProvider
    .state({
       name : 'multiple-views'
       views: {
        'first': {
           url: '/',
           templateUrl: 'templates/first.html',
           controller: 'FirstController'
         },
        'second': {
           url: '/',
           templateUrl: 'templates/second.html',
           controller: 'ScdController'
         }
       }
    });

Working example link: http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview

edited Nov 13, 2015 at 11:38

answered Nov 13, 2015 at 9:43

suneetha

8171 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Julien Martelli Over a year ago

Thanks for your help. This looks promising but does not work. My template's content is not injected in the views... Do you have an idea?

Julien Martelli Over a year ago

Ok got this working, needed to add url: '/' at the state level and not in the views objects. Thanks!

Bernardo Ramos Over a year ago

The plunker was not found. I also suggest an update with the url in the correct place.

Collectives™ on Stack Overflow

Ionic - Multiple view in same page

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related