イントロダクション
用語
- 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