AngularJS router
- Föregående sida AngularJS animation
- Nästa sida AngularJS applikation
ngRoute Modulen hjälper din applikation att bli en en-sidig applikation.
Vad är routing i AngularJS?
Om du vill navigera till olika sidor i applikationen men också vill att applikationen ska vara en SPA (en-sidig applikation) utan sidoladdning, kan du använda ngRoute Modul.
ngRoute Modulen routingar din applikation till olika sidor utan att ladda om hela applikationen.
Exempel
Navigera till "red.htm", "green.htm" och "blue.htm":
<body ng-app="minApp">
<p><a href="#/!">hem</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>
Vad behöver jag?
För att göra din applikation redo för routing måste du inkludera AngularJS Route-modulen:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Då måste du inkludera ngRoute Lägg till som beroende i applikationens modul:
var app = angular.module("myApp", ["ngRoute"]);
Nu kan din applikation komma åt att erbjuda $routeProvider routemodulen.
Använd $routeProvider Konfigurera olika rutter 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"
});
});
Varför är den borta?
Din applikation behöver en behållare för att placera innehållet som erbjuds av routen.
Denna behållare är ng-view .
Instruktionen kan inkluderas på tre olika sätt i applikationen. ng-view Instruktion:
Exempel
<div ng-view></div>
Exempel
<ng-view></ng-view>
Exempel
<div class="ng-view"></div>
Applikationen kan endast ha en ng-view instruktioner, detta kommer att vara platshållaren för alla vyer som erbjuds av denna route.
$routeProvider
Använd $routeProvider，du kan definiera vilken sida som ska visas när användaren klickar på en länk.
Exempel
definiera $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"
});
});
med hjälp av applikationens config metoddefinition $routeProvider。Kör metoder definierade i config arbete som registreras i
kontroller
Använd $routeProvider，du kan också definiera en kontroller för varje "vy".
Exempel
Lägg till kontroller:
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 = "Jag älskar London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "Jag älskar Paris";
});
"london.htm" och "paris.htm" är vanliga HTML-filer, där du kan lägga till AngularJS-uttryck, precis som i andra HTML-delar av AngularJS-applikationen.
Dessa filer ser ut så här:
london.htm
<h1>London</h1>
<h3>London är huvudstaden i England.</h3>
<p>Det är den mest befolkade staden i Förenade kungariket, med en storstadsområde över 13 miljoner invånare.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris är huvudstaden i Frankrike.</h3>
<p>Parisområdet är ett av de största befolkade områdena i Europa, med mer än 12 miljoner invånare.</p>
<p>{{msg}}</p>
mall
I det tidigare exemplet skrev vi i $routeProvider.when metoden använde templateUrl egenskapen.
Du kan också använda template Egenskapen, som tillåter dig att skriva HTML direkt i egenskapsvärdet, istället för att hänvisa till sidan.
Exempel
Skriv ut mallen:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Klicka på länkarna för att byta innehåll</p>"
})
.when("/banana", {
template : "<h1>Mango</h1><p>Mangoer innehåller cirka 75% vatten.</p>"
})
.when("/tomato", {
template : "<h1>Tomat</h1><p>Tomater innehåller cirka 95% vatten.</p>"
});
});
otherwise-metoden
I det tidigare exemplet använde vi $routeProvider när-metoden.
Du kan också använda otherwise Metoden, när ingen annan route matchar, blir den standardroute.
Exempel
Om ingen har klickat på länken "Banana" eller "Tomato", berätta för dem:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Mango</h1><p>Mangoer innehåller cirka 75% vatten.</p>"
})
.when("/tomato", {
template : "<h1>Tomat</h1><p>Tomater innehåller cirka 95% vatten.</p>"
})
.otherwise({
template : "<h1>Ingen</h1><p>Ingenting har valts ut</p>"
});
});
- Föregående sida AngularJS animation
- Nästa sida AngularJS applikation
