2014年7月29日火曜日

altJS福岡勉強会第1回準備中〜

altJS福岡勉強会第1回準備中〜

今度の土曜日(2014/8/2土)にaltJS福岡勉強会第1回を開催する予定です!
http://www.zusaar.com/event/6467004

AngularJSを仕事で少し使っている私は
AngularJS2が Traceurを採用しているという事なんで

All code in AngularJS 2 is already being written in ES6. As ES6 doesn’t run in browsers today, we’re using the Traceur compiler to generate the nice ES5 that runs everywhere. We’re working with the Traceur team to build support for a few extensions like annotations and assertions. We call this set of extensions “ES6 +A”.
http://blog.angularjs.org/2014/03/angular-20.html

google/traceur-compiler を使った発表をしようと思ってます!
https://github.com/google/traceur-compiler
(まだちょっとしか触ってない&資料書いてないけど….)

traceur-compilerを使うといろいろES6の機能が使えるらしいですね。
https://github.com/google/traceur-compiler/wiki/LanguageFeatures#modules

Traceur+grunt+IntelliJ(WebStorm)で
ちょっとAngularJS1.2を使ってみようとおもいます〜。
https://github.com/aaronfrost/grunt-traceur

おまけ。ES6の機能が使える環境一覧表
http://kangax.github.io/compat-table/es6/

2014年7月6日日曜日

2014/07/05 AngularJS福岡勉強会(第1回) ご参加ありがとうございました。

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

多数のご参加ありがとうございました!

そこで出た質問やお勧めのライブラリをここにまとめたいと思います。



質問


Q1.angular.moduleの名前がかぶったらどうなるの?

試してみました。まずは正常に動くバージョン

次に誤って同じ名前のmoduleを作成した場合

残念ながら、後から作成したmoduleで同じ名前のモジュールは上書きされてしまうみたいです...
おそろしい...重複した場合に検知できませんので気をつけないといけないですね...


Q2.controller( "XxxCtrl", function($scope)って書く時の引数の$scopeは別の名前でもいいんですか?

ダメです..$scopeという文字列で判断しますので違う名前にすると別物の扱いです。

angular.module('app', []).
controller( 'XxxCtrl', [ '$scope', function($scope) {
}]);

変更する際はこんな感じで配列でDIする機能の名前を渡しましょう。

詳しくは下記資料をご参考ください。
“AngularJSのDIの仕組み、minify対策は覚えておこう!”
http://qiita.com/kawaz/items/363f430d21ec729f1b7d


Q3.規約とか作ってますか?

うちはここの規約を参考に会社用につくっています

angularjs-style-guide

https://github.com/mgechev/angularjs-style-guide/blob/master/README-ja-jp.md




お勧めのライブラリ


controller をクラスっぽく書けるライブラリ: http://davej.github.io/angular-classy/ が結構便利です。

@odiak_i さん!情報ありがとうございます!



ありがとうございました


@osacaz4さん!
素敵な場所の提供ありがとうございます!
またお願いしますm(_ _)m

@hisashi_yanoさん、@tsubakimoto_sさん!
発表ありがとうございました。

@tsubakimoto_sさんの資料はこちらにあります。
初心者 × AngularJS × TypeScript
http://www.slideshare.net/YutaMatsumura/angular-jstypescript-slideshare-36665793

@SUGA_HEYさん!まとめて頂きありがとうございます!
AngulaJSの勉強会(2014/07/05 福岡)
http://qiita.com/sugawa0718/items/b387f52c5b4f29b8c050



twitterのハッシュタグ


#ng_fukuoka



2014年7月5日土曜日

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

自動でカンマ編集をつけるディレクティブの例など

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



11. ngShow Directive


標準機能のngShowディレクティブは 紐づいたデータが true の時に中の要素を表示します。




12. ngRepeat Directive


標準機能のngRepeatディレクティブは 紐づいたデータ配列分繰り返し実行されます。
ngRepeat (日本語) ngRepeat




13. ngOption Directive


SELECTの要素はngOptionで指定出来ます。




14. 自作 Directive


Directiveは自作出来ます。
自作のタグを作る事もできます。




15. クリックイベントハンドラ Directive


clickイベントはHTMLに書く形になります。




twitterのハッシュタグ

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

#ng_fukuoka








補足
ngRepeatのModelをクラスっぽく書いた例 ngAnimation

2014年7月3日木曜日

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



06. Controller兄弟のscopeは別物


兄弟にはきちんと別々の部屋(scope)をもっています。
お隣のscopeを覗く事が出来ません。




07. 親子関係のControllerは、子は親のscopeを使えます


scopeはDOMツリーにあわせて階層で作成されます。
自分のscopeに設定されたいない値は自分の親にあたるscopeに設定されていないか探しに行きます。




08. ngModelで値を入力


scopeのデータに値を入力する場合はngModelを使います。
Data Binding




09. Angularのサービスを作成


angular.module("hogehoge").factoryメソッドでデータと振る舞いを持つオブジェクトを登録します。
AngularのサービスはControllerからいつも同じオブジェクトが呼び出されます。
AngularJSのサービスについて Services




10. AngularのサービスでControllerのデータ共有


さきほどAngularのサービスはControllerからいつも同じオブジェクトが呼び出されるとありました。
ということはControllerが同じサービスを呼び出すとデータを共有できるということになります。


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) とも言う。