6/18 Open Network Space でAngularJS Japan User Group管理人-金井さんによるAngularJAハンズオンがありましたので参加させて頂きました。内容は初心者向けのハンズオンで金井さんのライブコーディング&解説を行いつつ、それを見ながらコーディングを行うというものでした。ライブコーディングの内容をまとめます。
JavaScriptの実態に迫る AngularJSを選ぶ理由～ハンズオンで学ぶ、基礎からのコーディング手法～｜パソナテックのエンジニア仕事情報
Angularを動かす
Angularのモジュールは
AngularJS — Superheroic JavaScript MVW Framework
からダウンロードします（ちなみにですが、私はYEOMAN
Yeoman - Modern workflows for modern webapps
好きなのでgenerator-angularを使ってます）。AngularJSが実行されることを確認します。「ng-app」をまずは書くですが、AngularJS v1.2.16(anglar.js 1,271行目)の中を見ていくとそれ以外にもいいようです。サンプルでは一部「ng:app」を使ったりもしています。
function angularInit(element, bootstrap) {
var elements = [element],
appElement,
module,
names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/;
さて、コーティングに入ります。
<!doctype html>
<html class="no-js" ng-app>
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
{{ 5+2 }}
</body>
</html>
5+2が計算され7になっていることを確認してください。
入力した値をチェックする
ログイン画面のようなものを作りバリデーションチェックまでを実装します。
今回実装したのは
- 文字長のチェック
- 文字タイプのチェック
- 必須チェック
です。
<!doctype html>
<html class="no-js" ng-app>
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="bower_components/angular/angular.js"></script>
<style>
input.ng-invalid.ng-dirty {
border-color: #ff0000;
}
</style>
</head>
<body>
<form action="" name="demo" novalidate>
<input type="text" name="demoId" ng-model="id" ng-minlength="4" ng-maxlength="8" required class="ng-dirty">
<input type="password" name="demoPassword" ng-model="password" ng-pattern="/^[0-9]*$/" required class="ng-dirty">
<input type="submit" value="save" >
<p ng-show="demo.demoId.$invalid && demo.demoId.$dirty">値が正しくありません</p>
<p ng-show="demo.demoId.$error.minlength">4文字以下ですよ！</p>
<p ng-show="demo.demoId.$error.maxlength">8文字以上ですよ！</p>
<p ng-show="demo.demoPassword.$error.pattern">数字だけです！</p>
</form>
</body>
</html>
結果は以下のようになります。
デベロッパーツールを使うとより理解が深まります。入力した値に対して正常な場合は「ng-valid」という要素がグレーアウトの部分に見て取れると思います。エラーになるとこれが「ng-invalid」に変わります。
検索する
<!doctype html>
<html class="no-js" ng-app>
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<div ng-init="demoData = [
{name: 'kanai', age: 33},
{name: 'baka', age: 33},
{name: 'aho', age: 33},
{name: 'boke', age: 33}
]"></div>
<input type="text" ng-model="search">
<ul>
<li ng-repeat="data in demoData | limitTo:3 | filter: search">{{ data.name }} --- {{ data.age }}</li>
</ul>
</body>
</html>
最後に
JavaScriptを一行も書かずにここまでできるAngularJSは「すげー」の一言です。Javascriptフレームワークで最も注目される理由が理解できませんか？ということで、はじめての AngularJSでしたが途中チューターもやらさせて頂き楽しめました。
