フロントエンド（HTML/CSS/JavaScript）さっぱりな人にはAngular CLIは救世主である。webpackの設定とか今のところ知らなくても良い。先ずはnpm, Angular, TypeScriptのみを気にするだけで良くなる。
Angular CLIをインストールすると、ngコマンドが使えるようになる。ngコマンドでプロジェクトのひな型作成や、component, service, pipe, etc.もngコマンドで追加していけるので一定の作法に沿って開発することができる。
Angular
-
公式ドキュメント
https://angular.io/docs/ts/latest/ -
Start Angular
日本語。最初に読みたい。 -
ng-book 2
英語。有料。Angular 4対応
TypeScript
-
これはベターECMAScript2015/2016で、あまり期待しないこと。
-
静的型付けはTypeScript内だけ有効で、外から入ってくる値には無力である。input,formやJSON等からの値は暗黙に変換されることは無く実質anyなので気を付けよう。
パフォーマンスチューニング
-
Angular2 AoTコンパイルでTechFeedを高速化した話
バンドルサイズの削減についても。
サードパーティ ライブラリ
-
バリデーター
ng2-validation
バージョン3.1.2からAoTコンパイル対応。 -
ng2-page-scroll
指定位置へのスクロール
UIコンポーネント
-
PrimeNG
充実。 -
Onsen UI 2
ReactやVue.js等にも対応。日本語ドキュメントあり。 -
Teradata UI Platform
マテリアルデザイン。
俺メモ
-
angular-cliプロジェクトでng testのカバレッジを取得
ng test --code-coverage=true
以前から使えたが、angular-cli@v1.0.0-beta.23でREADMEにcode-coverageの記述が追加された。 -
マルチテナント対応というかドキュメントルートではなくサブディレクトリにデプロイする（angular-cli@v1.0.0-beta.21）
Set base href dynamically - Angular 2 - Stack Overflow等ではAPP_BASE_HREFをいじくれとあるが、単純にindex.htmlのbase要素を配置ディレクトリに合わせると良い。例えば<base href="/subdir/" />とする。件のStack Overflowの質問者のはhref="/subdir"と/で終わらないのがダメなのではないか。 -
Angular CLIでテンプレートのコードがAoTコンパイル通らないケース
テンプレートでstring型変数の頭に+を付けてnumberに変換するコードを書くとエラー出まくる。