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.
Je vous demande ici, les gars, de me donner une explication simple, sur la façon de mettre en œuvre plusieurs vues ui-route
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 :
state.js
définition essentielle de state.js
, l'un des codes les mieux documentés jamais 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:
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
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:
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
Ainsi, l'abstraction est une caractéristique. Caractéristique très similaire à l'inefficacité standard …