Maison > Article > interface Web > Exemple de code pour l'utilisation du module de routage Ui-router dans AngularJS

Exemple de code pour l'utilisation du module de routage Ui-router dans AngularJS

黄舟original: 2017-05-31 10:22:451306parcourir

Cet article présente principalement l'utilisation du module AngularJS routageUi-router, et analyse les fonctions, l'utilisation et les précautions associées du module Ui-router sous la forme d'exemples. , les amis dans le besoin peuvent se référer à

Cet article décrit l'utilisation du module Ui-router de routage AngularJS. Partagez-le avec tout le monde pour référence, comme suit :

En raison de certaines raisons de conception, le module de routage natif d'AngularJS présente certaines lacunes, telles que le fait de ne pas prendre en charge l'imbrication des vues, etc., c'est pourquoi de nombreuses communautés ont commencé à concevoir leur propres modules de routage, le plus représentatif est ui-route.

ui-route est un module de routage puissant qui améliore d'autres fonctions du module natif ng-route.

Réalisons maintenant quelques DÉMO pour entrer en contact avec ui-route.

<!--初始页面-->
<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<p ng-app="myApp">
<p><a ui-sref = "index">首页</a></p>
<p ui-view></p><!--这里是路由视图存放的地方-->
</p>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="test2.js"></script>
</body>
</html>

Vous devez d'abord référencer le fichier angular-ui-router.js. Ce fichier est différent du fichier angulaire-route.js d'AngularJs. Et le fichier doit être placé sous angulaire.min.js.

En regardant le code corporel du HTML, vous pouvez constater qu'il y a trois endroits différents du code corporel lors de l'utilisation de ng-route natif. Il s'agit respectivement de ui-sref, index et ui-view. Ignorez-le d’abord et découvrez comment initialiser le module ui-route.

Initialisez le module ui-route :

var app = angular.module(&#39;myApp&#39;,[&#39;ui.router&#39;]);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:&#39;/&#39;,
      template:&#39;<p>我是首页内容</p>&#39;
    })
}]);

Tout d'abord, comme le module de routage natif ng-route, ui-route doit être injecté en premier. Procédez ensuite à une configuration spécifique. La différence avec le ng-route natif est que ui-route utilise state() au lieu du when() natif. Il ajoute un paramètre à when(), voici l'index utilisé pour distinguer quelle commande est utilisée. une partie du parcours répond.

Retournez au précédente388a4556c0f65e1904146cc1a846beec3782089853c0fc7f5f76ceb2b3ccb40Homepage5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3, et vous connaîtrez probablement la relation entre leurs points de vue et celui-ci. ui-view remplace le précédent ng-view, ui-sref remplace le précédent ng-href, et il ne pointe plus vers un lien, mais vers le nom de "Navigation".

L'attribut url peut identifier de manière unique l'adresse suivante de l'itinéraire pour la distinguer des itinéraires suivants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage d'exemples de code sur la façon d'utiliser le swiper de commande carrousel dans AngularjsArticle suivant：Partage d'exemples de code sur la façon d'utiliser le swiper de commande carrousel dans Angularjs

Articles Liés

Voir plus