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

黄舟
Libérer: 2017-05-27 10:35:14
original
1234 Les gens l'ont consulté

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";
});
Copier après la connexion
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>
Copier après la connexion
<. 🎜>


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


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,
  • user
  • 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>
    Copier après la connexion


    .controller(&#39;listController&#39;,function($scope,$routeParams){
      $scope.name="ROSE";
      $scope.params=$routeParams;
    });
    Copier après la connexion
    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é.

    {{params.age}}



    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!

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal