CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mckee

AngularJS勉強会レポート ng-mtg#2

by Mckee on

今回は、AngularJS勉強会に参加してまいりました。
AngularJSはJavaScriptのMVCフレームワークの一つです。

今回の勉強会は「今回の勉強会では AngularJS の初学者を対象とした勉強会とし、
AngularJS の基礎的な部分を中心に紹介をしていきます。」という趣旨のもと行われました。

それでは、以下レポートです。

公式サイト:http://angularjs.org/
コミュニティ:https://groups.google.com/forum/#!forum/angularjs-jp

内容

前半 講演者:金井 健一(フリーランス)
後半 講演者:吉田 徹生(NHN Japan)

AngularJS入門 金井健一さん

about AngularJS

Googleとコミュニティによって開発されているJavaScriptによるMVCフレームワークで、
MITライセンスのフリーウェアです。
birch bay washington web cams
2012年6月にバージョン1.0.0がリリースされたということで、間もなく1周年です。

主な特徴

・双方向バインディング
・テンプレートとしてのHTML
・再利用可能なコンポーネント
・ビューとルーティング
・テストとテストのしやすさ

得意なこと

・CRUD系のアプリケーション
・管理画面、マイページ
・1ページで完結するアプリケーション

苦手なこと

・モバイル向けアプリケーション
・ゲームなどで使うグラフィック系、エフェクト系
Bombermine

動かしてみる

AngularJSの記法では、下記のように「ng-○○」のような属性をHTMLの要素に追加します。

</p>
<div ng-app="">

それでは、バリデータでエラーとなってしまうことが気になる方もいらっしゃるかもしれません。
そういった場合には、「data-ng-○○」のように独自テータ属性としてしまうことで回避できるようです。

</p>
<div data-ng-app="">

ほかにも下記のような書き方が存在しているようです。

</p>
<div ng-app="">
<div ng:app="">
<div x-ng-app="">

下記の機能について、説明とデモがありました。

○Event
○Filter
○Form Validation
○directive
・独自タグ
・独自属性
・独自クラス
・コメントもコンポーネント化できる
コメントしか無いサイト作れる!

○プラグイン
AngularUI
Angularは単体ではUIはほぼない
Calendarのクオリティ高すぎ
・UI Bootstrap
・ANGULAR MODULES

動かしてみた

詳しい説明は、他のサイトに任せるとして、
ドットインストールを見ながら試してみたものを下記に用意しました。
入力に対して、即座にバリデーションや入力状況に応じた処理が実行されます。
AngularJS サンプル

▼HTML

<br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
     <meta charset="UTF-8"></p>
<link rel="stylesheet" href="css/style.css">
     <script src="js/angular.js"></script><br />
     <script src="js/myscript.js"></script></p>
<style>
          .even {
               color:#0000FF;
          }
     </style>
<p></head><br />
<body></p>
<div ng-app>
<div ng-controller="mainCtrl">
<form action="#" name="myForm" novalidate>
<p>{{today|date:'yyyy-MM-dd'}}</p>
<h1>Hello {{yourName}}!</h1>
<table>
<tr>
<th><label>Name:</label></th>
<td><input type="text" ng-model="yourName" placeholder="Enter a name here"></td>
</tr>
</table>
<table>
<tr>
<th>Refine search:</th>
<td><input type="text" ng-model="query"></td>
</tr>
<tr>
<th>Result:</th>
<td>
<ul>
<li ng-repeat="user in users|limitTo:6|orderBy:'-score'|filter:query" ng-class-even="'even'" ng-controller="userItemCtrl">
                                             {{$index + 1}} : {{user.name|uppercase}} : {{user.score|number:4}}<br />
                       <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://totalcooling.pt/gay-interracial-dating-sites-q291/">too many fish dating site</a>                        <button ng-click="increment()">+1</button>
                                        </li>
</ul>
</td>
</tr>
</table>
<table>
<tr>
<th>Name:</th>
<td><input type="text" name="name" value="add" ng-model="user.name" required ng-minlength="5" ng-maxlength="8"><br />
                              <span class="error" ng-show="myForm.name.$error.required">Required</span><br />
                              <span class="error" ng-show="myForm.name.$error.minlength">Too short</span><br />
                              <span class="error" ng-show="myForm.name.$error.maxlength">Too long</span></td>
</tr>
<tr>
<th>Color:</th>
<td>
<select ng-model="user.color" ng-options="'label:'+color for color in ['red','blue','pink']" ng-init="user.color='red'"></select>
</td>
</tr>
<tr>
<th>18+:</th>
<td><input type="checkbox" ng-model="user.adult" ng-true-value="adult" ng-false-value="child"></td>
</tr>
<tr>
<th>Phone:</th>
<td><input type="radio" id="phone1" name="phone" ng-model="user.phone" value="iPhone"><label for="phone1">iPhone</label><input type="radio"name="phone" id="phone2" ng-model="user.phone" value="Android"><label for="phone2">Android</label></td>
</tr>
<tr>
<th>Memo:</th>
<td><textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}</td>
</tr>
<tr>
<th>Score:</th>
<td><input type="number" name="score" ng-model="user.score"></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="email" name="email" ng-model="user.email"><br />
                              <span class="error" ng-show="myForm.email.$error.email">Not valid email</span></td>
</tr>
<tr>
<th>URL:</th>
<td><input type="url" name="url" ng-model="user.url"><br />
                       <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://simplementgen.com/free-movie-sites-of-interratial-sex-h7qj/">http://simplementgen.com/free-movie-sites-of-interratial-sex-h7qj/</a>         <span class="error" ng-show="myForm.url.$error.url">Not valid URL</span></td>
</tr>
<tr>
<th>Confirm:</th>
<td>
<pre>{{user|json}}</pre>
</td>
</tr>
</table></form>
</p></div>
</p></div>
<p></body><br />
</html><br />

▼JavaScript

<br />
var mainCtrl, userItemCtrl;</p>
<p>mainCtrl = function($scope) {<br />
  $scope.users = [<br />
    {<br />
      "name": "yamada",<br />
      "score": 11.22<br />
    }, {<br />
    <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://rayspicksnyc.com/free-mature-casual-sex-pix-jvk">free mature casual sex pix</a>    "name": "sato",<br />
      "score": 33.22234<br />
    }, {<br />
      "name": "suzuki",<br />
      "score": 53.22<br />
    }, {<br />
      "name": "takahashi",<br />
      "score": 2343.22<br />
    }, {<br />
      "name": "tanaka",<br />
      "score": 1233.22432<br />
    }<br />
  ];<br />
  $scope.today = new Date();<br />
  $scope.addUser = function() {};<br />
};</p>
<p>userItemCtrl = function($scope) {<br />
  $scope.increment = function() {<br />
    $scope.user.score++;<br />
  };<br />
};<br />

ほんの触りの部分ではありますが、その機能の片鱗を感じることができました。
双方向バインディングがとても良いですね。「UI での変更をモデルに、モデルでの変更を UI に、
自動的に反映します。」というAngularJSの特徴の一つだけあって、
データを受け渡しの処理をほとんど記述せずとも、ある程度動くので、非常に軽快に作れます。
バリデーションも充実していて扱いやすいです。入力値のチェックにもちろん正規表現も使えます。
入力によって即時に柔軟に動作を変更できます。

本当にサクサク作れるので、入門的なページを参考に、まずは動かしてみて、
細かい作りこみは、公式のリファレンスを見ながら進めていくのが良さそうです。

AngularJS入門 (全12回) – プログラミングならドットインストール

http://dotinstall.com/lessons/basic_angularjs

デモは下記の「Edit me」から試すことができます。
AngularJS — Superheroic javascript MVW Framework

http://angularjs.org/#the-basics

金子さんのスライド「AngularJS 入門」

http://www.slideshare.net/canidoweb/angularjs-18181893

AngularJSで開発したい

AngularJSで開発

◯公開場所
GitHUBで公開中
AngularJS公式サイトからダウンロード

・stable
安定版(1.0.5 4/4現在)
・unstable
開発版 (1.1系)
・Extras
公式モジュールが公開されています。

モジュール

「再利用可能なコード」でただ読みこむだけです。

<br />
<script src="angular.min.js"></script><br />
<script src="angular.cookie.js"></script><br />

また、ng-controller属性が設定されている要素の中が、そのControllerのスコープの範囲になります。

</p>
<div ng-controller="AgCtrl">
<p ng-bind="count">スコープの中</p>
</div>
<p ng-bind="count">スコープの外</p>
<p>

AngularJSでクッキーを使うには、モジュールの読み込みが必要になります。
リファレンスに載っていない技術も存在しているらしく、そのあたりは骨が折れそうです。

▼API Reference

http://docs.angularjs.org/api/

リファレンスの翻訳者を募集しているそうです。ご興味のある方はぜひ。
▼Home · angularjs-jp/angular.js Wiki · GitHub

https://github.com/angularjs-jp/angular.js/wiki

AngularJS Batarang

Chromeの拡張で、AngularJSの開発に欠かせないものです。

機能

・スコープ内プロパティ丸見え
AngularJSの機能を使ったものなら、Ajaxで取得したものも見える
・パフォーマンスが確認できる
・依存関係をグラフ化

Testacular

現在は「Karma」と名を変えてオープンソースプロジェクト化しているようです。

機能

・Node.jsを利用する
・各種ブラウザテストができる
・Jasmineなどのテストライブラリーが使用出来る
・ターミナル、ブラウザ間でリアルタイムでテスト結果を出力
・ファイル更新で自動テスト

▼Karma

http://dev.classmethod.jp/tool/karma/

質疑応答

Q:「AngularJSで、Socket.ioにつなぐ良い方法はありますか?」
A:下記に試みている人がいます。
AngularJSでsocket.ioに繋ぐ方法

http://briantford.com/blog/angular-socket-io.html

Q:「モジュールを書く上で、参考になるものはありますか?」
A: 下記が参考になります。

http://www.netmagazine.com/tutorials/angularjs-collaboration-board-socketio

Angularjs+Socket.io+Expressjs – NAVER まとめ

http://matome.naver.jp/odai/2136209824360640201

吉田さんのスライド「AngularJSで開発したい」 – Google ドライブ

https://docs.google.com/presentation/d/1CBMvD-UCwgt0fGypBWmv18wY2v1i-PnBlAPVQC9LqSA/edit#slide=id.p

AngularJS Tシャツをかけた じゃんけん大会

勉強会の最後に、AngularJS Tシャツをかけた、じゃんけん大会が行われました。
さらりと私の友人がゲットして行きました。うらやましいです!!

まとめ

少しサンプルを真似て書いただけですが、双方向バインディングのおかげで、本当に少しのコードで、たくさん動くのが印象的です。EventやFilter、Form Validationあたりもよく使うものが用意されて
いるので、フォームはAngularJSで作ったほうが簡単にリッチなものが作れると思います。
「これに使えそう!あれに使えそう」という発見がたくさんあり、非常に良い刺激を受けました。
まだまだ登場して間もないので、これからのAngularJSに注目です。

Subscribe:
pagetop