لقد شاهدت 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> </viv>
<script src = "http: // localhost: 81/js/angular.min.js"> </script>
<script>
var routeapp = Angular.Module ('Routeapp' ، []) ؛
RouteApp.config (['$ routeprovider' ، function ($ routeprovider) {
$ Routeprovider
.
templateurl: 'list.html' ،
وحدة التحكم: 'rotelistctl'
})
.
TEMPLATEURL: 'DEALLE.HTML' ،
وحدة التحكم: 'Routedetailctl'
})
.خلاف ذلك({
إعادة التوجيه: '/قائمة'
}) ؛
}]) ؛
// وحدة التحكم
Routeapp.Controller ('Rotelistctl' ، function ($ scope) {
}) ؛
Routeapp.Controller ('Routedetailctl' ، function ($ scope ، $ routeparams) {
$ scope.id = $ routeparams.id ؛
}) ؛
</script>
</body>
</html>
//list.html
قم بتشغيل الرمز التالي
نسخة الكود كما يلي:
<hr/>
<h3> المسار: list.html </h3>
<ul>
<li ng-repeat = "id in [1 ، 2 ، 3]">
<a href = "#/list/{{id}}"> id {{id}} </a>
</li>
</ul>
//detail.html
قم بتشغيل الرمز التالي
نسخة الكود كما يلي:
<hr/>
<h3> المسار <span style = "color: red ؛"> {{id}} </span>: DEALLE.HTML </h3>
هذا هو كل الرمز ، آمل أن تتمكن من ذلك.