Heim Web-Frontend js-Tutorial AngularJS-Erste-Schritte-Tutorial (2) – Einführung in die Übergabe von Parametern beim Routing

AngularJS-Erste-Schritte-Tutorial (2) – Einführung in die Übergabe von Parametern beim Routing

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

In diesem Artikel wird hauptsächlich die Methode zur Übergabe von AngularJS-Parametern beim Routing vorgestellt. Er analysiert die zugehörigen Fähigkeiten von AngularJS bei der Implementierung von Routing-Parametern und fasst die relevanten Betriebsschritte und Vorsichtsmaßnahmen zusammen.

Das Beispiel in diesem Artikel beschreibt, wie AngularJS Parameter beim Routing übergibt. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

Wir können nicht nur den Wert des Attributs direkt im Controller definieren, wie zum Beispiel:


app.controller('listController',function($scope){
  $scope.name="ROSE";
});
Nach dem Login kopieren

AngularJS bietet auch die Funktion zum Übergeben von Parametern. Eine Möglichkeit, die mir derzeit begegnet ist, besteht darin, Parameter aus der Ansicht zu übergeben:


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


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


<!--list.html-->
<p>
  <p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
  <h3>{{params.age}}</h3>
</p>
</p>
Nach dem Login kopieren

AngularJs bietet eine Möglichkeit, „18“ von der Homepage-Ansicht an die list.html-Ansicht zu übergeben. Das heißt, der eigentliche Parameter wird nach der View-Routing-Adresse eingefügt. Wie hier

  • user
  • . Deklarieren Sie dann die Variable in der when-Methode von JS so, dass sie mit dem tatsächlichen Parameter übereinstimmt. Aber der eigentliche Parameter wird in $routeParams (Array) als „Schlüsselwert“ gespeichert, und wir müssen ihn in das Steuersymbol einfügen (die sogenannte Injektion bedeutet eigentlich, alle darin enthaltenen Attribute und Werte zu teilen?) . Dann deklarieren und weisen Sie den Wert im Controller zu (d. h. nehmen Sie ihn heraus). Wie folgt:


    .controller(&#39;listController&#39;,function($scope,$routeParams){
      $scope.name="ROSE";
      $scope.params=$routeParams;
    });
    Nach dem Login kopieren

    Die Zusammenfassung der Parameterübergabeschritte lautet wie folgt:

    1 das „/“ der Startseitenansicht. Fügen Sie die tatsächlichen Parameter hinzu, die später übergeben werden sollen.
    2. Definieren Sie eine Variable im Routing-Pfad in der Routing-Konfiguration für den Abgleich im Format /:variable.
    3. Konfigurieren Sie den Controller und fügen Sie $routeParams in den Controller ein.
    4. Werte im Controller zuweisen. $scope.params=$routeParams;
    5. Der tatsächliche Parameter wird nach Abschluss des Routings erfolgreich in der Ansicht angezeigt.

    {{params.age}}

    Zu beachten ist, dass der tatsächliche Parameter in $routeParams als Schlüsselwert gespeichert ist und über The aufgerufen werden muss Um diesen Wert zu erhalten, kann die entsprechende Variable (in diesem Fall das Alter) verwendet werden.

    Das obige ist der detaillierte Inhalt vonAngularJS-Erste-Schritte-Tutorial (2) – Einführung in die Übergabe von Parametern beim Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    So implementieren Sie API-Routing im Slim-Framework So implementieren Sie API-Routing im Slim-Framework Aug 02, 2023 pm 05:13 PM

    So implementieren Sie API-Routing im Slim-Framework Slim ist ein leichtes PHP-Mikroframework, das eine einfache und flexible Möglichkeit zum Erstellen von Webanwendungen bietet. Eines der Hauptmerkmale ist die Implementierung des API-Routings, das es uns ermöglicht, verschiedene Anfragen den entsprechenden Handlern zuzuordnen. In diesem Artikel wird die Implementierung des API-Routings im Slim-Framework vorgestellt und einige Codebeispiele bereitgestellt. Zuerst müssen wir das Slim-Framework installieren. Die neueste Version von Slim kann über Composer installiert werden. Öffnen Sie ein Terminal und

    Java Apache Camel: Aufbau einer flexiblen und effizienten serviceorientierten Architektur Java Apache Camel: Aufbau einer flexiblen und effizienten serviceorientierten Architektur Feb 19, 2024 pm 04:12 PM

    Apache Camel ist ein auf Enterprise Service Bus (ESB) basierendes Integrationsframework, das problemlos unterschiedliche Anwendungen, Dienste und Datenquellen integrieren kann, um komplexe Geschäftsprozesse zu automatisieren. ApacheCamel verwendet eine routenbasierte Konfiguration, um Integrationsprozesse einfach zu definieren und zu verwalten. Zu den Hauptmerkmalen von ApacheCamel gehören: Flexibilität: ApacheCamel kann problemlos in eine Vielzahl von Anwendungen, Diensten und Datenquellen integriert werden. Es unterstützt mehrere Protokolle, einschließlich HTTP, JMS, SOAP, FTP usw. Effizienz: ApacheCamel ist sehr effizient und kann eine große Anzahl von Nachrichten verarbeiten. Es verwendet einen asynchronen Nachrichtenmechanismus, der die Leistung verbessert. Erweiterbar

    Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Jul 21, 2023 pm 02:37 PM

    Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Einführung: Im Vue-Projekt ist Routing eine der Funktionen, die wir häufig verwenden. Der Wechsel zwischen Seiten kann durch Routing erfolgen und sorgt so für eine gute Benutzererfahrung. Um den Seitenwechsel lebendiger zu gestalten, können wir dies durch Anpassen von Animationseffekten erreichen. In diesem Artikel wird erläutert, wie Sie mithilfe des Routings den Seitenwechsel-Animationseffekt im Vue-Projekt anpassen. Erstellen Sie ein Vue-Projekt. Zuerst müssen wir ein Vue-Projekt erstellen. Mit VueCLI können Sie schnell erstellen

    So verwenden Sie Routing in ThinkPHP6 So verwenden Sie Routing in ThinkPHP6 Jun 20, 2023 pm 07:54 PM

    ThinkPHP6 ist ein leistungsstarkes PHP-Framework mit praktischen Routing-Funktionen, mit dem sich die URL-Routing-Konfiguration problemlos implementieren lässt. Gleichzeitig unterstützt ThinkPHP6 auch mehrere Routing-Modi wie GET, POST, PUT, DELETE usw. In diesem Artikel wird erläutert, wie Sie ThinkPHP6 für die Routing-Konfiguration verwenden. 1. GET-Methode im ThinkPHP6-Routing-Modus: Die GET-Methode ist eine Methode zum Abrufen von Daten und wird häufig für die Seitenanzeige verwendet. In ThinkPHP6 können Sie Folgendes verwenden

    Verwenden Sie JavaScript-Funktionen, um die Navigation und Weiterleitung von Webseiten zu implementieren Verwenden Sie JavaScript-Funktionen, um die Navigation und Weiterleitung von Webseiten zu implementieren Nov 04, 2023 am 09:46 AM

    In modernen Webanwendungen ist die Implementierung der Webseitennavigation und -weiterleitung ein sehr wichtiger Teil. Die Verwendung von JavaScript-Funktionen zur Implementierung dieser Funktion kann unsere Webanwendungen flexibler, skalierbarer und benutzerfreundlicher machen. In diesem Artikel wird die Verwendung von JavaScript-Funktionen zum Implementieren der Webseitennavigation und -weiterleitung vorgestellt und spezifische Codebeispiele bereitgestellt. Implementieren der Webseitennavigation Bei einer Webanwendung ist die Webseitennavigation der von Benutzern am häufigsten verwendete Teil. Wenn ein Benutzer auf die Seite klickt

    Implementierungsmethode und Erfahrungszusammenfassung zur flexiblen Konfiguration von Routing-Regeln in PHP Implementierungsmethode und Erfahrungszusammenfassung zur flexiblen Konfiguration von Routing-Regeln in PHP Oct 15, 2023 pm 03:43 PM

    Implementierungsmethode und Erfahrungszusammenfassung der flexiblen Konfiguration von Routing-Regeln in PHP Einführung: In der Webentwicklung sind Routing-Regeln ein sehr wichtiger Teil, der die entsprechende Beziehung zwischen URL und bestimmten PHP-Skripten bestimmt. Bei der herkömmlichen Entwicklungsmethode konfigurieren wir normalerweise verschiedene URL-Regeln in der Routing-Datei und ordnen die URL dann dem entsprechenden Skriptpfad zu. Da jedoch die Komplexität des Projekts zunimmt und sich die Geschäftsanforderungen ändern, wird es sehr umständlich und unflexibel, wenn jede URL manuell konfiguriert werden muss. Also, wie man es in PHP implementiert

    So verwenden Sie Golang-Funktionen für die Weiterleitung von Webanfragen So verwenden Sie Golang-Funktionen für die Weiterleitung von Webanfragen May 02, 2024 am 10:18 AM

    In Golang ist die Verwendung von Funktionen zur Abwicklung des Web-Request-Routings eine erweiterbare und modulare Möglichkeit zum Erstellen von APIs. Es umfasst die folgenden Schritte: Installieren Sie die HTTP-Router-Bibliothek. Erstellen Sie einen Router. Definieren Sie Pfadmuster und Handlerfunktionen für Routen. Schreiben Sie Handlerfunktionen, um Anfragen zu verarbeiten und Antworten zurückzugeben. Betreiben Sie den Router über einen HTTP-Server. Dieser Prozess ermöglicht einen modularen Ansatz bei der Bearbeitung eingehender Anfragen und verbessert die Wiederverwendbarkeit, Wartbarkeit und Testbarkeit.

    Tipps zur Verwendung von Route Interceptors in Uniapp Tipps zur Verwendung von Route Interceptors in Uniapp Dec 17, 2023 pm 04:30 PM

    Tipps zur Verwendung von Routen-Interceptoren in Uniapp In der Uniapp-Entwicklung sind Routen-Interceptoren eine sehr häufige Funktion. Mit Routeninterceptoren können wir vor Routensprüngen einige spezifische Vorgänge ausführen, z. B. Berechtigungsüberprüfungen, Parameter für die Seitenübergabe usw. In diesem Artikel stellen wir Tipps zur Verwendung von Route Interceptors in Uniapp vor und stellen spezifische Codebeispiele bereit. Erstellen Sie einen Routen-Interceptor. Zuerst müssen wir im Uniapp-Projekt einen Routen-Interceptor erstellen. Die Erstellungsmethode ist wie folgt: Erstellen Sie ein Inter im Projektstammverzeichnis

    See all articles