Routing AngularJS
bab ini kita akan memperkenalkan AngularJS rute.
AngularJS disalurkan melalui URL yang berbeda memungkinkan kita untuk mengakses konten yang berbeda.
Dengan AngularJS dapat melihat lebih dari satu halaman aplikasi web (web aplikasi halaman, SPA).
URL kami biasanya dalam bentukhttp://w3write.com/first/page, tetapi dalam-halaman aplikasi Web AngularJS oleh tanda # +dicapai, misalnya:
http://w3write.com/#/first http://w3write.com/#/second http://w3write.com/#/third
Ketika mengklik apapun di atas ketika kita memiliki link ke server silahkan mengatasi adalah sama (http://w3write.com/). Karena kandungan setelah tanda # di akhir permintaan layanan akan diabaikan oleh browser. Jadi kita perlu untuk mengimplementasikan fungsi klien # nanti dalam pelaksanaannya. AngularJS rute untuk membantu kami melalui# + tanda untuk membedakan halaman logis yang berbeda dan halaman terpisah terikat sesuai kontroler.
Pada grafik di atas, kita dapat melihat bahwa membuat dua URL: / ShowOrders dan / AddNewOrder. Setiap URL memiliki pandangan yang sesuai dan kontroler.
Berikutnya kita melihat contoh sederhana:
<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>
contoh analisis:
1, dimuat menerapkan routing yang js file: sudut-route.js.
2, berisi ngRoute modul sebagai modul tergantung modul aplikasi utama.
angular.module('routingDemoApp',['ngRoute'])3, menggunakan ngView instruksi.
<div ng-view></div>
konten HTML dalam div berdasarkan perubahan rute.
4, mengkonfigurasi $ routeProvider, AngularJS $ routeProvider digunakan untuk mendefinisikan aturan routing.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
config AngularJS fungsi modul yang digunakan untuk mengkonfigurasi aturan routing. Dengan menggunakan configAPI, kami meminta $ routeProvider disuntikkan ke fungsi konfigurasi dan penggunaan $ routeProvider.whenAPI kami untuk menentukan aturan routing kami.
$ RouteProvider memberikan kami ketika (jalan, objek) & sebaliknya (objek) fungsi mendefinisikan semua rute dalam urutan yang membutuhkan dua argumen:
- Parameter pertama adalah aturan URL biasa atau URL.
- Parameter kedua adalah obyek konfigurasi routing.
Route Pengaturan objek
rute AngularJS dapat dicapai melalui template yang berbeda.
Argumen pertama $ routeProvider.when fungsi adalah URL aturan biasa atau URL, konfigurasi parameter kedua rute.Routing Konfigurasi aturan sintaks objek adalah sebagai berikut:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Parameter Deskripsi:
Template:
Jika kita hanya perlu memasukkan konten HTML sederhana dalam ng-view, kemudian menggunakan parameter ini:
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
Jika kita hanya perlu memasukkan file HTML template di ng-view, kemudian menggunakan parameter ini:
$routeProvider.when('/computers', { templateUrl: 'views/computers', });Kode di atas akan mendapatkan pemandangan dari server / computers isi file ke dalam ng-view.
controller:
fungsi, string atau tipe array, fungsi kontrol dijalankan pada template saat ini, membuat lingkup baru.
controllerAs:
tipe string, menentukan alias untuk controller.
redirectTo:
Alamat redirection.
mengatasi:
Menentukan kontroler saat ini bergantung pada modul lain.
contoh
<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',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
</head>
<body ng-app="ngRouteExample" class="ng-scope">
<script type="text/ng-template" id="embedded.home">
<h1> Home </h1>
</script>
<script type="text/ng-template" id="embedded.about">
<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>
