prémisse
Tout d'abord, vous devez introduire une route angulaire et angulaire sur la page. Notez que vous devez introduire angulaire avant la route angulaire.
<script src = "../../ bower_components / angular / angular.js"> </ script>
<script src = "../../ bower_components / angular-route / angular-route.js"> </ script>
Cela est principalement dû au fait que angular-rote.js doit passer dans la fenêtre.
(fonction (fenêtre, angulaire, indéfini) {'utiliser strict'; ... ngOUTEModule.Directive ('ngView', ngViewFactory); ...}) (Window, Window.angular);Vous pouvez le télécharger sur le site officiel ou l'installer à l'aide de Bower.
expliquer
La fonction de routage est implémentée par le service RouteProvider et Ng-View. Ng-View équivaut à fournir le point de montage du modèle de page. Lors du changement de l'URL pour le saut, différents modèles de page seront placés à l'emplacement de NG-View; Ensuite, RouteProvider est utilisé pour configurer le mappage d'itinéraire.
Il existe deux méthodes en général:
quand (): configurer le chemin et les paramètres;
Sinon: configurez d'autres sauts de chemin, vous pouvez le considérer comme par défaut.
Le deuxième paramètre de quand:
Contrôleur: la fonction du contrôleur ou le nom du chemin correspondant
Controlleras: Donnez au contrôleur un nom d'alias
modèle: le modèle de page correspondant au chemin apparaîtra à Ng-View, tel que "<div> xxxx </div>"
templateUrl: le chemin correspondant au modèle, tel que "src / xxx.html"
Résolve: Ce paramètre se concentre sur le fait que cette propriété liera les services ou les valeurs au contrôleur lié au routage sous la forme d'un objet de paire de valeurs clés. Ensuite, la valeur du résultat d'exécution ou la référence de service correspondante est injectée dans le contrôleur. Si Resolve est un objet Promise, il attendra qu'il s'exécute avec succès avant qu'il ne soit injecté dans le contrôleur. À l'heure actuelle, le contrôleur attendra l'exécution qui résulte en résolution.
Pour des exemples détaillés, veuillez vous référer aux exemples suivants.
Redirectto: Adresse de redirection
Reloadonsearch: Définissez si le modèle correspondant ne sera chargé que lorsque l'adresse est modifiée; Ni la recherche ni les paramètres ne seront chargés.
CaseInSenSitiveMatch: le chemin est sensible à la casse
Il existe plusieurs événements couramment utilisés pour le routage:
$ Routechangestart: Cet événement sera déclenché avant que l'itinéraire ne saute
$ RoutechangeSuccess: Cet événement est déclenché après le succès du saut d'itinéraire
$ RoutechangeError: cet événement est licencié après l'échec de l'échec de la route
utiliser
Dans la page, écrivez le lien de bouton vers le saut d'URL et la balise NG-View
<div ng-controlller = "myctrl"> <ul> <li> <a href = "# / a"> cliquez sur un </a> </li> <li> <a href = "# / b"> cliquez sur b </a> </li> </ul> <ng-view>
Parmi eux, Ng-View peut être considéré comme un élément ou une étiquette, etc.
Configurations connexes qui doivent être définies dans JavaScript
<script type = "text / javascript"> angular.module ("myApp", ["ngoute"]) .Controller ("acontroller", fonction ($ scope, $ itiné .Controller ("myctrl", fonction ($ scope, $ emplacement) {$ scope. $ on ("$ ViewContentloaded", function () {console.log ("ng-view contenu chargé!");}); $ scope. $ on ("$ routechangestart", fonction (événement, prochain) {//event.preventDefault (); Console.log ("Route Changement Start!");}); }) .config (function ($ RouteProvider, $ locationprovider) {$ RouteProvider .When ('/ a', {templateUrl: 'a.html', contrôleur: 'acontroller'}) .when ('/ b', {templateUrl: 'b.html', contrôleur: 'bcontoller', résoudre: Delay: $ q, $ timeout) {var retard = $ q.defer (); $ timeout (delay.resolve, 3000); </cript>Dans le code ci-dessus, la résolution du chemin / b est associée à une méthode de retard. Cette méthode renvoie l'objet Promise et ne renverra le résultat qu'après 3 secondes. Par conséquent, la page B ne se chargera pas avec succès après 3 secondes.
Deux HTML supplémentaires sont nécessaires:
a.html:
<div ng-controller = "acontroller" style = "height: 500px; largeur: 100%; fond-couleur: vert;"> {{bonjour}} </div>
Et b.html:
<div ng-controller = "bController" style = "height: 2500px; largeur: 100%; fond-couleur: bleu;"> {{bonjour}} </div>
De cette façon, le saut d'itinéraire peut être atteint.
Tous les codes peuvent être référencés:
<html ng -pp = "MyApp"> <éad- head> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "../../ bower_components / angular / angular.js"> </ script> <script src = "../../ bower_components / angular-route / angular-route.js"> </ script> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "# / a"> cliquez sur un </a> <ng-view> </ ng-view> <! - <div ng-view> </div> -> </div> <script type = "text / javascrip .Controller ("BController", fonction ($ scope) {$ scope.hello = "Hello, b!";}) .Controller ("MyCtrl", fonction ($ SCOPE, $ LANCE) {$ SCOPE. $ on ("$ ViewContented", function () {console.log ("ng-vue contenu chargé!");});); $ scope. $ on ("$ RouteChangeStart", fonction (événement, suivant, courant) {//event.preventDefault (); // Annuler Url Change Console.log ("Route Change Start!");});}); }) .config (fonction ($ RouteProvider, $ locationprovider) {$ RouteProvider .When ('/ a', {templateUrl: 'a.html', contrôleur: 'acontroller'}) .when ('/ b', {templateUrl: 'b.html', contrôleur: 'bcontoller', résoudre: Delay: $ q, $ timeout) {var retard = $ q.defer (); $ timeout (delay.resolve, 3000); </cript> </ body> </html>Ce qui précède est l'information triant les informations de routage angularjs ng-routier. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!