Ionique - Multiple de voir dans la même page

Je suis un peu un noob en Ioniques et j'ai besoin d'aide /lignes directrices de construire quelque chose qui semble facile.
Je veux avoir une page unique composé de plusieurs contenu, l'idée est d'avoir plusieurs points de vue dans la même page, chacune d'elles étant reliée à un contrôleur spécifique.

Voici mon code:

index.html contenu:

   <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>

Dans mon app.js:

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

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

Dans mon 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'
   });
 }

Modèles sont très simples:

first.html:

<div>first</div>

second.html:

<div>Second</div>

Droit maintenant, rien n'est affiché.

Ce que vous en pensez?

Merci pour votre aide!

Comment voulez-vous afficher plusieurs contenus sur une seule page? Dans les colonnes ou en lignes?
Dans les colonnes, je suppose.

OriginalL'auteur Julien Martelli | 2015-11-12

  1. 4

    Votre exigence est nommé plusieurs points de vue.
    Document suivant est utile pour mettre en œuvre de multiples points de vue dans une page unique
    https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

    Exemple de 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'
         }
       }
    });

    De travail exemple de lien: http://plnkr.co/edit/kZZ4KikwLITOxR5IGltr?p=preview

    Merci pour votre aide. Ça a l'air prometteur, mais ne fonctionne pas. Mon modèle est le contenu n'est pas injecté dans le point de vue... avez-vous une idée?
    Ok obtenu ce travail, nécessaire pour ajouter l'url: '/' au niveau de l'état et non pas dans les vues des objets. Merci!
    Le plunker n'a pas été trouvé. Je propose également une mise à jour avec l'url dans le bon endroit.

    OriginalL'auteur suneetha