AngularJS Routing
In diesem Kapitel werden wir AngularJS Route einzuführen.
AngularJS durch andere URL weitergeleitet ermöglicht es uns, unterschiedliche Inhalte zuzugreifen.
Durch AngularJS kann mehr als eine einzige Seite Webanwendungen (einzelne Seite Web-Anwendung, SPA) anzuzeigen.
Unsere URL ist in der Regel in Form vonhttp://w3big.com/first/page, aber in einer Single-Seite Webanwendungen AngularJS von # + Markeerreicht, zum Beispiel:
http://w3big.com/#/first http://w3big.com/#/second http://w3big.com/#/third
Wenn auf eine der oben klicken, wenn wir eine Verbindung zum Server haben, bitte Adresse gleich sind (http://w3big.com/). Da der Inhalt nach dem # Zeichen am Ende der Dienstanforderung wird vom Browser ignoriert. Also müssen wir die Client-Funktion des # später bei der Umsetzung zu implementieren. AngularJS Routen uns durch ein# + Marke zu helfen verschiedene logische Seite und einzelne Seiten an den entsprechenden Controller gebunden zu unterscheiden.
/ ShowOrders und / AddNewOrder: In der obigen Grafik, können wir das erstellt zwei URL zu sehen. Jede URL hat eine entsprechende Ansicht und Controller.
Als nächstes schauen wir uns ein einfaches Beispiel:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 本教程</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
Analyse Beispiele:
1, geladen Routing js Datei implementieren: Winkel route.js.
2, enthält ngRoute Modul als Hauptanwendungsmodul abhängig Modul.
angular.module('routingDemoApp',['ngRoute'])3, mit ngView Anweisung.
<div ng-view></div>
HTML-Inhalt innerhalb des div auf Routenänderungen basieren.
4 Konfigurieren $ routeProvider, AngularJS $ routeProvider verwendet Routing-Regeln zu definieren.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
config-Funktion AngularJS Modul wird verwendet, Routing-Regeln zu konfigurieren. Durch die Verwendung von configAPI, bitten wir $ routeProvider in unserer Konfiguration Funktion und Verwendung $ routeProvider.whenAPI injiziert unsere Routing-Regeln zu definieren.
$ RouteProvider geben Sie uns, wenn (path, Objekt) & ansonsten (Objekt) Funktion, um alle Routen in der Reihenfolge definiert, die zwei Argumente übernimmt:
- Der erste Parameter ist die Regeln der regulären URL oder URL.
- Der zweite Parameter ist die Routing-Konfigurationsobjekt.
Routeneinstellungen Objekt
AngularJS Route kann durch verschiedene Vorlagen erreicht werden.
Das erste Argument $ routeProvider.when Funktion ist eine regelmäßige Regel URL oder URL, die zweite Parameterkonfiguration einer Route.Routing-Konfiguration Objekt Syntaxregeln sind wie folgt:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Parameter Beschreibung:
Vorlage:
Wenn wir nur einen einfachen HTML-Inhalt in ng-Ansicht einfügen müssen, dann diesen Parameter verwenden:
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
Wenn wir nur die HTML-Template-Dateien im ng-Ansicht einfügen müssen, dann diesen Parameter verwenden:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });Der obige Code erhalten Ansichten vom Server / computers.html Dateiinhalt in den ng-Ansicht.
Controller:
Funktion, String oder Array-Typ, Controller-Funktion auf der aktuellen Vorlage ausgeführt wird, einen neuen Bereich erstellen.
controllerAs:
String-Typ, ein Alias für den Controller festlegen.
RedirectTo:
Adressumleitung.
beheben:
Gibt die aktuellen Controller auf anderen Modulen beruht.
Beispiele
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home.html">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About </h1>
</script>
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view="">
</div>
</div>
</body>
</html>