LotosLabo

プログラミング技術とか気になった情報を載せていきます

AngularJSについて

f:id:lo25131:20140401221041p:plain

AngularJSとは

Google等によって開発されているオープンソースJavaScriptフレームワークです。
主にウェブアプリケーションの開発にMVCフレームークを取り入れることを目的としています。


開発環境

こちらよりインストールすることが出来ますが、今回はCDNを使っていきます。
http://angularjs.org/

最新バージョンはこちらです。
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js


では型となるものを作成していきましょう。

index.html

<!doctype html>
<html lang="ja" ng-app>
<head>
	<meta charset="UTF-8">
	<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">     </script>
</head>
<body>

</body>
</html>



html lang="ja" の後に ng-appというのを付けます。
これに追加していく感じでやっていきます。
なお、スクリプトは今回はheadに配置します。


AngularJSを始める


MVCの手順で作成していきます。


Modelの作成

<input type="text" ng-model="name">
<p>こんにちは{{name}}</p>



これはどういうプログラムかというと、

f:id:lo25131:20140401232203g:plain

テキストボックスに入力した文字がそのままリアルタイムで反映されるものです。
これ見た時、こんなことも出来るんやなぁと感動してしまったw

ちなみにこういうものも書けます。

<p>5×3は{{5 * 3}}</p>

5x3は15 となります。

コントローラーの作成

コントローラーは他のプログラムに書いて作ります。
今回は、myscript.jsというのを作ります。

var mainCtrl = function($scope) {
	$scope.users = [
	{"name": "lotos", "score":2.3},
	{"name": "tanaka", "score":3.5},
	{"name": "suzuki", "score":5.2}
	];
}



中身はとりあえずこのように書いておきます。
$scopeを使うことでhtmlでも扱えるようになります。
usersという変数の中に配列を作成しておきます。

そしてこれを使うために先ほどのindex.htmlに以下のプログラムを追加します。

<script src="myscript.js"></script>
<body>
<div ng-controller="mainCtrl">
<p>{{users.length}} users</p>
</div>
</body>



ng-controllerでコントローラーを指定しています。
次の行は先ほどのコントローラの数を表しています。

表示するとこんなかんじです。

f:id:lo25131:20140401233856j:plain

3つあるので 3 users です。


また更にこのようにすることでユーザー名と、スコアが表示されるようになります。

<div ng-controller="mainCtrl">
		<p>{{users.length}} users</p>
	<ul>
		<li ng-repeat="user in users">
		{{user.name}} {{user.score}}
	</li>
	</ul>
	</div>



これはmyscriptで指定した名前とスコアをなくなるまで表示するという処理になります。

f:id:lo25131:20140401234127j:plain


フィルターを使う

次にフィルターというものを使っていきます。
例えばコントローラーから取得した値の表示形式を変えるということが出来ます。

大文字にする

uppercase

{{user.name|uppercase}}



このようにすることで、ユーザーネームのみが大文字になります。

また、lowercase にすることで小文字になります。


数字を下四桁まで表示する

number

{{user.score|number:4}}



このように指定することで桁数を変えられます。

桁ごとにカンマを入れる

<p>{{25 * 500|number}}</p>



12,500

またnumberではカンマを入れることも出来ます。


$マークを入れる

currency

<p>{{25 * 500|currency}}</p>



$12500

またこれはオプションとしてマークを変えることも出来ます。
たとえば、¥は :"¥" と後ろに追加することで変えられます。


ng-repeatのフィルター

先ほどちょこっと使ったng-repeatのフィルター機能を紹介していきます。

制限表示

limitTo:数値

<li ng-repeat="user in users|limitTo:5">



件数を5件に制限します。

昇順に並び替え

orderBy:

<li ng-repeat="user in users|orderBy:'score'>



スコアを低い数字から並び替えます。


降順に並び替え

orderBy:-

<li ng-repeat="user in users|orderBy:'-score'>



スコアを高い数字から並び替えます。
「-」を付けます

またフィルターは | で繋げられます。


リアルタイムで結果を絞る

filter:query

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



先ほどのデータを使って結果を絞っていきます。

f:id:lo25131:20140402000757g:plain


ループで使う命令

要素の番号を取得

{{$index}}

例:

{{$index}} {{user.name}} {{user.score}}



0 lotos 2.3

となります。しかし最初が0なので使いにくいのでこれに +1して使うのが実用的です。
{{$index + 1}}

