Saya telah menyaksikan AngularJs dan tulang punggung akhir -akhir ini, dan belajar tentang KO dan Emberjs. Saya baru saja melihat demo router sudut di internet. Sekarang saya akan menuliskannya.
Salinan kode adalah sebagai berikut:
<! ----
Demo_index.html
->
<! Doctype html>
<head>
<meta charset = "UTF-8">
<title> rute </iteme>
</head> <br> // Hal penting ini adalah kompatibel dengan IE. Jika Anda merasa tidak berhasil, IE Cheats You, Anda tahu
<body ng-app = "routeApp" id = "routeApp">
<h1> indeks demo rute </h1>
<skrip src = "http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"> </script>
<skrip src = "http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"> </script>
<Div ng-view> </div>
<Script src = "http: // localhost: 81/js/angular.min.js"> </script>
<script>
var routeApp = angular.module ('routeApp', []);
routeApp.config (['$ routeProvider', function ($ routeProvider) {
$ routeProvider
.when ('/list', {
TemplateUrl: 'list.html',
Pengontrol: 'RouteListctl'
})
.shen ('/list/: id', {
TemplateUrl: 'Detail.html',
Pengontrol: 'Routedetailctl'
})
.jika tidak({
Redirectto: '/Daftar'
});
}]);
// pengontrol
routeApp.controller ('routeListctl', function ($ scope) {
});
routeApp.controller ('routedetailctl', function ($ scope, $ routeParams) {
$ scope.id = $ routeParams.id;
});
</script>
</body>
</html>
//list.html
Jalankan kode berikut
Salinan kode adalah sebagai berikut:
<hr/>
<h3> rute: list.html </h3>
<ul>
<li ng-repeat = "id dalam [1, 2, 3]">
<a href = "#/list/{{id}}"> id {{id}} </a>
</li>
</ul>
//detail.html
Jalankan kode berikut
Salinan kode adalah sebagai berikut:
<hr/>
<h3> rute <span style = "color: red;"> {{id}} </span>: detail.html </h3>
Itu semua kodenya, saya harap Anda bisa menyukainya.