Exemple de code pour l'utilisation du module de routage Ui-router dans AngularJS-js tutoriel-php.cn

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

黄舟

Libérer： 2017-05-31 10:22:45

original

1316 Les gens l'ont consulté

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>

Copier après la connexion

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;
    })
}]);

Copier après la connexion

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édent

Homepage

, 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!