私は最近、AngularjsとBackboneを見て、ノックアウトとEmberjsについて学びました。インターネット上で角度ルーターのデモを見ました。ちなみにそれを書き留めます。
コードコピーは次のとおりです。
<!----
demo_index.html
- >
<!doctype html>
<head>
<メタcharset = "utf-8">
<title>ルート</title>
</head> <br> //この重要なことは、IEと互換性があることです。あなたがそれがうまくいかないとわかった場合、つまりあなたをチートします、あなたは知っています
<body ng-app = "routeapp" id = "routeapp">
<h1>ルートデモインデックス</h1>
<スクリプトsrc = "http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"> </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"> </scrip>
<スクリプト>
var routeapp = angular.module( 'routeapp'、[]);
routeapp.config(['$ routeprovider'、function($ routeprovider){
$ routeprovider
.when( '/list'、{
templateurl: 'list.html'、
コントローラー:「RouteListCtl」
})
.when( '/list/:id'、{
templateurl: 'detail.html'、
コントローラー:「RouteDetailctl」
})
。さもないと({
Redirectto: '/list'
});
}]);
//コントローラ
routeapp.controller( 'routelistctl'、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> route <span style = "color:red;"> {{id}} </span>:detail.html </h3>
それがすべてのコードです、私はあなたがそれを好きになることを願っています。