Maison >interface Web >js tutoriel >Tutoriel de démarrage d'AngularJS (2) - Introduction à la transmission de paramètres dans le routage

Tutoriel de démarrage d'AngularJS (2) - Introduction à la transmission de paramètres dans le routage

黄舟
黄舟original
2017-05-27 10:35:141235parcourir

Cet article présente principalement la méthode de transmission des paramètres d'AngularJS dans le routage. Il analyse les compétences associées d'AngularJS dans la mise en œuvre des paramètres de routage sous forme d'exemples et résume les étapes de fonctionnement et les précautions pertinentes. Les amis dans le besoin peuvent s'y référer. 🎜>

L'exemple de cet article décrit comment AngularJS transmet les paramètres dans le routage. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Non seulement nous pouvons définir directement la valeur de l'attribut dans le contrôleur, tel que :


app.controller('listController',function($scope){
  $scope.name="ROSE";
});
AngularJS Il fournit également la fonction de transmission de paramètres. Une façon que j'ai rencontrée actuellement consiste à transmettre des paramètres à partir de la vue :


<!--首页html-->
<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li>
<.>


//js
.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider.
    when(&#39;/user/:age&#39;,{
        templateUrl:&#39;list.html&#39;,
        controller:&#39;listController&#39;})
 }]);


AngularJs fournit un moyen de passer "18" de la vue de la page d'accueil à la vue list.html. Il s'agit de placer le paramètre réel après l'adresse de routage de la vue. Par exemple, 25edfb22a4f469ecb59f1190150159c6f3070c630e05965d2637a2d3f8fe3ef6user5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb Déclarez ensuite la variable dans la méthode JS when pour qu'elle corresponde au paramètre réel. Mais le paramètre réel est stocké dans $routeParams (array) en tant que "valeur clé", et nous devons l'injecter dans le symbole de contrôle (la soi-disant injection signifie en fait partager tous les attributs et valeurs qu'il contient ?) . Ensuite, déclarez et attribuez la valeur dans le contrôleur (c'est-à-dire, supprimez-la). Comme suit :
<!--list.html-->
<p>
  <p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
  <h3>{{params.age}}</h3>
</p>
</p>


.controller(&#39;listController&#39;,function($scope,$routeParams){
  $scope.name="ROSE";
  $scope.params=$routeParams;
});
Le résumé des étapes de passage des paramètres est le suivant :

1. le "/" de la vue de la page d'accueil ajoute les paramètres réels à passer ultérieurement.

2. Définissez une variable dans le chemin de routage dans la configuration de routage pour la correspondance, au format /:variable. 3. Configurez le contrôleur et injectez $routeParams dans le contrôleur.
4. Attribuez des valeurs dans le contrôleur. $scope.params=$routeParams;
5. Le paramètre réel est affiché avec succès dans la vue une fois le routage terminé. 684271ed9684bde649abda8831d4d355{{params.age}}39528cedfa926ea0c01e69ef5b2ea9b0

Une chose à noter est que le paramètre réel est stocké dans

en tant que valeur clé et doit être accessible via The La variable correspondante (l'âge dans ce cas) peut être utilisée pour obtenir cette valeur.

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