- プロジェクト作成
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