Dieser Artikel stellt hauptsächlich die Verwendung des AngularJSRoutingUi-Router-Moduls vor und analysiert die Funktionen, die Verwendung und die damit verbundenen Vorsichtsmaßnahmen des Ui-Router-Moduls im Formular Beispiele. Freunde in Not können sich auf
beziehen. Dieser Artikel beschreibt die Verwendung des AngularJS-Routing-UI-Router-Moduls. Geben Sie es wie folgt als Referenz an alle weiter:
Aus einigen Designgründen weist das native Routing-Modul von AngularJS einige Mängel auf, z. B. die fehlende Unterstützung für die Verschachtelung von Ansichten usw., sodass viele Communities damit begonnen haben, ihre eigenen zu entwerfen eigene Routing-Module, das repräsentativste davon ist ui-route.
ui-route ist ein leistungsstarkes Routing-Modul, das andere Funktionen des nativen ng-route-Moduls erweitert.
Jetzt machen wir ein paar DEMOs, um mit ui-route in Kontakt zu treten.
<!--初始页面--> <!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body > <p ng-app="myApp"> <p><a ui-sref = "index">首页</a></p> <p ui-view></p><!--这里是路由视图存放的地方--> </p> <script src="angular.min.js"></script> <script src="angular-ui-router.js"></script> <script src="test2.js"></script> </body> </html>
Zuerst müssen Sie auf die Datei angular-ui-router.js verweisen. Diese Datei unterscheidet sich von der Datei „angular-route.js“ von AngularJs. Und die Datei muss unter angle.min.js abgelegt werden.
Wenn Sie sich den HTML-Body-Code ansehen, können Sie feststellen, dass es drei Stellen gibt, die sich vom Body-Code unterscheiden, wenn Sie native ng-route verwenden. Sie sind jeweils ui-sref, index und ui-view. Überspringen Sie es zunächst und schauen Sie sich an, wie Sie das UI-Route-Modul initialisieren.
Initialisieren Sie das UI-Route-Modul:
var app = angular.module('myApp',['ui.router']); app.config(["$stateProvider",function($stateProvider){ $stateProvider .state("index",{ url:'/', template:'<p>我是首页内容</p>' }) }]);
Ähnlich wie beim nativen NG-Route-Routing-Modul muss zuerst UI-Route injiziert werden. Fahren Sie dann mit der spezifischen Konfiguration fort. Der Unterschied zur nativen ng-route besteht darin, dass ui-route state() anstelle von native when() verwendet. Es fügt einen -Parameter zu when() hinzu. Hier wird der Index verwendet, um zu unterscheiden, welcher Befehl dies ist Teil der Route reagiert auf.
Gehen Sie zurück zur vorherigen
, und Sie werden wahrscheinlich die Beziehung zwischen ihren Ansichten und dieser kennen. ui-view ersetzt die vorherige ng-view, ui-sref ersetzt die vorherige ng-href und zeigt nicht mehr auf einen Link, sondern auf den Namen „Navigation“.Das URL--Attribut kann die nachfolgende Adresse der Route eindeutig identifizieren, um sie von nachfolgenden Routen zu unterscheiden.
Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung des Routing-Ui-Router-Moduls in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!