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

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

黄舟

Freigeben： 2017-05-27 10:33:39

Original

871 Leute haben es durchsucht

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>

Nach dem Login kopieren

Liste.html:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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!