Kennen Sie das Routing-Prinzip von AngularJS? Hier sind die detaillierten Prinzipien des AngularJS-Routings

Dieser Artikel führt Sie hauptsächlich in das Routing-Prinzip von AngularJS sowie in die Schritte zur Verwendung von AngularJS-Routing ein. Er ist nicht zu ausführlich, jeder sollte dazu in der Lage sein verstehe es. Schauen wir uns als nächstes gemeinsam diesen Artikel an

1 Werfen wir einen Blick auf die Einführung von AngularJS:

Der AngularJS-Routing-Mechanismus wird vom ngRoute-Modul bereitgestellt. Dadurch können wir die Ansicht in ein Layout und eine Vorlagenansicht zerlegen und die Vorlagenansicht entsprechend der URL-Änderung dynamisch in das Layout laden, wodurch die Seitensprungfunktion einer Einzelseitenanwendung realisiert wird.

2. Sehen Sie sich die URL in AngularJS noch einmal an.

Das #-Zeichen wird zur URL der Single-Page-WEB-Anwendung hinzugefügt. Das #-Zeichen stellt einen Standort dar Alles auf der rechten Seite ist die Kennung, die zur Markierung des Standorts verwendet wird. Das #-Zeichen und der folgende Inhalt werden in der URL als Hash-Fragmente bezeichnet. Sie werden nicht an den Server gesendet. Die folgenden drei URLs fordern dieselbe Adresse vom Server an. Wenn Sie den Inhalt nur nach dem #-Zeichen ändern, führt die Aktualisierung nicht dazu, dass die Webseite neu geladen wird.

http://www.php.cn/

http://www.php.cn/#123

http://www.php.cn/ #123/456

3. Lassen Sie uns nun über die Verwendung von Routing sprechen:

1. Dateien importieren und Abhängigkeiten einfügen

Seit Version 1.2 hat AngularJS ngRoutes vom Kerncode in ein eigenständiges Modul getrennt. Daher müssen wir die Abhängigkeit von ngRoute in der Moduldeklaration installieren und einfügen, um die Routing-Funktion normal in AngularJS-Anwendungen zu verwenden. (Wenn Sie mehr über AngularJS erfahren möchten, besuchen Sie die Spalte „AngularJs Learning Manual“ auf der PHP-Website für Chinesisch.)

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",[&#39;ngRoute&#39;]);

2. Erstellen Sie eine Layoutvorlage

Der Grund, warum Sie eine Layoutvorlage erstellen, besteht darin, AngularJS mitzuteilen, wo das Layout gerendert werden soll. Durch die ng-view-Direktive können wir die Renderposition der Vorlagenansicht im DOM genau angeben.

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

3. Erstellen Sie einige Vorlagenansichten

myMusic.html

<p>这里是音乐界面啦</p>

myMovie.html

<p>这里是电影界面啦</p>

myNovel.html

<p>这里是小说界面啦</p>

home.html

<p>我是首页界面</p>

4. Definieren Sie die Routing-Tabelle

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

Okay, das ist der gesamte Inhalt dieses Artikels (möchte mehr sehen). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen

[Empfehlung des Herausgebers], um mehr über AngularJS zu erfahren.

Was sind die Unterschiede zwischen AngularJS und Vue? Vergleichsdetails zwischen AngularJS und Vue

Was sind die Vorteile von AngularJS? Hier sind die sieben Vorteile von AngularJS, die Sie kennen müssen

Das obige ist der detaillierte Inhalt vonKennen Sie das Routing-Prinzip von AngularJS? Hier sind die detaillierten Prinzipien des AngularJS-Routings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!