not good but great

プログラミング、アート、映画・本の感想について書きます。

汎用性の高いコードを学ぶためにAngularJSを始めました

AngularJS Javascript

AngularJSを始めた

もっと汎用性の高いコードを書きたい

Processing.jsとかPaper.jsとかjsにおける演出の部分ばかりを最近触れていました。また就職に伴い、jsをやってる人が周りに増えてきました。その印象ではbackboneやAngularJSなどのWebアプリケーションを制作するフレームワークを書いてきた人のほうが汎用性の高いプログラムを書く姿勢が強い気がします。個人で演出の部分ばかりやってると自分本位なコードを書いてしまいがちなので、もっと綺麗で汎用性の高いコードを書きたいと思い、AngularJSを始めました。

なぜAngularJS?

フレームワークはたくさんある中で、なぜAngularJSなのかというと、特にこれといった理由はないです。下のエントリを読んで、便利なフレームワークを体感したいと思い、AngularJSを選択しました。
新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js) - Qiita

・参考
AngularJS — Superheroic JavaScript MVW Framework
#01 AngularJSとは何か？ | AngularJS入門 - プログラミングならドットインストール

なんか書いてみる

<!DOCTYPE html>
<html lang="ja" ng-app>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
	</head>
	<body>
		<h1>AngularJSの練習</h1>
		<input type="text" ng-model="name">
		<p>あああこんちわ {{name}}</p>
	</body>
</html>

テキストボックスにテキストを入れるとnameにインタラクティブに表示されます。短いコードで書けますね。

ngはAngularのngです。ngがついてたらAngularJSってことです。

コントローラーの作成

var mainCtrl = function($scope){
	$scope.users = [
		{"name":"gozilla","score":43.2},
		{"name":"gamera","score":33},
		{"name":"ultraman","score":-1323.23},
	];
}

コントローラーを作ります。$scopeに自分で決められる?プロパティを設定し、必要なデータを形成していきます。

<body>
	<h1>AngularJSの練習</h1>
	<div ng-controller="mainCtrl">
		<p>{{users.length}} users</p>
		<ul>
			<li ng-repeat="user in users">
				{{user.name}}{{user.score}}
			</li>
		</ul>
	</div>
</body>

コントローラーをdivで定義します。そのdivなかでコントローラーで定義したデータが使えます。

for-in文のような書き方でループも簡単に記述できちゃいます。

フィルターを使う

<body>
	<h1>AngularJSの練習</h1>
	<div ng-controller="mainCtrl">
		<p>{{users.length}} users</p>
		<p>{{25 * 100 | number}}</p>
		<p>{{25 * 100 | currency}}</p>
		<ul>
			<li ng-repeat="user in users">
				{{user.name | uppercase}}{{user.score | number:4}}
			</li>
		</ul>
	</div>
</body>

データの後に「|」をつけてオプションを設定すると、データを様々な表記に変えてくれます。これをフィルター機能と呼んでいるようです。uppercaseで大文字にしたり、numberで下何桁まで表示するのか、currencyで通過の表記もできます。

ループでフィルター

var mainCtrl = function($scope){
	$scope.users = [
	{"name":"gozilla","score":43.2},
	{"name":"gamera","score":33},
	{"name":"ultraman","score":-1323.23},
	{"name":"baltan","score":58},
	{"name":"metolon","score":268},
	{"name":"king gidora","score":-54.67},
	];
}

データを増やします。

<li ng-repeat="user in users | orderBy:'score'">
	{{user.name}}{{user.score}}
</li>

score順に並べています。

クエリを検索

<div ng-controller="mainCtrl">
	<p><input type="text" ng-model="query.name"></p>
	<ul>
		<li ng-repeat="user in users | filter:query">
			{{user.name}}{{user.score}}
		</li>
	</ul>
</div>

テキストボックスのテキストからnameを指定し、filter機能を使ってデータから検索することができます。

ループで使える命令

f:id:naoyashiga:20140517215115p:plain

<ul>
	<li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'">
		{{$index+1}} {{$first}} {{$middle}} {{$last}}
		{{user.name}}{{user.score}}
	</li>
</ul>

$indexで行番号、$firstは最初の要素などいろいろな命令が揃っています。また「ng-class-even」で奇数要素にスタイルを当てることが出来ます。

.even{
	background:#ccc;
}

.odd{
	background:#ff3;
}

背景色を変えています。

コントローラーのネスト

f:id:naoyashiga:20140517223619p:plain

var userItemCtrl = function($scope){
	$scope.increment = function(){
		$scope.user.score++;
	}
}

コントローラーがネストされているとその子のコントローラーは、親のデータを継承できます。

<li ng-repeat="user in users" ng-controller="userItemCtrl"> 
	{{user.name}}{{user.score}}
	<button ng-click="increment()">+1</button>
</li>

「increment()」で増加することができます。

所感

AngularJSを使ってみて汎用性の高いコードを享受している感じがすごいあります。恩恵を受けているだけで、汎用性の高いコードを書けるのかはまた別の話の気がしてきました・・・・笑。