読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

「JavaScriptの実態に迫る AngularJSを選ぶ理由 ~ハンズオンで学ぶ、基礎からのコーディング手法~」に参加しました

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になっていることを確認してください。

f:id:albatrosary:20140619105010p:plain

入力した値をチェックする

ログイン画面のようなものを作りバリデーションチェックまでを実装します。

今回実装したのは

  • 文字長のチェック
  • 文字タイプのチェック
  • 必須チェック

です。

<!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>

結果は以下のようになります。

f:id:albatrosary:20140619105504p:plain

f:id:albatrosary:20140619105242p:plain

f:id:albatrosary:20140619105417p:plain

デベロッパツールを使うとより理解が深まります。入力した値に対して正常な場合は「ng-valid」という要素がグレーアウトの部分に見て取れると思います。エラーになるとこれが「ng-invalid」に変わります。

f:id:albatrosary:20140619112226p:plain

f:id:albatrosary:20140619112240p:plain

検索する

<!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>

f:id:albatrosary:20140619105838p:plain

f:id:albatrosary:20140619105907p:plain

最後に

JavaScriptを一行も書かずにここまでできるAngularJSは「すげー」の一言です。Javascriptフレームワークで最も注目される理由が理解できませんか?ということで、はじめての AngularJSでしたが途中チューターもやらさせて頂き楽しめました。