はい!今やってます!

Work Pertly, Live Idly

Angular4 関連

  • プロジェクト作成
ng new ${プロジェクト名}
ng new ${プロジェクト名} --style=scss
  • ng-bootstrap導入
# install
npm install --save intl@1.2.5 bootstrap@3.3.7 ng2-bootstrap@1.1.14

# angular-cli.json
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "style.css"
],

# src/app/shared/index.ts
import '../../../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js'

# src/styles.css
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
  • プロジェクト編集
ng set defaults.styleExt scss
  • モジュールを作成する
ng g module ${モジュール名}

AngularのNgModuleを使って、アプリの構成を管理する - Qiita

ng generate component ${コンポーネント名}
ng generate component ${モジュール名}/${コンポーネント名}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  • その他新規作成
ターゲット 概要 コマンド
Component コンポーネント ng g component my-new-component
Directive html要素の修飾や振る舞いの調整(ngIfとかも) ng g directive my-new-directive
Pipe データ変換(数値出力にカンマをつけるなど) ng g pipe my-new-pipe
Service サービス ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module モジュール ng g module my-module
  • サービスを追加する
ng g service ${サービス名}
  • カスタムディレクティブを作成する
ng g directive ${ディレクティブ例}
※ngIfとか
  • サーバーを起動
ng serve

NgModuleで指定可能なメタデータ

メタデータ 指定可能な種類
imports モジュール(他のNgModuleで定義されたモジュール)
exports コンポーネント ※import元で利用する時
declarations コンポーネント、パイプ、ディレクティブ
providers サービス(DI元のクラス)
entryComponents
bootstrap エントリーポイント(最初に呼び出すコンポーネント)
schemas

スタイルを適応する方法

適応方法 指定方法
定番 style="background-color:#ffffff;"
カプセルCSS class="test"
プロパティバインド [style.backgroundColor]="'#ffffff'"
ngStyle [ngStyle]="{'background-color':'#ffffff'}"
ngClass [ngClass]="{test:true}"
カスタムディレクティブ styles: [.test{background-color:#ffffff;}]

ルーター

<router-outlet></router-outlet>
RouterModule.forRoot([
  { path: "test/:id", component: TestComponent }
])

https://ng2-info.github.io/2016/03/component-router-by-gerardsans/

  • リンク・クリック時の処理の書き方
onClickButton(){
  this.router.navigate(["/test", this.value1]);
}
this.router.navigate(["/comp1", {"id": this.value1, "msg": this.value2}]);
<a [routerLink]="['/test', 12]" routerLinkActive="active">...</a>
<a [routerLink]="['/test', {'id': 123, 'msg': 'aaaa'}]"
  routerLinkActive="active">...</a>
<a routerLink="/test/1234" routerLinkActive="active">...</a>
constructor(private route: ActivatedRoute) {
  this.route.params.forEach((params: Params) => {
    this.id = params["id"];
  });
}

App Cache

  • src/assets/testApp.appcache
CACHE MANIFEST
#ver 1.0.0
CACHE
./favicon.ico
../inline.js
../style.bundle.js
../main.bundle.js
  • src/index.html
<html manifest="./assets/testApp.appcache">
  • キャッシュ状況を表示
chrome://appcache-internals/

Reference

https://albatrosary.gitbooks.io/start-angular/content/changelog.html