Beispielcode für die Verwendung des Routing-Ui-Router-Moduls in AngularJS-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-05-31 10:22:45

Original

1351 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des AngularJS RoutingUi-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>

Nach dem Login kopieren

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;
    })
}]);

Nach dem Login kopieren

Ä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

Homepage

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