Angular4さわる

これは何か

新機能開発をAngular4で作り始めました。その時に調べたことのメモです。
Angular CLI使っています。

前提知識

• Angular - linkTutorial: Tour of Heroes

調べたことメモ

Angular CLI

• 本家 README
  • GitHub - angular/angular-cli: CLI tool for Angular
• ng new
  • new · angular/angular-cli Wiki · GitHub
  • 例: scssを利用したプロジェクトを始めたい
    • ng new [name] --style=scss
• ng serve
• ng generate
  • 便利、基本的にファイルはこれで生成しています
  • generate · angular/angular-cli Wiki · GitHub

Autoprefixer

• stories autoprefixer · angular/angular-cli Wiki · GitHub

環境変数

• stories application environments · angular/angular-cli Wiki · GitHub

上記ページ以外にもWikiのstoriesからいろいろ確認できます。
stories · angular/angular-cli Wiki · GitHub

IE9, IE10, IE11対応

• src/polyfills.ts
  • 必要なpolyfillが用意されている
    （最初はコメントアウトされている）

ビルド

• build · angular/angular-cli Wiki · GitHub
  • -dev -prod はメタフラグ
    • https://github.com/angular/angular-cli/wiki/build#–dev-vs—prod-builds
  • base urlを変えたい
    • --base-href

SCSS

• 本家
  • Angular - linkComponent Styles
    • Special selectors
      • :host

        to target styles in the element that hosts the component

    • View encapsulation
• Bootstrap 4
  • npm install bootstrap@4.0.0-alpha.6 --save
• SCSS with Angular-cli - Qiita

VS Codeエクステンション

• Angular Language Service - Visual Studio Marketplace
  • テンプレートでも、コンポーネントメンバーの補完が可能になります

  • Not working in standalone HTML files in larger project · Issue #24 · angular/vscode-ng-language-service · GitHub

    • 自分の環境でも個別Htmlファイルの場合、うまく動いてくれませんでした
• Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing - Visual Studio Marketplace
  • AngularJSのコードを書くとAngularのコードをサジェストしてくれます

よかったチュートリアル

1. The Ultimate Angular CLI Reference Guide — SitePoint
2. Angular 2 Tutorial: Create a CRUD App with Angular CLI — SitePoint
3. Understanding Component Architecture: Refactoring an Angular App — SitePoint
4. Angular and RxJS: Create an API Service to Talk to a REST Backend — SitePoint

Angular CLIを利用したチュートリアルのシリーズです。
Githubにコードがあります。
GitHub - sitepoint-editors/angular-todo-app: Todo app for Angular2+