AngularJS Routing
In questo capitolo saranno presentati percorso AngularJS.
AngularJS instradate tramite diversi URL ci permette di accesso al contenuto diverso.
Con AngularJS possono visualizzare più di una singola pagina di applicazioni web (applicazioni web singola pagina, SPA).
Il nostro URL è in genere sotto forma dihttp://w3big.com/first/page, ma in una singola pagina applicazioni Web AngularJS per marca # +raggiunto, ad esempio:
http://w3big.com/#/first http://w3big.com/#/second http://w3big.com/#/third
Cliccando su una di queste quando abbiamo un collegamento al server di indirizzi si prega sono gli stessi (http://w3big.com/). Poiché il contenuto dopo il segno # alla fine della richiesta di servizio sarà ignorato dal browser. Quindi abbiamo bisogno di implementare la funzione client del # avanti in attuazione. AngularJS percorsi per aiutarci attraverso un+ segno # distinguere diversi pagina logica e pagine separate legate al controller corrispondente.
Nel grafico qui sopra, possiamo vedere che ha creato due URL: / ShowOrders e / AddNewOrder. Ogni URL ha una corrispondente vista e controllore.
Prossimo guardiamo un semplice esempio:
<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>
Esempi di analisi:
1, caricato implementare il routing del file js: angolare route.js.
2, contiene modulo ngRoute come modulo di carico del modulo principale.
angular.module('routingDemoApp',['ngRoute'])3, usando l'istruzione ngView.
<div ng-view></div>
contenuto HTML all'interno del div in base a cambiamenti di rotta.
4, configurare $ routeProvider, AngularJS $ routeProvider utilizzato per definire regole di routing.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
config modulo AngularJS funzione permette di configurare le regole di routing. Utilizzando configAPI, chiediamo che $ routeProvider iniettato nella nostra funzione di configurazione e l'uso $ routeProvider.whenAPI per definire le nostre regole di routing.
$ RouteProvider ci forniscono quando (percorso, oggetto) e altro (oggetto) funzione definisce tutte le rotte in modo che accetta due argomenti:
- Il primo parametro è le regole di URL regolare o URL.
- Il secondo parametro è l'oggetto di configurazione di routing.
oggetto Impostazioni del percorso
AngularJS percorso può essere raggiunto attraverso diversi modelli.
La funzione $ routeProvider.when primo argomento è un URL regola regolare o un URL, il secondo la configurazione dei parametri di un percorso.Configurazione di routing regole di sintassi oggetto sono le seguenti:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Descrizione Parametro:
modello:
Se abbiamo solo bisogno di inserire un semplice contenuto HTML in ng-view, quindi utilizzare questo parametro:
.when('/computers',{template:'这是电脑分类页面'})TemplateURL:
Se abbiamo solo bisogno di inserire i file modello HTML nella ng-view, quindi utilizzare questo parametro:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });Il codice qui sopra ottenere viste dal contenuto di file server / computers.html nella ng-view.
controllore:
la funzione, stringa o tipo di matrice, la funzione di controllo viene eseguito sul modello corrente, creare un nuovo ambito.
controllerAs:
tipo di stringa, specificare un alias per il controller.
RedirectTo:
Indirizzo reindirizzamento.
risolvere:
Specifica il regolatore di corrente si basa su altri moduli.
Esempi
<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>