最近Angularjsに魅せられてます。
めっちゃ楽しいです
というわけで、Angularjsの紹介です
以下に特徴を上げます。間違っていたらすみません。
- Googleが作った、MVCのフレームワーク
- MVCフレームワーク・・・例えば、backbone.jsとかですと、viewとcontrollerがごちゃまぜになってしまい、Collectionの一要素としてmodelを定義するなど、決してわかりやすいとは言えません。また、backboneの場合、jqueryなどのフレームワークと組み合わせないと、結局余り使えない
- Viewにあたるのが、テンプレートファイルになるので、RubyやPHPなどサーバサイドのフレームワークを使う人にとってもわかりやすい仕組みになっている
- DOM要素の取得がjqueryより簡単（らしい。）
- jqueryで出来たことは、多分こいつで書けるっぽい
ここのページの紹介文がわかりやすいかもです
http://blog.livedoor.jp/sasata299/archives/51966228.html
あとは公式のサンプル
https://docs.angularjs.org/tutorial/step_03
で、今回何をしたかって言うと、
http://www.buildinsider.net/web/bookjslib111/86
このbackbone.jsのサンプルを、全部Angularjsで作り直してみました
以下がこのソースコード
'use strict';
/* Controllers */
var gistApp = angular.module('gistApp', []);
gistApp.controller('GistListCtrl', function($scope, $http) {
console.log($scope.query);
//ng-modelの値が変化するたびに呼ばれる
$scope.onChange = function () {
$http({
method:'get',
params:'callback=json',
url:'https://api.github.com/users/'+$scope.query+'/gists',
responseType:"json"
}
).success(function(response) {
//console.log(response.data);
//console.log(response);
$scope.gists = response;
});
};
});
<!DOCTYPE html>
<html ng-app="gistApp">
<head>
<meta charset="UTF-8" />
<title>Angular.jsを用いたGist検索サンプル</title>
<!-- Modelクラスをインポート -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script>
<!-- Viewクラスをインポート -->
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-controller="GistListCtrl">
<!-- Viewの定義 -->
<div id="gistapp">
<header>
<h1>Gist 検索</h1>
</header>
<section id="condition">
ユーザ:
<input ng-model="query" ng-change="onChange()" >
</section>
<section id="result" >
<ul id="gist-list">
<li ng-repeat="gist in gists track by $index">
<a href="{{gist.html_url}}" target="_blank">{{gist.id}} : {{gist.description}}</a>
</li>
</ul>
</section>
</div>
</body>
</html>
こんだけです。backbone使うより圧倒的にスッキリしてます。
- チュートリアルを見てもらうとわかるのですが、チュートリアルはjsonに対して、ng-modelで取得したものを検索かけるのですが、今回はサーバ検索時にng-modelで取得した値が必要なため、チュートリアルとは違った実装をしています
- ng-repeatでループ処理してます
- 基本扱うデータはJSON形式です。
- ng-changeはng-modelの値が変わるたびに呼ばれています。(keyup,keydown,keypressに近い)
githubにソース上げてあります
https://github.com/shiratsu/backbone_sample
（元々backboneを学んでる過程で出てきたものなので、backboneと混じってます。両者を比較して参考にしてみてください）