際際滷

逮温厩温壊界姻庄沿岳のフレ�`ムワ�`クについて��■�

ＦＡＧＡ (@Hivesbee)

粥稼乙顎鉛温姻.逮壊についてちょっとしゃべる

ＦＡＧＡ (@Hivesbee)

徭失�B初
? 兆念�ＦＡＧＡ
? TwitterID�@Hivesbee
☆嗤吩な秤�鵑呂弔屬笋い討い覆い任�
? Web : http://nethive.info
☆VPSのお署を�Bい梨れたため唯峭嶄

? 蝶二�Iで�Pいている�たぶん�芙偕芙氏繁
? ちょっとプログラムがすきな匯違繁

2012/12/22 プログラミング伏慧僕茶�氏及19指�瞳寒 3

Angular.js古勣
? Javascriptのフレ�`ムワ�`クの匯つ
? Googleが恬撹
? MVCパタ�`ンを�駻�

? 恷兜仝??????々と�iんでしまいそうになった

書晩は階��gなサンプルコ�`ドを�せつつ、
Angular.jsの�C嬬についてしゃべっていきます


デ�`タバインド
箭�秘薦した兆念を幟肝燕幣
<!DOCTYPE html>
Angular.jsアプリの傚冱
<html ng-app> Angular.jsの�iみ�zみ
<head>
<script src=/slideshow/angularjs/15807343/"angular.min.js"></script>
</head>
ng-modelの傚冱
<body>
<div>
<input type="text" ng-model="name"><br>
こんにちは� {{ name }}�
</div>
</body> ng-modelとのバインド
</html>


デ�`タバインド
? {{ }} の嶄には�g�な處麻しか秘らない
�猟忖双の�Y栽とか�

? ng-modelの�､�蠅犬�I尖を�筝釮靴燭い箸④錬�
★ng-controllerを協�xし、その嶄で�I尖を��


ng-controller
箭�秘薦した兆念に鬉犬�蟯陲�笋錣�
<!DOCTYPE html>
<html ng-app>
??? Controller協�x
<script>
function testCtrl($scope) {
$scope.isFAGA = function() {
return $scope.name == ＾FAGA￣ ? "クズ＾ : $scope.name;
}
} isFAGA協�x
</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>
圧�aの
function testCtrl($scope) { 傚冱
$scope.isFAGA = function() {
??? �@覚
}
} 圷ネタ
</script>
<body> testCtrl Scope
<div ng-controller=＾testCtrl">
isFAGA : function
<input type="text＾
ng-model="name"><br> 圧�aの name : String
こんにちは� {{ isFAGA() }}�
</div>
傚冱
</body>
</html> Template Model

scope
? そのControllerが崙囮できる��
��譴�TemplateのDOM��夛と匯崑

�C ng-controller=＾testCtrl￣を
傚冱したdiv坪を崙囮

�C スコ�`プ坪に�篳�?�v方を傚冱し、
Templateに郡啌辛嬬
�ajax宥佚でもらったデ�`タをtemplateに郡啌、など�


リスト
? 云?メ�`ル?etc´ を匯�Eで燕幣?�碧�靴燭�
★ng-repeat?filterで�g�F
Controller
function fooCtrl($scope) {
$scope.array = [＾A￣, ＾B￣, ＾C￣]; JSON侘塀で��d
}

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

foreach �Lにng-repeatを��d �碧�侫�襯燭淋O協


リスト
採が軟きているかというと
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=/slideshow/angularjs/15807343/"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で屎械�rの鮫中�w卞、
otherwiseでwhere參翌の鮫中�w卞

A.htmlとB.htmlは恬撹�gみとします

ほかにも
? 鏡徭のタグ伏撹
★ 何瞳として函り�Qうことが辛嬬

? e2e-testing
★ �SにAngular.jsのシナリオテストができる


まとめ
? コ�`ド楚が富なくても�薦なアプリ�_�k辛嬬
? TemplateとControllがDOM��夛で
匯崑しているため岷湖議に尖盾しやすい
? ル�`ティングが蛍かりやすすぎて湖��

? htmlに鏡徭奉來が岱羨するため丘森があるかも
? 晩云�Zリファレンスはよ


際際滷

粥稼乙顎鉛温姻.逮壊についてちょっとしゃべる

More Related Content

粥稼乙顎鉛温姻.逮壊についてちょっとしゃべる