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.

//m.sbmmt.com/

//m.sbmmt.com/#123

//m.sbmmt.com/ #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;]);

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>

myMusic.html

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

myMovie.html

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

myNovel.html

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

home.html

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

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