Navigation similaire à UINavigationController dans AngularJS webapp

Question

Je veux que ma webapp se comporte exactement comme les autres applications iPhone utilisant un UINavigationController.

Je souhaite commencer par deux vues: la vue racine et une barre de navigation. Lorsqu'une nouvelle vue doit être affichée, elle sera placée au-dessus de la vue actuelle, en masquant simplement la ou les vues précédentes.

La barre de navigation doit afficher le titre de la vue actuelle, ainsi qu'un bouton de retour (à moins que la vue racine).

Answer 1

Je vous suggère de regarder ng-view. Il vous permet de basculer facilement entre les vues. Regardez également le service $location. Il prend en charge les boutons avant/arrière du navigateur. Si vous voulez plus de contrôle ou si vous ne voulez pas que la barre d'adresse du navigateur change lorsque vous changez de vue, vous pouvez raccorder manuellement les éléments ng-show et/ou ng-hide pour afficher/masquer les sections du DOM. Utilisez les propriétés model/$ scope pour garder trace de la vue actuelle et des vues précédentes. Voici un fiddle montrant comment commencer. Par exemple, la barre de navigation pourrait ressembler à ceci:

<button ng-hide="view == 'root'" ng-click="goBack()">< {{previousView}}</button> 

Et changer de vue:

<div ng-show="view == 'view1'">View 1 
    <div><a ng-click="changeView('view1.1')">view 1.1</a> 
    </div> 
</div>