Webアプリ作りへ挑戦（スタンドアロン、AngularJSベース）

# 記事概要
はじめてAngularJSに手を出してみた、という自分の備忘録。
前回の [Webアプリの作り方（スタンドアロン、jQueryベース）](http://qiita.com/xingyanhuan/items/eeca2a8a95e72b636c52) のサンプルコードをAngularJSで書き直してみたので、そのアプローチ方法の違いを比較出来るかも、って話。

なお、AngularJSは下記サイトの「AngularJS入門」を読んだだけ、がほぼ全て。なので未だよく分かってない。ツッコミ歓迎。
http://www.tohoho-web.com/ex/angularjs.html


# Webアプリの作成方針（※やってみたレベル）
1. div要素でボタンなどのコントロールをレイアウト。
1. レイアウトしたdiv要素に対して、AngularJSの属性```ng-アクション名```を経由して、機能を実装（※１）。

基本的な枠組みは、[jQueryの場合](http://qiita.com/xingyanhuan/items/eeca2a8a95e72b636c52)と同様に**「divでレイアウト→アクションを実装→とりあえずの保存はCookie利用」**で良いじゃないかと思っている。なので詳細は略。なお、AngularJS上でのCookieの容易な取り扱い方法は未調査（```$cookies```を使うっぽい）。

「Kii Cloud」のようなクラウドDBサービス（でいいのかな？）への利用ハードルが低いようなので、保存は最初からそっちに行ったほうが良いかもしれない（※２）。



# サンプルコード
サンプルコードを、[前回のjQuery版](http://qiita.com/xingyanhuan/items/eeca2a8a95e72b636c52) と同じ機能「文字数カウントとクリップボードへのコピー機能付きメモ帳」＆同じレイアウトで書いてみた。
Chrome 47で動作確認。

```js:notepad_standalone_angular.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" ng-app="myApp"><!-- ここ、ng-app を追加忘れずに -->
<head>
	<title>メモ帳</title>

	<meta charset="UTF-8" />
	<meta name="viewport" id="id_viewport" content="width=device-width" >

	<meta http-equiv="Content-Style-Type" content="text/css">
	<style type="text/css">
		.a-click-replaced {
			text-decoration: none;
			border: none; 
		}
		.img-option-icon {
			width: 24px;
			height: 24px;
		}		
		
		.div-float {
			float: left;
		}
		.div-float-end {
			float: none;
			clear: both;
		}
	</style>

	<meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>

	<script language="JavaScript">
	<!--
		var app = angular.module("myApp", [] /* 依存モジュール（の配列）が空、であることを明示 */ );
		app.controller("myControll", ["$timeout", function($timeout) {
			// 参照：$timeout の使い方
			// http://tsudoi.org/weblog/?p=2332

			this.editText = "Hello World!";
			this.userNotice = " ";

			this._noticeAndFadeout = function( str ){
				var self = this; // 【FixMe】たぶんこれは、angularjs ではバッドノウハウかも？！
				this.userNotice = str;
				$timeout(function(){ // window.setTimeout() ではなく、こちらのWrapperを使う。でないと更新が反映されない。
					self.userNotice = ""; 
				}, 5000 );
			};

			// テキスト消去ボタン
			this.clearText = function() { 
				this.editText = ""; 
				this._noticeAndFadeout("メモを削除しました。");
			};

			// 全コピーボタン
			this.copyText = function() { 
				var elemTextArea = document.getElementById("id_notes");
				elemTextArea.select(); // 【FixMe】この、生のjavascriptメソッド呼ぶのも、たぶん不適切。
				document.execCommand('copy');
				this._noticeAndFadeout("クリップボードへコピーしました。");
			};
		}]);
	// -->
	</script>
</head>
<body>


<div class="base-area" ng-controller="myControll as myAltObj">
	<div style="width:100%;">
		<div class="div-float" style="margin-right: -80px; width:100%;">
			<form>
			<!-- テキストエリアにmarginが効かない（涙） -->
			<textarea ng-model="myAltObj.editText" id="id_notes" rows="14" cols="32" style="width: 75%;"></textarea>
			</form>
		</div>
		<div class="div-float" style="width:60px; padding: 10px; font-size:smaller;">
			<div ng-click="myAltObj.copyText()">
				<a href="javascript:void(0);" class="a-click-replaced   button">
				<!-- img タグなどでアイコンを適当に配置
					<img class="img-option-icon" src="./icon_copy.png"><br>
				 -->
				<span>全コピー</span>
				</a>
			</div>
			<br>
			<div ng-click="myAltObj.clearText()">
				<a href="javascript:void(0);" class="a-click-replaced">
				<span>消去</span>
				</a>
			</div>
			<br>
		</div>
		<div class="div-float-end"></div>
	</div>
	<div style="font-size: smaller;">
		合計文字数： {{myAltObj.editText.length}}
	</div>
	<div>
		<span style="font-size: smaller; background-color: #ffffaa;">{{myAltObj.userNotice}}</span> &nbsp;
	</div>

	<hr width="100%"></hr>
	<div style="color: #777777; font-size: smaller;">
		Javascript+CookieON Recommended (Operations: Chrome 47-) <br>
	</div>
</div>

</body>
</html>

```

# トライしてみての感想

初めてやってみたAngularJSの感想は、「DOM操作ならjQuery、各コントロールの値操作ならAngularJS」かな。

要は「一定フォーマットの情報を表示／更新する」って機能に向いているのがAngularJS、に思えた。定型。たぶん意外と、実際のWebアプリに求められるのも、そういうものが大半なので、AngularJSは人気あるのかもねー？

あ、あと、独特の記述方法でコーディングをある程度縛られるところ（C++と比較したときのJava、なイメージ）も好きな人は好きかも？。jQueryはなんでも出来るけど自由過ぎる、で嫌う面はありそう（不要な場面でもガンガンDOMを弄ってしまうなどの弊害）。

うん、もう少し触ってみたい（時間と機会があればー、ね）。


# 補足
※１：```ng-アクション```属性や、```angular.module()```や```app.controller()```の使い方に関する説明は省略。
　　　私もよく分かってないので（爆）。先に紹介した以下のURLなどを参照。
　　　http://www.tohoho-web.com/ex/angularjs.html　　　

※２：「Kii Cloud」は、下記のサイト「Webアプリをいまどきの手法で爆速開発した」で紹介されていた。
　　　http://www.kaoriya.net/blog/2014/01/31/