@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

ng-mtg#2 AngularJS 勉強会 #angularjsja に行って来ました

event angularjs

今回は入門編なので、経験者の人は知っている事が多いかもしれないです、難しい質問とかは懇親会の席でお願いしますとのことでした。
そのなわけで、メモったことなどを。

AngularJS 入門

使い方とか、こんなのあるよ的なところ。

  • AngularJSについて
    • Google製のMVCフレームワークです
    • コンセプトは、
    • 得意なところ
      • CRUD系のアプリ
      • 管理画面、マイページ
      • 1ページで完結するアプリ（Webアプリのフレームワークであればどれも得意）
    • 苦手なところ
      • モバイル向け
      • 重いから
      • ハイブリッドであれば問題ないかもしれない
    • ゲームなどで使うグラフィック系、エフェクト系
      • 例外：Bombermine（1000人で同時プレイ出来るアプリ）
      • Game Of Bombs
      • ゲーム本体ではなくて、ゲームの枠組みで使っているぽい
  • 動かしてみる
    • 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-init="hoge"ではダメで、ng-init="modelname='hoge'"とする
    • コントローラは、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でソートが可能
  • 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であれば、コメント
  • プラグインとか

AngularJSで開発したい

  • どういうふうに開発すればいいの
    • ソースコード
    • 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で開始

AngularJS

AngularJS