Angular.jsについてちょっとしゃべる

javascriptのフレームワークについて（仮）

ＦＡＧＡ (@Hivesbee)

Angular.jsについてちょっとしゃべる

ＦＡＧＡ (@Hivesbee)

自己紹介
• 名前：ＦＡＧＡ
• TwitterID：@Hivesbee
※有益な情報はつぶやいていないです
• Web : http://nethive.info
※VPSのお金を払い忘れたため停止中

• 某企業で働いている（たぶん）社畜社会人
• ちょっとプログラムがすきな一般人

2012/12/22 プログラミング生放送勉強会第19回＠品川 3

Angular.js概要
• Javascriptのフレームワークの一つ
• Googleが作成
• MVCパターンを採用

• 最初「ｱﾝｷﾞｬｰ」と読んでしまいそうになった

今日は超簡単なサンプルコードを見せつつ、
Angular.jsの機能についてしゃべっていきます


データバインド
例：入力した名前を逐次表示
<!DOCTYPE html>
Angular.jsアプリの宣言
<html ng-app> Angular.jsの読み込み
<head>
<script src="angular.min.js"></script>
</head>
ng-modelの宣言
<body>
<div>
<input type="text" ng-model="name"><br>
こんにちは！ {{ name }}！
</div>
</body> ng-modelとのバインド
</html>


データバインド
• {{ }} の中には単純な演算しか入らない
（文字列の結合とか）

• ng-modelの値に応じて処理を変更したいときは？
→ng-controllerを定義し、その中で処理を書く


ng-controller
例：入力した名前に応じて応答が変わる
<!DOCTYPE html>
<html ng-app>
・・・ Controller定義
<script>
function testCtrl($scope) {
$scope.isFAGA = function() {
return $scope.name == “FAGA” ? "クズ“ : $scope.name;
}
} isFAGA定義
</script>
<body> Controller使用を宣言
<div ng-controller=“testCtrl">
<input type="text" ng-model="name"><br>
こんにちは！ {{ isFAGA() }}！
</div>
</body> isFAGAをバインド
</html>

ng-controller
何が起きているかというと
<!DOCTYPE html>
<html ng-app> Root Scope
・・・
<script>
暗黙の
function testCtrl($scope) { 宣言
$scope.isFAGA = function() {
・・・継承
}
} 元ネタ
</script>
<body> testCtrl Scope
<div ng-controller=“testCtrl">
isFAGA : function
<input type="text“
ng-model="name"><br> 暗黙の name : String
こんにちは！ {{ isFAGA() }}！
</div>
宣言
</body>
</html> Template Model

scope
• そのControllerが制御できる範囲
範囲はTemplateのDOM構造と一致

– ng-controller=“testCtrl” を
宣言したdiv内を制御

– スコープ内に変数・関数を宣言し、
Templateに反映可能
（ajax通信でもらったデータをtemplateに反映、など）


リスト
• 本・メール・etc… を一覧で表示・検索したい
→ng-repeat・filterで実現
Controller
function fooCtrl($scope) {
$scope.array = [“A”, “B”, “C”]; JSON形式で記載
}

Template
<input type=“text” ng-model=“query”>
<ul ng-repeat=“item in array | filter : query”>
<li> {{ item }} </li>
</ul>

foreach 風にng-repeatを記載検索フィルタの設定


リスト
何が起きているかというと
Controller
function fooCtrl($scope) { fooCtrl Scope
$scope.array = [“A”,“B”,“C”]; array : array
}
元ネタ query : String

継承

Repeater Scope
Template Repeater Scope
item : String
Repeater Scope
<input type=“text” ng-model=“query”> item : String
<ul ng-repeat=“item in array | filter : query”> item : String
<li> {{ item }} </li>
</ul>
Model

ルーティング
• 画面の切り替え
Template
<!DOCTYPE html>
<html ng-app="demo"> ng-appに名前が付いた
<head>
<script src="js/angular.min.js"></script>
<script src=“js/app.js”></script>
</head>
ルーティング用javascript
<script>
function ACtrl($scope) {}
function BCtrl($scope) {}
</script>
<body>
<a href="#/A">Aへ</a><br>
<a href="#/B">Bへ</a><br> ng-viewの属性追加
<div ng-view></div> ※この中で画面が切り替わる
</body>
</html>

ルーティング
• 画面の切り替え
ng-app名を指定

app.js
angular.module("demo", []).
config(["$routeProvider", function($routeProvider) {
$routeProvider.
when(“/A", {templateUrl : "A.html", controller : ACtrl}).
when(“/B", {templateUrl : "B.html", controller : BCtrl}).
otherwise({redirectTo : "/A"});
}]);

whenで正常時の画面遷移、
otherwiseでwhere以外の画面遷移

A.htmlとB.htmlは作成済みとします

ほかにも
• 独自のタグ生成
→ 部品として取り扱うことが可能

• e2e-testing
→ 楽にAngular.jsのシナリオテストができる


まとめ
• コード量が少なくても強力なアプリ開発可能
• TemplateとControllがDOM構造で
一致しているため直感的に理解しやすい
• ルーティングが分かりやすすぎて感動

• htmlに独自属性が乱立するため抵抗があるかも
• 日本語リファレンスはよ


Angular.jsについてちょっとしゃべる

More Related Content

Angular.jsについてちょっとしゃべる