suchen

Heim >Web-Frontend >js-Tutorial >Beispielcode für die Verwendung des Routing-Ui-Router-Moduls in AngularJS

Beispielcode für die Verwendung des Routing-Ui-Router-Moduls in AngularJS

黄舟
黄舟Original
2017-05-31 10:22:451349Durchsuche

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(&#39;myApp&#39;,[&#39;ui.router&#39;]);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:&#39;/&#39;,
      template:&#39;<p>我是首页内容</p>&#39;
    })
}]);

Ä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 vorherigene388a4556c0f65e1904146cc1a846beec3782089853c0fc7f5f76ceb2b3ccb40Homepage5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3, 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!

Stellungnahme：
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
Vorheriger Artikel：Teilen Sie Codebeispiele für die Verwendung des Karussell-Befehls-Swipers in AngularjsNächster Artikel：Teilen Sie Codebeispiele für die Verwendung des Karussell-Befehls-Swipers in Angularjs

In Verbindung stehende Artikel

Mehr sehen