angularjs - framework - run project ionic



Création de vues en dehors des onglets ioniques sur Ionic Framework (1)

Je suis nouveau à Ionic mais ça faisait longtemps que je voulais l'essayer. Je joue juste autour donc peut-être que je ne reçois pas le concept complet.

J'essaie de faire une application simple avec trois onglets en bas et une icône de paramètres qui sera là pour les trois onglets. Lorsque vous cliquez sur cette icône, supposément les onglets devraient cacher et afficher l'écran des paramètres.

Comme je ne veux pas que l'utilisateur perde du contenu, toutes les vues héritent d'un contenu global:

angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
      .state('app', {
        url: "/app",
        abstract: true,
        controller: 'AppController',
        templateUrl: "ui/modules/tabs/view.html"
      })
      .state('app.compose-text', {
        url: '/text',
        views: {
          'compose-text': {
            templateUrl: 'ui/modules/text-composer/view.html'
          }
        }
      })
      .state('app.compose-draw', {
        url: '/draw',
        views: {
          'compose-draw': {
            templateUrl: 'ui/modules/draw-composer/view.html'
          }
        }
      })
      .state('app.compose-photo', {
        url: '/photo',
        views: {
          'compose-photo': {
            templateUrl: 'ui/modules/photo-composer/view.html'
          }
        }
      })
      .state('app.settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/text');
});

angular.module('app').run(function($rootScope) {
});

Ensuite, les tabs/view ressemble à ceci:

<ion-nav-view name="settings"></ion-nav-view>

<ion-tabs class="tabs-assertive tabs-icon-only">
  <ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text">
    <ion-nav-view name="compose-text"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw">
    <ion-nav-view name="compose-draw"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo">
    <ion-nav-view name="compose-photo"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Et l'un des points de vue:

<ion-view title="Example" class="slide-left-right">
  <ion-nav-buttons side="left">
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
  </ion-nav-buttons>
  <ion-content padding="true">
    <h1>Text</h1>
  </ion-content>
</ion-view>

La première chose que je me demande est: est-il possible de réutiliser ces boutons entre toutes les vues? Semble inutile de continuer à les définir encore et encore.

Mais ce n'est pas la vraie chose ™. Lorsque je clique sur Paramètres, quelque chose est injecté dans la vue ion-nav-view mais il contient beaucoup de choses (qui ne sont pas sur le modèle) et aussi, il ne cache pas l'autre vue ni les onglets.

Quelques captures d'écran:

http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png

Quelle devrait être la bonne approche pour cela?


C'est la première fois que je réponds à une question, alors s'il vous plaît, supportez-moi.

Pour accéder à une vue sans la barre d'onglets: supprimez le préfixe "app" de l'état des paramètres, afin qu'il ne soit plus un enfant de l'état abstrait parent (app).

.state('settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      }); 

** Si vous ajoutez des états après celui-ci, assurez-vous de supprimer le point-virgule, tandis que le point-virgule indique la fin.

C'EST UNE SOLUTION BAND-AID.
La solution complète à votre problème est de commencer avec un modèle de projet ionique. Heureusement, ils ont une option onglets, qui est une barre d'onglets globale.

Ligne de commande: ionic start appName tabs

Cela devrait vous donner un bon modèle de départ avec tout ce dont vous avez besoin. Il contient également des exemples de fichiers controllers.js, services.js et app.js que vous pouvez simplement créer à partir de là. Cela vous aidera également à structurer correctement votre projet pour éviter que des données inattendues ne soient injectées dans votre tag.

Source 1: http://ionicframework.com/getting-started/
Source 2: http://ionicframework.com/docs/api/directive/ionNavView/

** Bonus: Il y a aussi une super astuce dans la source 2 qui vous montre comment garder tous les modèles dans votre fichier index.html pour accélérer l'application et simplifier votre flux de travail.

Bonne chance.





ionic-framework