Auf einer einzelnen Seite können wir mehrere Module hinzufügen, sodass die Webseite dieses Modul nur bei Bedarf lädt. Das Umschalten von Modulen kann das Umschalten von Webseiten in etwa ersetzen. Daher können wir das Umschalten von Webseiten durch Modulumschaltung realisieren.
Auf den ersten Blick erscheint es sehr gewöhnlich, aber wenn Sie sorgfältig darüber nachdenken, können Sie feststellen, dass diese Idee viele Ressourcen lösen kann.
Wenn es beispielsweise eine Seite gibt, auf der Informationen zu 1.000 Produkten angezeigt werden müssen und jedes Produkt eine andere Ausdrucksform hat (vorausgesetzt, es verfügt über ein eigenes unabhängiges CSS und JS), dann benötigen wir im Allgemeinen Folgendes Bereiten Sie 1.000 Webseiten vor, um diese Informationen zu laden. Mit dieser modularen Idee können wir jedoch einfach 1.000 verschiedene Module im Hintergrund einrichten und dann bei Bedarf die entsprechenden Module der benötigten Produkte auf eine einzelne Seite laden.
Um die oben eingeführten Funktionen zu erreichen, müssen Sie die Routing-Funktion verwenden.
Hauptidee:
Einrichten mehrerer unabhängiger Module im Hintergrund
2. Extrahieren durch Routing als benötigt Das Modul muss auf der Homepage geladen werden
4 Während des Ladens andere Module ausblenden.
Wie viel Aufwand ist also erforderlich, um das Routing-Modul einzurichten? Tatsächlich ist es überraschend einfach:
Schreiben Sie zunächst den entsprechenden Code auf die Hauptseite:
<html ng-app="myTodo"><head>
<meta charset="utf-8">
<title>angularjs • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<style>
.pagination {
overflow: hidden;
padding: 20px;
}
.pagination ul li {
width: 60px;
height: 30px;
line-height: 30px;
border:1px solid black;
float: left;
list-style-type: none;
margin-right: 10px;
text-align: center;
}
</style>
</head>
<body>
<ng-view></ng-view> <!-- 路由区域，视图区域-->
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>Im Routing-Bereich und im Ansichtsbereich können wir Inhalte hinzufügen – sogar eine Webseite hinzufügen.
Als nächstes schauen Sie sich bitte die entsprechende app.js an.
Wenn Sie nur Routing verwenden, reicht der obige Code aus. Es wird garantiert:var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
console.log($routeParams);
});1. Wenn die Seite auf der Startseite oder an anderen seltsamen Orten bleibt, springt sie automatisch zu
/all
.0.1:8020/finishAngularJS-mark2/index.html#/allAchten Sie einfach darauf, was nach dem Index kommt.
2. Wenn die Seitensprungrichtung /other ist, springen Sie zu
http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
3. Wenn ein bestimmter Sprung auftritt (die drei hier angegebenen Sprünge sind /active, /complete/all), wird auch zur entsprechenden Seite gesprungen, dies ist jedoch ein Sprung unter dem Index——
http:// 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/ all
http: //127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete
[Eines ist besonders zu beachten: Außer 2 wird diese Seite verlassen, andere springen Es wird in der angegebenen Ansicht angezeigt Bereich und Routing-Bereich, und der Inhalt der Hauptwebseite wird geladen. 】
Als nächstes erklären wir das Prinzip:
app.config(function($routeProvider)
Dies ist der Code, der zum Festlegen der Route verwendet wird, schreiben Sie ihn einfach direkt< 🎜 >
Dies sind zwei Sprünge, templateUrl, das heißt, die Vorlage ist body.html. Der zweite Parameter ist Ein Controller, der Name lautet - myTodoCtrl.
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}Dieser Code wird zur Beurteilung verwendet, wenn der Der Hash-Wert ist „“, das heißt, der zweite Satz ist leer, führen Sie routeconfig aus
Wenn der Hash-Wert „/other“ ist, also in der fünften Runde, führen Sie other_config aus
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
