Angular JSを使ったので簡単にメモ
htmlとAngularJSの紐付け
index.html
<html ng-app="index">
<head>
<!-- import Framework -->
<title>テスト</title>
<script src="./FrameWork/Angular.min.js"></script>
</head>
<body>
...
</body>
</html>
index_controller.js
var idx = anduler.module("index",[]);
これで紐付けができる(なんとも明示的で良い)
第二引数のからの配列は色々な記事を見たところ以前のモジュールを引き継げるとかなんとか
次に要素の操作
index.html
<body>
<div ng-controller="hogehoge">{{hoge}}</div>
</body>
index_controller.js
var idx = anduler.module("index",[]);
idx.controller('hogehoge',function($scope){
$scope.hoge = "test";
});
これで実行すると{{hoge}}がtestに変わる
$scopeでng-controller="~"で定義した要素を取ってきているイメージ.{{}}の中身でhtmlの要素に簡単にアクセスできるので結構楽にかける．
今後の開発において多分タグの生成をJavaScriptに任してする可能性があると思ったからng-repeatまで使ってみた．
ng-repeatで回す時のデータは一次元配列にした．
index.html
<body>
<div ng-controller="hogehoge">
<div ng-repeat="hoge in hogehoge">
{{hoge.hoge}}
</div>
</div>
</body>
index_controller.js
var idx = anduler.module("index",[]);
idx.controller('hogehoge'function($scope){
$scope.hogehoge = [1,2,3,4,5];
});
これでやると1 2 3 4 5 が表示される
イメージはhtmlにhogehogeの名前をしたところに配列を渡す感じ
Anguler.jsを使って見て
既存だとdocument.getElementedById("id")を毎度要素を持ってくるときに書かないといけなかったが,$scope.で中身の要素にアクセスできるあたりすごく楽にかけると思った.(コードが冗長的になりにくそうだと思った)
後，ng-~で色々な指定ができるみたいだけど，あまりその辺は触ってないから今後触っていきたい.
指摘や質問大歓迎です.