Angular,Angular CLIメモ

フロントエンド（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/](https://angular.io/docs/ts/latest/)

- [Start Angular](https://www.gitbook.com/book/albatrosary/start-angular/details)
  日本語。最初に読みたい。

- [ng-book 2](https://www.ng-book.com/2/) 
  英語。有料。Angular 4対応

- [The Ultimate Angular CLI Reference Guide](https://www.sitepoint.com/ultimate-angular-cli-reference/)

- [Angular Update Guide](https://angular-update-guide.firebaseapp.com/)

- [ANGULAR MODEL PATTERN](https://tomastrajan.github.io/angular-model-pattern-example)


## TypeScript

- これはベターECMAScript2015/2016で、あまり期待しないこと。

- 静的型付けはTypeScript内だけ有効で、外から入ってくる値には無力である。input,formやJSON等からの値は暗黙に変換されることは無く実質anyなので気を付けよう。


## パフォーマンスチューニング

- [Angular 2 Performance Checklist](https://github.com/mgechev/angular-performance-checklist)

- [日本語訳：Angular 2 Change Detection Explained](http://qiita.com/laco0416/items/523d96ddbfe55c4e6949)

- [Angular2 AoTコンパイルでTechFeedを高速化した話](https://medium.com/@techfeed/angular2-aot%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%A7techfeed%E3%82%92%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%97%E3%81%9F%E8%A9%B1-55efa68189a5#.5n56bttpg) 
  バンドルサイズの削減についても。


## サードパーティ ライブラリ

- バリデーター 
  [ng2-validation](https://github.com/yuyang041060120/ng2-validation) 
  バージョン3.1.2からAoTコンパイル対応。

- [ng2-page-scroll](https://github.com/Nolanus/ng2-page-scroll) 
  指定位置へのスクロール


### UIコンポーネント

- [PrimeNG](http://www.primefaces.org/primeng/) 
  充実。

- [Onsen UI 2](https://ja.onsen.io/)
  ReactやVue.js等にも対応。日本語ドキュメントあり。

- [Teradata UI Platform](https://teradata.github.io/covalent/) 
  マテリアルデザイン。

- [NG-LIGHTNING](http://ng-lightning.github.io/ng-lightning/)


## 俺メモ

- [angular-cliプロジェクトにJavaScriptライブラリを組み込む方法](http://qiita.com/shimitei/items/2201bd0b88746dfb550d)

- angular-cliプロジェクトでng testのカバレッジを取得 
  `ng test --code-coverage=true` 
  以前から使えたが、angular-cli@v1.0.0-beta.23で[READMEにcode-coverageの記述が追加](https://github.com/angular/angular-cli/commit/52dda0cd777640ba3c55213a656393502c4b3b92)された。

- [Angular2アプリに設定config.jsonを持たせる](http://qiita.com/shimitei/items/19beda3980be61736eef)

- [Angular2アプリのURLを#付きスタイルに変更する](http://qiita.com/shimitei/items/d39d3c55d22c101363e2)

- マルチテナント対応というかドキュメントルートではなくサブディレクトリにデプロイする（angular-cli@v1.0.0-beta.21） 
  [Set base href dynamically - Angular 2 - Stack Overflow](http://stackoverflow.com/questions/38112891/set-base-href-dynamically-angular-2)等ではAPP_BASE_HREFをいじくれとあるが、単純にindex.htmlのbase要素を配置ディレクトリに合わせると良い。例えば `<base href="/subdir/" />`とする。件のStack Overflowの質問者のは `href="/subdir"` と/で終わらないのがダメなのではないか。

- [Angular CLIでテンプレートのコードがAoTコンパイル通らないケース](http://qiita.com/shimitei/items/e6b8ee933875f89d3ea0) 
テンプレートでstring型変数の頭に+を付けてnumberに変換するコードを書くとエラー出まくる。

## 他参考になるページ

- [Angular 2アンチパターン集](http://qiita.com/armorik83/items/90b60fae2622f7c1f1a2)

- [Angular2のLifecycle Hooksを理解する](http://blog.yuhiisk.com/archive/2016/05/02/angular2-lifecycle-hooks.html)

- [Angular2のDIを知る](http://qiita.com/laco0416/items/61eed550d1f6070b36ab)

- [The Ultimate Guide to Forms in Angular 2](http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/)

- [Walts - Angular 2向けFluxライブラリを作った](http://qiita.com/armorik83/items/191d50cbf093778198fe)

- [Angular AoTガイド](http://qiita.com/Quramy/items/a603ddb47d6e4b3497e1)