記事概要
はじめてAngularJSに手を出してみた、という自分の備忘録。
前回の Webアプリの作り方（スタンドアロン、jQueryベース） のサンプルコードをAngularJSで書き直してみたので、そのアプローチ方法の違いを比較出来るかも、って話。
なお、AngularJSは下記サイトの「AngularJS入門」を読んだだけ、がほぼ全て。なので未だよく分かってない。ツッコミ歓迎。
http://www.tohoho-web.com/ex/angularjs.html
Webアプリの作成方針（※やってみたレベル）
- div要素でボタンなどのコントロールをレイアウト。
- レイアウトしたdiv要素に対して、AngularJSの属性
ng-アクション名を経由して、機能を実装（※１）。
基本的な枠組みは、jQueryの場合と同様に**「divでレイアウト→アクションを実装→とりあえずの保存はCookie利用」**で良いじゃないかと思っている。なので詳細は略。なお、AngularJS上でのCookieの容易な取り扱い方法は未調査（$cookiesを使うっぽい）。
「Kii Cloud」のようなクラウドDBサービス（でいいのかな？）への利用ハードルが低いようなので、保存は最初からそっちに行ったほうが良いかもしれない（※２）。
サンプルコード
サンプルコードを、前回のjQuery版 と同じ機能「文字数カウントとクリップボードへのコピー機能付きメモ帳」＆同じレイアウトで書いてみた。
Chrome 47で動作確認。
<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>
</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/