要素の順番を取得

{{$first}} {{$middle}} {{$last}}

これで、最初か真ん中か最後かを判断できます。
これはtrueかfalseで判断されます。

例:

{{$index}} {{$first}} {{$middle}} {{$last}} {{user.name}} {{user.score}}
||>

<br>
こんなかんじになります。


* コントローラーで使うイベント

スコアの隣にボタンを表示し、クリックでスコアを1ずつ足していく処理をします。

<b>myscript.js</b>
>||
var mainCtrl = function($scope) {
	$scope.users = [
	{"name": "lotos", "score":2.3},
	{"name": "tanaka", "score":3.5},
	{"name": "suzuki", "score":5.2}
	];
}

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



userItemCtrlというのを追加しました。
こちらも$scopeというのを使ってscoreをインクリメントしていきます。

index.html

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



ng-repeatのところにコントローラ名を追加しました。
また、ボタンを追加し、イベントで先ほどのインクリメントを指定

f:id:lo25131:20140402002936g:plain

validate機能を使ったフォーム

validate機能を使ってテキストボックスの文字をエラーチェックします。

index.html

<div ng-controller="mainCtrl">
	<form novalidate name="myForm" ng-submit="addUser()">
	<p>Name:<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
	<span ng-show="myForm.name.$error.required">入力してください</span>
	<span ng-show="myForm.name.$error.minlength">短すぎます</span>
	<span ng-show="myForm.name.$error.maxlength">長すぎます</span>
	</p>
</form>
{{user.name}}
</div>


myscript.js

var mainCtrl = function($scope) {
	$scope.addUser = function() {
	}
}



まずindex.htmlの方を説明していきます。
まずformのところで、novalidateと指定します。
これはhtml5に付いているvalidate機能を切ってangularのvalidate機能を使うという意味です。

次にvalidate機能です。
テキストボックスの方に、モデル「user.name」を作成しました。そして空の時、最小文字数、最大文字数を指定します。今回は最小は5文字、最大は8文字になります。
そしてそれぞれ表示する文字を追加します。

f:id:lo25131:20140402010526g:plain
また、{{user.name}}の部分を、

{{user|json}}
とすることで、

{
  "name": "aaaaaa"
}



こんなかんじで表示されます。いわゆるデバック機能です。

簡単なフォームの作成


様々なフォーム部品を使ってフォームを作成しました。

<body>
	<h1>AngulaerJS</h1>
	<div ng-controller="mainCtrl">
	<form novalidate name="myForm" ng-submit="addUser()">
	<p>Name:<input type="text" name="name" ng-model="user.name" 
              required ng-minlength="5" ng-maxlength="8">
	<span ng-show="myForm.name.$error.required">入力してください</span>
	<span ng-show="myForm.name.$error.minlength">短すぎます</span>
	<span ng-show="myForm.name.$error.maxlength">長すぎます</span>
	</p>
	<p>Score:
	<input type="number" name="score" ng-model="user.score">
	</p>
	<p>Email:
	<input type="email" name="email" ng-model="user.email">
	<span ng-show="myForm.email.$error.email">Not valid email</span>
	</p>
	<p>Web:
	<input type="url" name="url" ng-model="user.url">
	<span ng-show="myForm.url.$error.url">Not valid url</span>
	</p>
	<p>18+:<input type="checkbox" ng-model="user.adult" ng-true-value-"adult"
                               ng-false-value-"child"></p>
	<p>Phone:
	<input type="radio" ng-model="user.phone" value="iPhone">iPhone
	<input type="radio" ng-model="user.phone" value="Android">Android
	</p>
	<p>Memo:
	<textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
	</p>
	</form>
	<p><b>お名前:</b>   {{user.name}}<br>
	<b>点数:</b>  {{user.score}}<br>
	<b>Eメール:</b>   {{user.email}}<br>
	<b>Webサイト:</b>   {{user.url}}<br>
	<b>18歳以上:</b>  {{user.adult}}<br>
	<b>スマートフォンの機種:</b>  {{user.phone}}<br>
	<b>メモ:</b>   {{user.memo}}<br>
</div>
</body>



今回はjavascriptファイルは変更していません。
それぞれ上から、名前、スコア、Eメール、URL、チェックボックスラジオボタン、テキストエリアになっています。
なお、それぞれの説明は今回はしません。

f:id:lo25131:20140402015409g:plain