2014年7月2日水曜日

2014/07/05 その1 AngularJS福岡勉強会(第1回)



01. AngularJSの起動


ng-app属性を見つけるとAngularは動き出します。jQueryと起動が違いますね。




02. Controllerと$scope


HTMLのDOMとAngularのControllerが$scope経由で接続されます。
$scopeは接着剤みたいなイメージです。
Controllerは$scopeにデータや振る舞いを紐づけます。

Scope as Data-Model
Scope is the glue between application controller and the view.




03. Moduleという箱


angular.module("hoge",[])のように第2引数がある時は新規作成で
angular.module("hoge")のように第2引数がない場合は、利用(参照)します
ng-appでAngularJSが起動する時にどのModuleを使うか選択が出来ます。




04. ngBindを使用して$scopeに設定された値を画面に表示する


ng-bindと{{}}波カッコは、ほぼ同じ動きになります。
Controllerは$scopeに値を設定します。それが自動でDOMに描画されます。
Controllerはあくまで$scopeの事までしか知りませんし、
DOMも$scopeの事しか知りません。
Controllerの中にDOMの記述が無い事がポイントです。




05. $scopeは Objectでもデータを紐付けれます

Objectで紐づけたデータは、DOM上でhoge.fugaという形式で使う事ができます。




twitterのハッシュタグ

質問やもっと良いやり方などがありましたら、↓につぶやいてください〜

#ng_fukuoka








補足
波括弧(なみかっこ)は、ブレース・ブレイス (brace) および カーリーブラケット (curly bracket) ・カール (curl) とも言う。

0 件のコメント:

コメントを投稿