AngularJS-reititys
- Edellinen sivu AngularJS-animaatiot
- Seuraava sivu AngularJS-sovellukset
ngRoute Moduuli auttaa sovelluksesi tulemaan yksisivuiseksi sovellukseksi.
Mitä on AngularJS:n reititys?
Jos haluat navigoida sovelluksen eri sivuille mutta haluat myös, että sovellus on SPA (yksisivuinen sovellus) ja sivuja ei ladata uudelleen, voit käyttää: ngRoute Moduuli.
ngRoute Moduuli ohjaa sovelluksesi eri sivuille ilman, että koko sovellus ladataan uudelleen.
Esimerkki
Navigoi sivuille "red.htm", "green.htm" ja "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">etusivu</a></p>
<a href="#!red">punainen</a>
<a href="#!green">vihreä</a>
<a href="#!blue">sininen</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>
Mitä minun täytyy?
Jotta sovelluksesi valmistautuu reititykseen, sinun täytyy sisällyttää AngularJS Route -moduuli:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Sitten, sinun täytyy lisätä ngRoute Lisää riippuvuutena sovellusmoduuliin:
var app = angular.module("myApp", ["ngRoute"]);
Nyt sovelluksesi voi käyttää tarjoamia $routeProvider polkimoduulia.
Käytä $routeProvider Määritä eri polkuja sovelluksessa:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Missä se on?
Sovelluksesi tarvitsee kontin sijoittamaan polun tarjoamat sisällöt.
Tämä kontti on ng-view .
Ohje voidaan sisällyttää sovellukseen kolmella eri tavalla. ng-view Ohje:
Esimerkki
<div ng-view></div>
Esimerkki
<ng-view></ng-view>
Esimerkki
<div class="ng-view"></div>
Sovelluksessa voi olla vain yksi ng-view ohjeet, jotka toimivat kaikkien polun tarjoamien näkymien paikantimina.
$routeProvider
Käytä $routeProvider，voit määrittää, minkä sivun näytetään, kun käyttäjä napsauttaa linkkiä.
Esimerkki
määritellään $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"
});
});
sovelluksen config menetelmä määrittää $routeProvider。Suoritetaan sovelluksen lataamisen yhteydessä config työssä rekisteröidyttyjä menetelmiä.
ohjaimia
Käytä $routeProvider，voit myös määrittää ohjaimen jokaiselle "näkymälle".
Esimerkki
Lisää ohjain：
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 = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" ja "paris.htm" ovat tavallisia HTML-tiedostoja, joihin voit lisätä AngularJS-lausekkeita, kuten AngularJS-sovelluksen muiden HTML-osien tapaan.
Nämä tiedostot näyttävät tältä:
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>
Malli
Edellisessä esimerkissä käytimme $routeProvider.when Metodissa käytettiin templateUrl Ominaisuus.
Voit myös käyttää template Ominaisuus, joka mahdollistaa HTML:n suorittamisen suoraan ominaisuuden arvossa, ei sivun viittauksena.
Esimerkki
Kirjoita malli:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banaania</h1><p>Banaanit sisältävät noin 75% vettä.</p>"
})
.when("/tomato", {
template : "<h1>Tomattia</h1><p>Tomatit sisältävät noin 95% vettä.</p>"
});
});
otherwise-metodia
Edellisessä esimerkissä käytimme $routeProvider when-metodia.
Voit myös käyttää otherwise Metodi, joka tulee oletusreittiksi, kun muut kaikki reitit eivät vastaa.
Esimerkki
Jos ei ole klikattu "Banana"-linkkiä eikä "Tomato"-linkkiä, kerro heille:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banaania</h1><p>Banaanit sisältävät noin 75% vettä.</p>"
})
.when("/tomato", {
template : "<h1>Tomattia</h1><p>Tomatit sisältävät noin 95% vettä.</p>"
})
.otherwise({
template : "<h1>Ei mitään</h1><p>Mikään ei ole valittu</p>"
});
});
- Edellinen sivu AngularJS-animaatiot
- Seuraava sivu AngularJS-sovellukset
