LoginSignup
8
9

More than 5 years have passed since last update.

AngularJSの勉強会(2014/07/05 福岡)

Last updated at Posted at 2014-07-05

ソースについて

今の開発環境

Spring Boot(Java8)

ng-app属性を見つけるとAngularJSが動く

Controllerと$scope

$scopeはDOM(HTML)とControllerの接着剤

Moduleという箱

angular.module("hoge",[])のように第二引数があると新規作成
angular.module("hoge)のように第二引数がない場合は、利用(参照)します

ng-bindを使用して$scopeに設定された値を画面に表示する

ng-bindと{{}}波カッコは同じ意味

$scopeはオブジェクトも紐付けすることができる

Controller兄弟の$scopeは別物

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

ng-modelで入力

Angularのサービスを作成

angular.module("hogehoge").factoryメドッドでデータと振る舞いを持つオブジェクトを登録します。

AngularのサービスはControllerからはいつも同じオブジェクトが呼び出されます。

ngShow.Directive

今まではタグにJSは書かないのが推奨されていたが、angularはタグにコードを書く。

ngRepeat

標準機能のngRepeatディレクティブは火もついたデータ配列分繰り返し表示する

ngOptions

SELECTの要素はngOptionで指定できます

自作Directive

Directiveは自作できます。
タグも自作できます。

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

クリックイベントはHTMLに書くことになります

監視

angularは常に値の変化を監視している。

使われ方

Single Page Application

SPAにはANGULARJSが良いのでは?

他のシステムや外部サービスとマッシュアップ

ANGULARJSについて

  • 2009年のGoogkeFeedbackプロジェクト
  • 17,000行のコードが1,500行に
  • テンプレートとデータバインディングが基本

いいところ

  • RESTfuk APIとの相性が良さそう
  • JSTLっぽい
  • EL式っぽい
  • Railに乗っているかぎりはなんとかなりそう

だめなところ

  • 概念を理解するのに時間がかかる
  • ちょっとRailから外れると一気にハードルが上がる
  • SEOと相性が悪そう
  • 認証/認可や例外系のロジックはやっぱりJava
  • 処理速度についてはObject.observer()に期待

MEANスタック

MEAN.IN
LAMPからMEANへそんな時代が来るかもしれません

ANGULARJSとTypeScript

TypeScript

  • MSが開発したオープンソース言語
  • JSを生成するAltJSの一部。
  • 2014年4月にVer.1がリリース

TypeScriptの開発環境

  • VSならIntelligenceが使えて便利
  • VSのバージョンに注意

  • 必須なEssentials
    Web Essentials

定義ファイル

  • JavScriptライブラリをTypeScriptで利用できるように変換したファイル
  • 拡張子はd.ts

NuGet

  • VSで定義ファイルを導入するにはNuGetを使うと簡単

まとめ

TypeScriptって何か便利そう

個人的に気になったこと

JSFIDDLEが便利そうだった。

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9