Tutoriel de démarrage d'AngularJS (1) - Une brève introduction à l'utilisation du routage-js tutoriel-php.cn

Tutoriel de démarrage d'AngularJS (1) - Une brève introduction à l'utilisation du routage

黄舟

Libérer： 2017-05-27 10:33:39

original

936 Les gens l'ont consulté

Cet article présente principalement l'utilisation du Angular JS routage et analyse brièvement le concept, la fonction et l'utilisation de base du routage AngularJS Pour la méthode, les amis qui en ont besoin peuvent se référer à

Cet article décrit l'utilisation du routage AngularJS avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Selon la compréhension actuelle, ce module de routage NG peut être utilisé pour le développement d'une seule page avec plusieurs vues .

Publiez d'abord tous les codes :

HTML :

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

Copier après la connexion

liste.html :

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>

Copier après la connexion

JS :

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,function($scope){
  $scope.name="ROSE";
});

Copier après la connexion

Tout d'abord, puisque j'utilise Angular1.5, je dois introduire angulaire-route.js supplémentaire :

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

Copier après la connexion

Pour utiliser le routage en NG, vous devez d'abord le définir dans un module spécifique :

.config([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

Copier après la connexion

Faire correspondre le routage à travers deux méthodes : quand et autrement. (En fait, il correspond au caractère / après l'URL ci-dessus). Enfin, placez le champ ou le fichier correspondant au caractère correspondant dans le DOM avec la directive ng-view.

quand il contient de nombreux attributs. Vous pouvez définir Contrôleur à l'intérieur, et le contrôleur sera associé au champ ou au fichier correspondant. Tout comme le contrôleur listController dans le code ci-dessus. La directive

ng-view a de nombreuses règles :

Lors de la correspondance des itinéraires :

1. Créez une nouvelle portée actuelle.
2. Supprimer la portée précédente.
3. Associez le modèle actuel (contrôleur, etc.) à la portée actuellement nouvellement créée.
4. S'il existe un contrôleur associé intégré, associez-le à la portée actuelle.

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!