AngularJS routing
- Forrige side AngularJS animation
- Næste side AngularJS applikation
ngRoute Moduler hjælper din applikation med at blive en Single Page Application.
Hvad er routing i AngularJS?
Hvis du vil navigere til forskellige sider i din applikation, men også ønsker, at applikationen skal være en SPA (Single Page Application) uden sidegenindlæsning, kan du bruge ngRoute Moduler.
ngRoute Moduler dirigerer din applikation til forskellige sider uden at genindlæse hele applikationen.
Eksempel
Naviger til "red.htm"、"green.htm" og "blue.htm":
<body ng-app="minApp">
<p><a href="#/!">hjemmeside</a></p>
<a href="#!red">rød</a>
<a href="#!green">grøn</a>
<a href="#!blue">blå</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Hvad har jeg brug for?
For at gøre din applikation klar til routing, skal du inkludere AngularJS Route modulet:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Dernæst, skal du inkludere ngRoute Tilføj som afhængighed i applikationens modul:
var app = angular.module("myApp", ["ngRoute"]);
Nu kan din applikation få adgang til at tilbyde $routeProvider routemodulet.
Brug $routeProvider Konfigurer forskellige ruter i applikationen:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Hvor er den henne?
Din applikation har brug for en container til at placere indholdet, der leveres af ruten.
Dette container er ng-view
kan inkluderes på tre forskellige måder i applikationen. ng-view Instruktion:
Eksempel
<div ng-view></div>
Eksempel
<ng-view></ng-view>
Eksempel
<div class="ng-view"></div>
Applikationen kan kun have en ng-view instruktion, som vil være pladsenholdere for alle de visninger, som ruten tilbyder.
$routeProvider
Brug $routeProvider，du kan definere hvilken side, der skal vises, når brugeren klikker på et link.
Eksempel
definere $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
brug af applikationens config metode definition $routeProvider。Udføres ved laden af config metoder, der registreres.
controller
Brug $routeProvider，du kan også definere en controller for hver "visning".
Eksempel
Tilføj controller:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "Jeg elsker London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" og "paris.htm" er almindelige HTML-filer, hvor du kan tilføje AngularJS-udtryk, ligesom i andre HTML-delen af AngularJS-applikationen.
Disse filer ser sådan ud:
london.htm
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
skabelon
I det foregående eksempel skrev vi i $routeProvider.when metoden brugte templateUrl egenskab.
Du kan også bruge template Egenskab, der tillader dig direkte at skrive HTML i værdien af egenskaben, i stedet for at referere til siden.
Eksempel
Skriv skabelon:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Klik på linksene for at ændre dette indhold</p>"
})
.when("/banana", {
template : "<h1>Banane</h1><p>Bananer indeholder omkring 75% vand.</p>"
})
.when("/tomato", {
template : "<h1>Sommerfugl</h1><p>Sommerfugle indeholder omkring 95% vand.</p>"
});
});
ellers-metoden
I det foregående eksempel brugte vi $routeProvider 's when-metode.
Du kan også bruge ellers Metode, når ingen andre ruter matcher, bliver det standardrute.
Eksempel
Hvis de ikke klikker på "Banana"-linket eller "Tomato"-linket, så fortæl dem:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banane</h1><p>Bananer indeholder omkring 75% vand.</p>"
})
.when("/tomato", {
template : "<h1>Sommerfugl</h1><p>Sommerfugle indeholder omkring 95% vand.</p>"
})
.otherwise({
template : "<h1>Ingen</h1><p>Ingenting er valgt</p>"
});
});
- Forrige side AngularJS animation
- Næste side AngularJS applikation
