4

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 Nov 12 '15 at 20:55
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

|improve this answer|||||
  • 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 Nov 13 '15 at 10:27
  • Ok got this working, needed to add url: '/' at the state level and not in the views objects. Thanks! – Julien Martelli Nov 13 '15 at 11:02
  • 1
    The plunker was not found. I also suggest an update with the url in the correct place. – Bernardo Ramos Apr 13 '17 at 20:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.