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

May 27, 2017 am 10:35 AM
angularjs 传递参数 路由

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!

    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

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25: Comment déverrouiller tout dans Myrise
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Comment implémenter le routage API dans le framework Slim Comment implémenter le routage API dans le framework Slim Aug 02, 2023 pm 05:13 PM

    Comment implémenter le routage API dans le framework Slim Slim est un micro-framework PHP léger qui offre un moyen simple et flexible de créer des applications Web. L'une des principales fonctionnalités est la mise en œuvre du routage API, nous permettant de mapper différentes requêtes aux gestionnaires correspondants. Cet article présentera comment implémenter le routage API dans le framework Slim et fournira quelques exemples de code. Tout d’abord, nous devons installer le framework Slim. La dernière version de Slim peut être installée via Composer. Ouvrez un terminal et

    Java Apache Camel : Construire une architecture orientée services flexible et efficace Java Apache Camel : Construire une architecture orientée services flexible et efficace Feb 19, 2024 pm 04:12 PM

    Apache Camel est un framework d'intégration basé sur Enterprise Service Bus (ESB) qui peut facilement intégrer des applications, des services et des sources de données disparates pour automatiser des processus métier complexes. ApacheCamel utilise une configuration basée sur les routes pour définir et gérer facilement les processus d'intégration. Les principales fonctionnalités d'ApacheCamel incluent : Flexibilité : ApacheCamel peut être facilement intégré à une variété d'applications, de services et de sources de données. Il prend en charge plusieurs protocoles, notamment HTTP, JMS, SOAP, FTP, etc. Efficacité : ApacheCamel est très efficace, il peut gérer un grand nombre de messages. Il utilise un mécanisme de messagerie asynchrone, qui améliore les performances. Extensible

    Comment utiliser le routage pour personnaliser les effets d'animation de changement de page dans un projet Vue ? Comment utiliser le routage pour personnaliser les effets d'animation de changement de page dans un projet Vue ? Jul 21, 2023 pm 02:37 PM

    Comment utiliser le routage pour personnaliser les effets d'animation de changement de page dans un projet Vue ? Introduction : Dans le projet Vue, le routage est l'une des fonctions que nous utilisons souvent. La commutation entre les pages peut être réalisée via le routage, offrant une bonne expérience utilisateur. Afin de rendre le changement de page plus vivant, nous pouvons y parvenir en personnalisant les effets d'animation. Cet article explique comment utiliser le routage pour personnaliser l'effet d'animation de changement de page dans le projet Vue. Créer un projet Vue Tout d'abord, nous devons créer un projet Vue. Vous pouvez utiliser VueCLI pour créer rapidement

    Comment utiliser le routage dans ThinkPHP6 Comment utiliser le routage dans ThinkPHP6 Jun 20, 2023 pm 07:54 PM

    ThinkPHP6 est un framework PHP puissant doté de fonctions de routage pratiques qui peuvent facilement implémenter la configuration du routage d'URL. En même temps, ThinkPHP6 prend également en charge plusieurs modes de routage, tels que GET, POST, PUT, DELETE, etc. Cet article explique comment utiliser ThinkPHP6 pour la configuration du routage. 1. Méthode GET du mode de routage ThinkPHP6 : La méthode GET est une méthode utilisée pour obtenir des données et est souvent utilisée pour l'affichage des pages. Dans ThinkPHP6, vous pouvez utiliser ce qui suit

    Utiliser les fonctions JavaScript pour implémenter la navigation et le routage des pages Web Utiliser les fonctions JavaScript pour implémenter la navigation et le routage des pages Web Nov 04, 2023 am 09:46 AM

    Dans les applications Web modernes, la mise en œuvre de la navigation et du routage des pages Web est un élément très important. L'utilisation de fonctions JavaScript pour implémenter cette fonction peut rendre nos applications Web plus flexibles, évolutives et conviviales. Cet article explique comment utiliser les fonctions JavaScript pour implémenter la navigation et le routage des pages Web, et fournit des exemples de code spécifiques. Implémentation de la navigation Web Pour une application Web, la navigation Web est la partie la plus fréquemment utilisée par les utilisateurs. Lorsqu'un utilisateur clique sur la page

    Méthode de mise en œuvre et résumé de l'expérience de configuration flexible des règles de routage en PHP Méthode de mise en œuvre et résumé de l'expérience de configuration flexible des règles de routage en PHP Oct 15, 2023 pm 03:43 PM

    Méthode de mise en œuvre et résumé de l'expérience de la configuration flexible des règles de routage en PHP Introduction : Dans le développement Web, les règles de routage sont une partie très importante, qui détermine la relation correspondante entre l'URL et les scripts PHP spécifiques. Dans la méthode de développement traditionnelle, nous configurons généralement diverses règles d'URL dans le fichier de routage, puis mappons l'URL sur le chemin de script correspondant. Cependant, à mesure que la complexité du projet augmente et que les exigences commerciales changent, il deviendra très lourd et peu flexible si chaque URL doit être configurée manuellement. Alors, comment implémenter en PHP

    Comment utiliser les fonctions Golang pour gérer le routage des requêtes Web Comment utiliser les fonctions Golang pour gérer le routage des requêtes Web May 02, 2024 am 10:18 AM

    Dans Golang, l'utilisation de fonctions pour gérer le routage des requêtes Web est un moyen extensible et modulaire de créer des API. Cela implique les étapes suivantes : Installer la bibliothèque du routeur HTTP. Créez un routeur. Définissez des modèles de chemin et des fonctions de gestionnaire pour les itinéraires. Écrivez des fonctions de gestionnaire pour gérer les requêtes et renvoyer les réponses. Exécutez le routeur à l'aide d'un serveur HTTP. Ce processus permet une approche modulaire lors du traitement des demandes entrantes, améliorant ainsi la réutilisabilité, la maintenabilité et la testabilité.

    Comment utiliser le routage pour implémenter le saut de page dans Vue ? Comment utiliser le routage pour implémenter le saut de page dans Vue ? Jul 21, 2023 am 08:33 AM

    Comment utiliser le routage pour implémenter le saut de page dans Vue ? Avec le développement continu de la technologie de développement front-end, Vue.js est devenu l'un des frameworks front-end les plus populaires. Dans le développement de Vue, le saut de page est un élément essentiel. Vue fournit VueRouter pour gérer le routage des applications, et une commutation transparente entre les pages peut être obtenue grâce au routage. Cet article expliquera comment utiliser le routage pour implémenter les sauts de page dans Vue, avec des exemples de code. Tout d'abord, installez le plugin vue-router dans le projet Vue.

    See all articles