- ng-mtg#2 AngularJS 勉強会 - AngularJS Japan User Group
- ng-mtg#2 AngularJS 勉強会 #angularjsjp - Togetterまとめ
- ng-mtg#2 AngularJS 勉強会 - Google+
今回は入門編なので、経験者の人は知っている事が多いかもしれないです、難しい質問とかは懇親会の席でお願いしますとのことでした。
そのなわけで、メモったことなどを。
AngularJS 入門
使い方とか、こんなのあるよ的なところ。
- AngularJSについて
- 動かしてみる
- AngularJS — Superheroic JavaScript MVW Framework
- 公式サイトの一番はじめに出ているデモコード
- 双方向データバインディングができている
- ng-app : AngularJSを使いますと言う宣言
- ng-model : Model名を定義
- {{}} でモデルにアクセスして表示する
- 入力フィールドに入力すると、リアルタイムに表示される
- ここまで実現するためにJavaScriptは一切書いていない
- ng-appで囲ったHTMLタグの範囲内だけが適用範囲
- jQueryで実現した場合
- $('#input').on('keyup', function() {$('#text').text($(this).val())})
- のような記述を書かなくてはならない
- 同じ名前のモデルを作れば、すべて同期してくれる
- 双方向データバインディング
- ng-xxx を記述すると、HTMLのバリデーションチェックで引っかかる
- 気になる人は、data-をつければOK
- ng:xxx とか、x-ng-xxxでもOK
- ng-bindと{{}}は同じだから、{{}}を使った方が良さそう
- {{}}の中には、5*modelnameみたいに式を書いたりすることも出来る
- 初期値を与える場合は、ng-initを使う
- コントローラは、ng-controller="controllername"で定義する
- TestCtrl
- 初期値を与えたい場合には、$scope.modelname = 'hoge';とする
- ng-repeatは繰り返し処理をするためのもの
- ng-repeat="data in list"とすると、listの中身をdata変数で扱うことが出来るようになる
- イベントとフィルタ
- Event
- ng-eventnameで定義
- 普通にイベント名にngをつければ良いだけです。
- ng-click="alert()"とかする。
- alert関数はControllerの中で定義する。
- $scope.alert = function() {/* 処理 */}
- Filter
- Angularのいいところ
- 予め用意されているものだけでなく、自分で作ることも可能
- 使い方は、{{}}の中で、パイプでつなぐ
- numberやcurrencyのFilterを利用すればカンマ区切りで表示することが出来る
- orderByでソートが可能
- Event
- FormValidation
- HTMLフォームタグは勝手に監視下に置かれる
- フォームと、フォームの中のインプット要素等毎に、Validなのか、Invalidなのかを取得可能
- CSSを組み合わせることで、入力エラーの表示が簡単に実装出来る
- valid, invalidとng-showを組み合わせることで、エラーメッセージを表示したりすることも出来る
- ng-show="myForm.myInput.$invalid"でエラーメッセージの表示制御を行う
- ValidationがOKの場合はng-valid、エラーの場合は、ng-required等のCSSクラスをつけてくれる
- CSSファイルにスタイルを定義しておけば簡単に表示を切り替え可能
- ng-patternは正規表現がかけるので、結構複雑なチェックも可能
- Directive
- 独自のタグを作ることが出来る。
- 独自の属性も作ることができる。
- Eであれば、要素
- Aであれば、属性
- Cであれば、クラス
- Mであれば、コメント
- プラグインとか
- プラグインがありますので、そのままで使うよりも良いです。
- UIは生では持っていないので、組み込むと良いです。
- AngularUI
- AngularUI for AngularJS
- カレンダーの実装が異常
- UI Bootstrap
- ANGULAR MODULES
AngularJSで開発したい
- どういうふうに開発すればいいの
- ソースコード
- Githubで公開されています
- angular/angular.js · GitHub
- Githubから取得して、makeしてもいいですが、公式サイトからダウンロードしていもいいです。
- StableとUnstableがある
- Stable よくテストされており、このバージョンのAPIは任意のさらなる変化を起こさない
- 2〜3ヶ月ごとにあっぷされてる?
- Unstable 開発中で、APIは予告なく変更することがある
- Extras
- 公式のモジュールがあります
- モジュールの使い方
- ただたんにscriptタグで読みこめば良いだけ
- angular.module('CookieTest', []);
- $cookieでControllerの引数の名前で使えるようになる
- AngularのControllerの引数は、名前が合っていれば良くて、順番はどうでもいいです
- ソースコード
- API リファレンス
- Batarang
- Chromeのエクステンションがある
- スコープ内のプロパティが見える
- パフォーマンスが確認出来る
- 依存関係がグラフで見れる
- これがあるとないとでは、生産性に違いが出る
- Testacular
- Node.jsを利用したテスト用のもの
- 各種ブラウザでテストが出来る
- Jasmineなどのテストライブラリが使用できる
- Testacularではなく、Karmaという名前に変わります
- karma initで設定ファイルを作っていく
- karma startで開始
- 作者: Brad Green,Shyam Seshadri
- 出版社/メーカー: Oreilly & Associates Inc
- 発売日: 2013/04/30
- メディア: ペーパーバック
- クリック: 1回
- この商品を含むブログ (4件) を見る