Doublement vues imbriquées : l'INTERFACE utilisateur du Routeur ou de l'INTERFACE utilisateur-Bootstrap onglets / accordéon?

Je suis un total Angulaire (et JS) nebwie (avec beaucoup d'autres s/w de l'expérience de développement, cependant).

Je veux développer quelque chose comme ceci:
Doublement vues imbriquées : l'INTERFACE utilisateur du Routeur ou de l'INTERFACE utilisateur-Bootstrap onglets /accordéon?
(avec mes excuses à @PhillipKregg pour l'emprunt de son excellente illustration).

Effectivement, je veux onglets imbriqués les ordinateurs portables - une rangée d'onglets (des idées?), chaque qui peut contenir des données ou une autre rangée d'onglets, ( ... ).

Googler semble renvoyer plus de recommandations pour l'INTERFACE utilisateur du Routeur, mais j'imagine que UI-Bootstrap Onglets ou l'Accordéon pourrait également être utilisé (ou encore de l'INTERFACE utilisateur-Bootstrap de la Pagination, avec une vue unique dont le contenu, je la mise à jour de la page sélectionnée?).

Toutes choses étant égales par ailleurs, je vais aller avec celle qui est la plus simple pour un novice à comprendre et à mettre en œuvre (qui est qui?).

Mais - y a t il des problèmes de performances? Par exemple, sera une de télécharger le contenu de tous les points de vue immédiatement ou de chargement initial de la page (et donc de l'augmentation initiale de la page de téléchargement du temps)? Sera l'un seulement de télécharger les données pour une vue lorsqu'il devient actif (ce qui semble préférable)?

Autre chose que je dois prendre en compte?

Merci d'avance pour votre aide.

OriginalL'auteur Mawg | 2014-03-05

20

Oui, ui-router & ui-bootstrap.les onglets sont les meilleurs outils pour le travail à l'heure actuelle. Pour faire quelque chose de similaire aurait besoin de mélanger deux types de ui-router config modèles, nest views & multiple named views. Je vous suggère la lecture de ces deux pages wiki:

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Vues

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Voici un projet de base de démonstration de quelque chose de similaire à votre illustration, à l'aide de l'interface utilisateur du routeur & ui-bootstrap.onglets: http://plnkr.co/edit/BUbCR8?p=preview

La façon la plus simple pour commencer est d'utiliser ng-standard https://github.com/ngbp/ngbp, il utilise l'interface utilisateur du routeur & a de meilleur-pratique structure de répertoire. Il aborde également les problèmes de performances grâce à la compilation de html, js & l'ajout de modèles à $templateCache, donc les coups de pied beaucoup de demandes XHR de la bordure du trottoir.

Ce qui concerne le téléchargement de données, les données devraient généralement être gérés par un angularJS service instance du singleton, distincte de toute views. Comment & quand vous prévaloir de tout service de toute view est totalement de votre choix. C'est un très bon tutoriel sur angulaire services: http://www.ng-newsletter.com/posts/beginner2expert-services.html

+1 Merci pour certains de grands liens
Aaaargh!! J'ai juste ne peut pas convertir votre Liste 1, Liste 2 sur l'onglet de gauche, à un autre deux onglets, chacun avec une vue, au lieu d'une liste 🙁
Si vous pouvez me montrer comment faire, je vais d'attribution d'une prime. J'ai le reste de mon application presque de travail; je ne peux pas l'encadrer joliment dans les onglets.
Les liens vont effectivement à de nouveaux points de vue qui sont imbriquées, les listes sont rendu dans un point de vue différent/état de la racine/parent. Au-dessus des onglets, regarder le "$état" & "$état de l'url d'un changement lorsque vous cliquez sur les onglets ou des liens.
Content que ça a aidé, merci. Pour le contenu initial/de données pour une vue d'ajouter ng-init="functionCallingWhatever()" vers le haut du modèle de la vue. Dans le contrôleur, $scope.functionCallingWhatever pouvez appeler la injecté service exemple c'est lié aux données.

OriginalL'auteur cheekybastard
1

Je vous recommande d'utiliser angulaire $routeProvider pour votre tâche. Cela rendra facile à manipuler code et d'afficher des fragments.

Avec bootstrap, vous aurez besoin de mettre tout le code sur une seule page et qui est de moins en moins gérable. Jetez un oeil à

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ et

De vues imbriquées

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

Aussi $routeProvider est mieux pour la navigation. De retour de l'Avant à travers la vue...

Angulaire charge les vues si nécessaire.(Chargement paresseux.) Il vaudrait donc mieux pour la performance...

Espère que cela aidera.

+1 et merci. "Avec bootstrap, vous aurez besoin de mettre tout le code sur une seule page". Eh bien, je veux une Seule Page de l'Application, mais je suppose que vous êtes le sens de "mettre tout le code dans un fichier"? Si oui, puis-je pas utiliser les Partiels? Oh, c'est ce que vous voulez dire quand vous dites user $routeProvider, n'est-ce pas. Je vois. Merci.
Oui le Mawg exactement.... Vous ne regretterez jamais le choix angulaire, pour sûr..bonne chance

OriginalL'auteur Nikunj Tilva
1

Personnellement, je n'obtenez pas au point de vouloir utiliser bootstrap onglets angulaire de l'interface utilisateur du routeur. Il est contre-intuitif. Il suffit de ne pas utiliser bootstrap onglets et mis en place le "sous-onglets" dans l'angle de config. Ce sera également rendre votre code plus lisible. Seulement ajouter de l'interface utilisateur-bootstrap si vous avez BESOIN de fonctionnalités supplémentaires. Un exemple de config est en dessous de
```
  $stateProvider.state('A', {
  url: "/A",
   controller: "testController",
  templateUrl:'pages/A.html'
})    
 .state('A.B', {
  url: "/A/B",
   controller: "testController2",
  templateUrl:'pages/A.B.html'
})    
```
Cool Fait: Bootstrap de l'onglet Actif fonctionnera toujours

OriginalL'auteur Quentin Mayo

Vous devez vous connecter pour publier un commentaire.