Javascript Girl
  1. Javascript Girl
  3. Simple ui-routes, explication s'il vous plaît
Intereting Posts
Utilisateur prompt pour les modifications non enregistrées lors du départ de la page Web Afficher les fenêtres pop-up de la manière la plus élégante Comment enregistrer une image dans localStorage et l'afficher sur la page suivante? Comment afficher / masquer DIV sur la sélection de TOUTES les valeurs déroulantes? Access-Control-Allow-Origin Error à Android 4.1 Ajoutant rappel pour fonctionner – toujours Javascript – Comment définir un Constructeur Prototype javascript et "cet accès" en fermeture Comment déclencher un événement JavaScript cliquez Problème d'erreur de réagir-composants bootstrap OrderBy champs multiples en angulaire Ne peut pas charger <img> à <div> Filtre angularjs (ne fonctionne pas) Comment supprimer la virgule du nombre qui vient dynamiquement dans le fichier .tpl Recurrence avec ng-repeat in Angular

Simple ui-routes, explication s'il vous plaît

Je suis venu à savoir que les ui-roues sont très puissants et avantageux que ngRoutes, récemment. J'ai donc essayé d'étudier la fonctionnalité ui-routing à partir de http://www.ng-newsletter.com/posts/angular-ui-router.html . BUt ne pouvait pas comprendre les exemples qu'ils ont donnés en particulier à partir de "Plusieurs vues nommées" dans http://jsfiddle.net/jwebe0pe/9vH9Z/ , car ils ont donné l'explication en utilisant d3.js, ce que je ne sais pas.

  1. Je vous demande ici, les gars, de me donner une explication simple, sur la façon de mettre en œuvre plusieurs vues ui-route

  2. Quelle est l'importance de 

 $stateProvider.state('admin', { abstract: true, url: '/admin', template: '<div ui-view></div>' }).state('admin.index', { url: '/index', template: 'Admin index' }).state('admin.users', { url: '/users', template: '<ul>...</ul>' });

Admin, admin.index et admin.users, dans le code ci-dessus et quand sera utilisé.

3 Impossible de comprendre le résumé: concept vrai / faux.

Veuillez me préciser dans les points ci-dessus.

J'espère que vous allez m'aider.

Le mieux que vous pourriez faire est de parcourir tous les liens mentionnés dans cette Q & A :

  • Exemple d'application par l'équipe ui-router
  • Code source de cet exemple
  • state.js définition essentielle de state.js , l'un des codes les mieux documentés jamais
  • Plus le wiki

Ici, j'ai créé un autre exemple avec une mise en page principale présentant les zones TOP, LEFT, MAIN en tant que multi-vues séparées.

Cet état de mise en page serait défini comme ceci: 

 .state('index', { url: '/', views: { '@' : { templateUrl: 'layout.html', controller: 'IndexCtrl' }, 'top@index' : { templateUrl: 'tpl.top.html',}, 'left@index' : { templateUrl: 'tpl.left.html',}, 'main@index' : { templateUrl: 'tpl.main.html',}, }, })

Le gabarit de base injecté dans l'élément index.html <div ui-view></div> : 

 <div> <section class="top"> <div ui-view="top"></div> // TOP here </section> <section class="middle"> <section class="left"> <div ui-view="left"></div> // LEFT here </section> <section class="main"> <div ui-view="main"></div> // MAIN here </section> </section> </div>

Nous pouvons donc voir qu'un seul état ( 'index' ci-dessus) comporte une vue principale (mise en page) et également d'autres vues, injectées dans ce modèle de mise en page, en utilisant le nom de la vue absolue:

  • Afficher les noms – Noms relatifs vs absolus (citer 🙂

Derrière les scènes, chaque vue reçoit un nom absolu qui suit un schéma de viewname@statename , où viewname est le nom utilisé dans la directive de vue et le nom d'état est le nom absolu de l'état, par exemple contact.item. Vous pouvez également choisir d'écrire vos noms de vues dans la syntaxe absolue.

C'est-à-dire la partie de la définition de l'état: 'top@index' : { templateUrl: 'tpl.top.html',}, dit:

  • tpl.top.html modèle tpl.top.html dans la vue nommée top
  • Recherchez ce nom dans un état nommé index
  • Ces informations ensemble: top + index == 'top@index' view name

Observez le plunker – pour voir cela en action … dans un exemple très simplifié ….

EXTEND: pour donner plus d'explications à la question étendue

Qu'est-ce que l'état abstrait? C'est l'état marqué comme abstract: true …

Comme dans n'importe quelle autre langue (C #, Java), c'est un état standard, qui ne peut être instancié, atteint directement. C'est toujours un état parent , destiné à gérer certaines fonctionnalités de base. À savoir:

  • Les vues tirent profit de l' héritage de la portée par la hiérarchie d' affichage uniquement :

Gardez à l'esprit que les propriétés de portée héritent uniquement de la chaîne d'état si les vues de vos états sont imbriquées. L'héritage des propriétés de portée n'a rien à voir avec l'imbrication de vos états et tout ce qui concerne l'imbrication de vos vues (modèles).

Il est tout à fait possible que vous ayez des états imbriqués dont les modèles remplissent ui-views à différents emplacements non imbriqués de votre site. Dans ce scénario, vous ne pouvez pas vous attendre à accéder aux variables de portée des vues d'état parent dans les vues des états enfants.

Ainsi, le contrôleur parent peut être doté de certains paramètres de résolveur, il peut gérer l'autorisation, il peut charger des données … Simplement, en tant que parent, il peut faire beaucoup de choses communes pour les enfants, alors qu'il ne peut pas être atteint directement

  • Il peut également faciliter la planification. Parce que le parent abstrait conterait par exemple template.layout … les enfants peuvent utiliser le nom de la vue réelle.

Ainsi, l'abstraction est une caractéristique. Caractéristique très similaire à l'inefficacité standard …