ฉันได้ดู AngularJs และกระดูกสันหลังในทุกวันนี้และฉันได้เรียนรู้เกี่ยวกับความล้มเหลวและ Emberjs ฉันเพิ่งเห็นการสาธิตของเราเตอร์เชิงมุมบนอินเทอร์เน็ต ตอนนี้ฉันจะเขียนมันลงไป
การคัดลอกรหัสมีดังนี้:
-
demo_index.html
-
<! doctype html>
<head>
<meta charset = "utf-8">
<title> เส้นทาง </title>
</head> <br> // สิ่งสำคัญนี้คือการเข้ากันได้กับ IE หากคุณพบว่ามันไม่ได้ผลเช่นการโกงคุณคุณก็รู้
<body ng-app = "routeapp" id = "routeapp
<h1> ดัชนีการสาธิตเส้นทาง </h1>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"> </script>
<script 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', ฟังก์ชั่น ($ routeProvider) {
$ RouteProvider
. เมื่อ ('/list', {
templateurl: 'list.html',
คอนโทรลเลอร์: 'routelistctl'
-
. เมื่อ ('/list/: id', {
templateurl: 'detail.html',
คอนโทรลเลอร์: 'RouteDetailctl'
-
.มิฉะนั้น({
เปลี่ยนเส้นทางไป: '/รายการ'
-
-
// คอนโทรลเลอร์
routeapp.controller ('routelistctl', ฟังก์ชั่น ($ scope) {
-
routeapp.controller ('routedetailctl', ฟังก์ชั่น ($ scope, $ routeparams) {
$ scope.id = $ routeparams.id;
-
</script>
</body>
</html>
//list.html
เรียกใช้รหัสต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<HR/>
<h3> เส้นทาง: list.html </h3>
<ul>
<li ng-repeat = "id ใน [1, 2, 3]">
<a href = "#/list/{{id}}"> id {{id}} </a>
</li>
</ul>
//detail.html
เรียกใช้รหัสต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<HR/>
<H3> เส้นทาง <span style = "สี: สีแดง;"> {{id}} </span>: detail.html </h3>
นั่นคือรหัสทั้งหมดฉันหวังว่าคุณจะชอบ