Routage angularjs
Pouvoir passer d'une vue d'une page à une autre est crucial pour les applications à une page. Les applications deviennent de plus en plus complexes, nous avons besoin d'un moyen raisonnable de gérer les interfaces que les utilisateurs voient pendant l'utilisation. AngularJS pratique pour diviser la vue en vue de mise en page et de modèle et afficher la vue correspondante en fonction de l'URL actuellement accessible par l'utilisateur.
Cet article fournit un exemple simple de routage AngularJS et mentionne certains des concepts qu'il implique.
1. Page de mise en page
Citation des scripts:
<script src = "../ scripts / jQuery-1.9.1.min.js"> </ script> <script src = "../ scripts / angular.min.js"> </ script> <script src = "../ scripts / angular-route.min.js"> </ script>
La disposition de la page est relativement simple:
<div> <ul> <li> <a href = "# page1"> Go Page 1 </a> </li> <li> <a href = "# page2"> Go Page 2 </a> </li> <li> <a href = "# autre" à l'autre page </a> </li> </ul> </v> <div ng-diew> </div>
Ng-View est une directive spéciale fournie par le module NGOUTE qui indique à AngularJS où rendre le modèle. Dans cet exemple, nous mettons le contenu que nous devons rendre dans la div ci-dessous. Les trois ci-dessus A sont respectivement des liens vers trois vues.
2. Page de modèle
Créez deux pages de modèles, appelés sous-page_1.html et sous-page_2.html, respectivement.
3. Règles de routage Configation de routage
angular.module ("myRouteApp", ["ngoute"]) .config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider .When ("/ Page1", {templateUrl: "subpage_1.html"}). }). Autre ({redirectTo: "/"});Chargez le module Ngoute comme dépendance dans notre application. Utilisez la fonction de configuration pour définir les routes dans des modules ou des applications, et utilisez les deux méthodes fournies par AngularJS pour définir les routes vers les applications.
templateUrl:
L'application lit la vue via XHR (ou lit à partir de $ templateCache) en fonction du chemin spécifié par la propriété templateUrl. Si ce modèle peut être trouvé et lu, AngularJS rend le contenu du modèle dans un élément DOM avec la directive NG-View.
Redirectto:
Si la valeur de la propriété RedirectTo est une chaîne, le chemin sera remplacé par cette valeur et le changement de routage sera déclenché en fonction du chemin cible. Si la valeur de la propriété RedirectTo est une fonction, le chemin sera remplacé par la valeur de retour de la fonction et le changement de routage sera déclenché en fonction de ce chemin cible.
Résultats en cours d'exécution
Cliquez sur aller page 1
Cliquez sur aller page 2
Le code d'exemple de route de routage angulaire ci-dessus est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.