angularjs ui-router - comment construire un état maître global à travers une application

Question

angularjs ui-router - comment construire un état maître global à travers une application

Demandé el 10 de Mai, 2013: Quand la question a-t-elle été
15779 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

<html ng-app="app">
<head>
...
</head>
<body>
  <div id="header"></div>
  <div id="notification"></div>
  <div id="container"></div>
  <div id="footer"></div>
</body>
</html>

Avec la structure de l'application (dérivé de l'angulaire de l'application):

en-tête: Ici, la navigation sur le site, le login/hors de la barre d'outils etc. C'est dynamique et possède son propre Contrôleur
notification: Global notification contenant.
conteneur: Ce qui à mon <ng-view>. C'est donc là que tous les autres modules de charges.
pied de page: Global pied de page.

Comment faire l'état de la hiérarchie ressemble? Je suis passé par l'exemple qui montre un seul module (contacts), mais généralement d'une application à l'échelle mondiale (racine) de l'état et de l'intérieur de la racine de l'état d'un autre module états sont rendus.

Ce que je pense est mon app module probablement l' root de l'état et ensuite, chaque module doit disposer de son propre état et je dois hériter de root de l'état. Suis-je le droit?

Aussi à partir de ui-state exemple, ils ont utilisé les deux $routeProvider et $urlRouterProvider ainsi que $stateProvider a une adresse url. Mon compris, $stateProvide également qui gère le routage. Si je me trompe, le fournisseur qui dois-je utiliser pour le routage?

EDIT: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

Merci!

Demandé el 10 de Mai, 2013 par amitava82

Answer 1

3 Réponses

Answer 2

53voto

Andy Zarzycki Points 651

L'approche que vous avez pris dans votre plunker est proche. @ben-schwartz solution démontre comment vous pouvez définir les valeurs par défaut dans le répertoire racine de votre état pour les trois essentiellement-des vues statiques. La chose qui manque dans votre plunker est que votre enfant, les états doivent encore référence au conteneur vue.

   .state('root',{
      url: '',
      views: {
        'header': {
          templateUrl: 'header.html',
          controller: 'HeaderCtrl'
        },
        'footer':{
          templateUrl: 'footer.html'
        }
      }
    })
    .state('root.about', {
      url: '/about',
      views: {
        'container@': {
          templateUrl: 'about.html'
        }
      }
    });

Note views: { 'container@': ...} au lieu de simplement en templateUrl: ... en 'root.about'

Ce que vous peut également se demander est de savoir si vous pouvez avoir des modules de définir leur propre état-ensembles, qui vous puis la joindre à votre application de l'état de la hiérarchie. Une sorte de plug-and-play pour les itinéraires et les membres de chaque module fournit.

Pour ce faire, vous devrez associer étroitement vos modules à votre application principale.

Dans le module:

angular.module('contact', ['ui.router'])
  .constant('statesContact', [
      { name: 'root.contact',
        options: {
          url: 'contact',
          views: {
            'container@': {
              templateUrl: 'contacts.html'
            }
          },
          controller:'ContactController'
      }}
    ])
  .config(['$stateProvider', function($stateProvider){    
  }])

Puis, dans l'application:

var app = angular.module('plunker', ['ui.router', 'contact']);
app.config(       ['$stateProvider', 'statesContact', 
           function($stateProvider,   statesContact){
    $stateProvider
    .state('root',{ ... })
    .state('root.home', { ... })
    .state('root.about', { ... })
    angular.forEach(statesContact, function(state) {
      $stateProvider.state(state.name, state.options);
    })      
}]);

Cela signifie que tous vos modules devront être compatibles avec ce schéma défini dans votre application. Mais si vous acceptez de cette contrainte, vous pouvez alors choisir d'inclure n'importe quelle combinaison de modules, et de leurs états comme par magie ajouté à votre application. Si vous souhaitez obtenir encore plus sophistiqué, vous pouvez modifier state.options.url votre statesModuleName boucle pour, par exemple, le préfixe de votre module structure de l'url.

Notez également que le module ui.compat n'est nécessaire que lorsque vous êtes en transition de $routeProvider de $stateProvider. Vous devriez normalement utiliser ui.state à la place.

Aussi n'oubliez pas d'ajuster en header.html $state.includes('root.contact'))

mise à jour plunker

Répondu el 15 de Mai, 2013 par Andy Zarzycki (651 Points )

Answer 3

5voto

ben schwartz Points 1027

Bien que déroutant, la FAQ dans l'interface utilisateur du routeur wiki semble dire que ce n'est pas possible: ui-router/wiki/faq

Une approche est de permettre à chaque fonction pour définir ses propres racines de l'état (comme dans cet exemple: AngularJS la Gestion de l'État avec ui-router)

Une autre serait de définir l'ensemble de l'état de la hiérarchie dans votre "myApp" module et juste l'effet de levier des contrôleurs etc. depuis les modules dépendants. Cela fonctionne particulièrement bien lorsque vous êtes maintenant un mobile et le site du bureau; définir chaque site de l'état de la hiérarchie dans un mobileApp et desktopApp module, et la fonctionnalité (par exemple, les contrôleurs, les services, etc.) partagé dans des modules séparés.

Répondu el 12 de Mai, 2013 par ben schwartz (1027 Points )

Answer 4

0voto

grettke Points 1322

Cela dépend de comment vous préférez approche.

Toutes les étendues d'hériter de rootScope de sorte que vous pouvez placer de l'état global. Le NG de la littérature mentionne spécifiquement que vous ne devriez mettre de l'état global, et non pas de la fonctionnalité. Les fonctionnalités requises à travers le système appartient, dans les services, et plus particulièrement vous ne devez pas mettre en œuvre des services, dont le seul but est de conserver l'état. Tous les conseils semble être implicitement partagée dans le contexte de la façon dont elle facilite ou entrave votre capacité à facilement faire à la fin des essais.

Répondu el 11 de Mai, 2013 par grettke (1322 Points )

angularjs ui-router - comment construire un état maître global à travers une application

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

angularjs ui-router - comment construire un état maître global à travers une application

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: