AngularJSについて

AngularJSについて
2014.1.23 ナビプラス株式会社高橋昌生

目次
●
●
●
●
●

AngularJSとは
AngularJSの特徴
AngularJSの使いどころ
jQueryとの比較
サンプルコードいくつか

AngularJSとは
● Googleが開発しているJavaScriptライブラリ
○ http://www.angularjs.org

● クライアントサイドMVCフレームワーク
● なんだか最近流行の兆し
○

http://www.google.co.jp/trends/explore#q=AngularJS%2C%
20Backbone.js%2C%20Knockout.js&cmpt=q

AngularJSの特徴
● データバインディングによるModelとViewの自
動同期
● HTMLをテンプレートとして使う
● JSのコードとHTMLが密結合しない
● 特に何かを継承したりしていない、ただの関数
をControllerとして使用する
● Dependency Injection

AngularJSの使いどころ
● CRUDアプリ作成には強そう
○ 管理画面とか

● jQueryでごりごり書いていくよりも、保守性は高
くなりそう
● ゲームでCanvasに描画しまくるとかそういう用
途向きではない

jQueryとの比較
● jQueryの流行以来、動的なページ作成には
jQueryが定番
● jQueryで行うのは、DOM操作の敷居を下げた
開発
● AngularJSで行うのは、DOM操作をほとんど意
識しない開発

サンプルコード
いくつか例を見ながら概要を掴んでいきます

Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>

<!DOCTYPE html>
<html ng-app=”helloApp”> 配下の要素に AngularJSが適用される (htmlタグにつけると、全体 )
<head>
</head>
<body>
Hello, {{name}}!
</div>
</body>
</html>

<!DOCTYPE html>
<head>
</head>
<body>

このdivタグ配下では helloCtrl controllerを使用

Hello, {{name}}!
</div>
</body>
</html>

<!DOCTYPE html>
<head>
</head>
<body>
Hello, {{name}}!
</div>
</body>
</html>

双方向データバインド

<!DOCTYPE html>
<head>
</head>
<body>
Hello, {{name}}!
</div>
</body>
</html>

データバインド

app.js

// 最小限の場合、これでもいい
/*
var HelloCtrl = function($scope) {
$scope.name = 'World';
}
*/
// angularからHelloCtrlに$scopeサービスを注入する
// 詳しくはAngularJSのDIに関する解説を参照
var helloApp = angular.module('helloApp', []);
helloApp.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = 'World';
}]);

jQueryでやると
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jq_app.js"></script>
</head>
<body>
<div>
<input type="text" name="test" id="test"><br>
Hello, <span id="foo"></span>
</div>
</body>
</html>

jQueryでやると
(function($){
$(function(){
$("#test").keyup(function(){
$("#foo").text($("#test").val());
});
});
})(jQuery);

Sample2:繰り返し
<!DOCTYPE html>
<html ng-app=”iterApp”>
<head>
<script src=”iter_app.js”></script>
</head>
<body>
<div ng-controller=”IterCtrl”>
<ul ng-repeat=”element in elements”>
<li>{{element}}</li>
</ul>
</body>
</html>

Sample2:繰り返し
var iterApp = angular.module('iterApp', []);
iterApp.controller('IterCtrl', ['$scope', function($scope){
$scope.elements =[‘い’, ‘ろ’, ‘は’];
}]);

Sample3:
クライアントサイドバリデーション
<form method="post" name="registration">
<dl>
<dt>ユーザ名</dt>
<dd>
<input type="text" name="userName" ng-model="userName" required ng-maxlength=10>
<span ng-show="registration.userName.$error.required">ユーザ名を入力してください</span>
<span ng-show="registration.userName.$error.maxlength">ユーザ名は最大10文字です</span>
<span ng-show="registration.userName.$valid">OK</span>
</dd>

Sample3:クライアントサイドバリデーショ
ン
<dt>パスワード</dt>
<dd>
<input type="password" name="password" ng-model="password" required ng-minlength=7>
<span ng-show="registration.password.$error.required">パスワードを入力してください</span>
<span ng-show="registration.password.$error.minlength">パスワードは7文字以上で設定してください</span>
<span ng-show="registration.password.$valid">OK</span>
</dd>
</dl>
<input type="submit" value="登録" ng-disabled="registration.$invalid">
</form>

Sample4:
サーバサイドアプリと組み合わせ
● Play-AngularJS-Sample
○ https://github.com/tarhashi/Play-AngularJS-Sample
○ www.angularjs.orgのtodoアプリに永続化をつけた程度
のアプリ
○ サーバサイドは以下の構成
■ APP: Play Framework2 (Scala)
■ DB: H2
○ PlayのJSRouterを使うためにajax処理をjQueryでやっ
てるので$applyが必要になってる

AngularJS + サーバサイド開発の特徴
● サーバサイドの大部分はJSON API
○ サーバサイドは単純に入出力だけ考えてればOK
○ WEB画面とスマホアプリでAPIを使いまわしたりできる
かも

組み込みモジュールでは機能が足りない
場合
● 追加モジュールを読み込んで拡張
○ 公式モジュール http://code.angularjs.org/1.2.9/
○ いろいろありそうなところ http://ngmodules.org

● ディレクティブを定義して自分で拡張
○ http://angularjsninja.
com/blog/2013/11/20/angularjs-customdirectives/

その他の話題
● Dependency Injection
○ http://qiita.com/kawaz/items/363f430d21ec729f1b7d

● Testing
○ http://js.studio-kingdom.
com/angularjs/guide/unit_testing

● Routing, filter
○ http://qiita.
com/lga0503/items/1f473994ed5a3120aef8

参考
● Mastering Web Application Development with
AngularJS
○ http://www.packtpub.com/angularjs-web-applicationdevelopment/book
● AngularJS API Docs
○ http://docs.angularjs.org/api
● Qiita
○ http://qiita.com/tags/angularjs

AngularJSについて

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to AngularJSについて

Similar to AngularJSについて (20)

Recently uploaded

Recently uploaded (7)

AngularJSについて