Heim > Artikel > Web-Frontend > AngularJS-Erste-Schritte-Tutorial (1) – Eine kurze Einführung in die Routing-Nutzung

AngularJS-Erste-Schritte-Tutorial (1) – Eine kurze Einführung in die Routing-Nutzung

黄舟Original: 2017-05-27 10:33:39872Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung von Angular JS Routing vor und analysiert kurz das Konzept, die Funktion und die grundlegende Verwendung von AngularJS-Routing Für die Methode können Freunde, die sie benötigen, auf

zurückgreifen. Dieser Artikel beschreibt die Verwendung des AngularJS-Routings anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Nach dem aktuellen Verständnis kann dieses NG-Routing-Modul für die Einzelseitenentwicklung mit mehreren Ansichten verwendet werden.

Veröffentlichen Sie zuerst alle Codes:

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

Liste.html:

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>

JS:

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,function($scope){
  $scope.name="ROSE";
});

Da ich Angular1.5 verwende, muss ich zunächst zusätzliche angle-route.js einführen:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

Um Routing in NG zu verwenden, müssen Sie es zunächst in einem bestimmten Modul definieren:

.config([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}

Match-Routing durch zwei Methoden: wann und sonst. (Tatsächlich entspricht es dem /-Zeichen nach der obigen URL). Fügen Sie abschließend mit der ng-view-Direktive das Feld oder die Datei, die dem übereinstimmenden Zeichen entspricht, in das DOM ein.

wenn es viele Attribute enthält. Sie können Controller darin festlegen, und der Controller wird dem entsprechenden Feld oder der entsprechenden Datei zugeordnet. Genau wie der listController-Controller im obigen Code.

ng-view-Direktive hat viele Regeln:

Beim Abgleichen von Routen:

1. Erstellen Sie einen neuen aktuellen Bereich.
2. Löschen den vorherigen Bereich.
3. Verknüpfen Sie die aktuelle Vorlage (Controller usw.) mit dem aktuell neu erstellten Bereich.
4. Wenn ein integrierter Controller vorhanden ist, verknüpfen Sie ihn mit dem aktuellen Bereich.

Das obige ist der detaillierte Inhalt vonAngularJS-Erste-Schritte-Tutorial (1) – Eine kurze Einführung in die Routing-Nutzung. 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：Beispielcode-Freigabe über die modale AngularJS-Box $modalNächster Artikel：Beispielcode-Freigabe über die modale AngularJS-Box $modal

In Verbindung stehende Artikel

Mehr sehen