AngularJS
angular
Angular2

AngularJS視点でAngular仕様を理解する

イントロダクション

用語

  • AngularJS : AngularJS バージョン1.x
  • Angular : Angular バージョン2以降

目的

AngualarJSでの開発経験があり、Angular2以降を使えば実行速度も開発効率も上がっているのは分かるんだけど学習コストが。。。
という人向け

主な変更点

Typescriptファースト

Typescript Configuration
TSで書きましょう

コンポーネント指向

Component = Controller(ts)、View(html)を含む機能単位のパーツ
Angular CLIも初期設定でng g componentすると、コンポーネント単位でロジックやテスト、htmlやcssを作成する

定義の変更

AngularJSの基本であった、ng-appやng-controller、$scopeはなくなった

AngularJS Angular
モジュール angular.module @NgModule
アプリ起動 ng-app bootstrapModule
コンポーネント(コントローラ) ng-controller @Component
スコープ $scope this

記法の変更

ng-hoge →

  • [hoge] : プロパティバインディング、属性ディレクティブ
  • (hoge) : イベントバインディング
  • [(hoge)] : 双方向バインディング
  • *ngHoge : 構造ディレクティブ
AngularJS Angular
スタイルクラス ng-class [ngClass]
スタイルプロパティ ng-style [ngStyle]
表示/非表示 ng-show / ng-hide [style.display] / [hidden]
リンク/画像 hg-href / ng-src [href] / [src]
イベントハンドラ ng-event (event)
双方向バインディング ng-model [(ngModel)]
条件分岐 ng-if *ngIf
多岐分岐 ng-switch [ngSwitch]
多岐分岐(要素) ng-switch-when / ng-switch-default *ngSwitchCase / *ngSwitchDefault
繰り返し処理 ng-repeat *ngFor

Angular CLI

scaffold(yoとか)、タスクランナー(gulp、gruntとか)的なことをまとめてやってくれる管理ツール。
AngularJSの開発では雛形作るのにYeomanとか使っていたがその代わりという感じ。

プロジェクト作成

ng new my-app

コンポーネント作成

ng g component my-component