Angular
ナビゲーションに移動
検索に移動
目次
Angular
TypeScript | Google Cloud Platform | Bootstrap | Flask |
Angular CLI
準備
- Node.jsのインストール
Quickスタート
- ダウンロード
> git clone https://github.com/angular/quickstart.git quickstart
- パッケージのインストール
> cd quickstart > npm install
- 実行
> npm start
インストール
>npm install -g @angular/cli
アプリケーションの生成
> ng new myapp
アプリケーションの実行
> ng serve
Angular CLI の主なコマンド
概要 | コマンド |
---|---|
appアプリを生成 | ng new app |
ひな形の生成 | ng generate ... |
ビルドして起動 | ng serve |
ビルド | ng build |
ユニットテスト | ng test |
E2Eテスト | mg e2e |
i118nメッセージを抽出 | ng xi18n |
指定されたキーワードで検索 | ng doc keyword |
TSLintによるコードチェック | ng lint |
現在の設定を取得 | ng get key |
指定されたキー/値を設定 | ng set key=value |
Angular CLIのバージョン | ng version |
ng generate サブコマンド
要素 | コマンド |
---|---|
モジュール | ng g moduole hoge |
コンポーネント | ng g component hoge |
ディレクティブ | ng g directive hoge |
パイプ | ng g pipe hoge |
サービス | ng g service hoge |
ガード | ng g guard hoge |
クラス | ng g class hoge |
インターフェース | ng g interface hoge |
列挙 | ng g enum hoge |
ngx-bootstrap
- https://valor-software.com/ngx-bootstrap
- BootstrapをAgularアプリケーションから利用
Angular-CLIから利用
インストール
npm install ngx-bootstrap bootstrap --save
src/app/app.module.ts の編集
import { AlertModule } from 'ngx-bootstrap'; : @NgModule({ : imports: [AlertModule.forRoot(), ... ], : })
.angular-cli.json に以下を追加
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
src/app/app.component.html に以下を追加
<alert type="success">hello</alert>
Angular Material
非同期通信
app.module.ts
import { HttpModule } from '@angular/http'; : @NgModule({ : imports: [ : HttpModule, ], : })
データバインディング
構文
データ方向 | 種類 | 記法 |
---|---|---|
コンポーネント -> ビュー | 補間 | {{...}} |
コンポーネント -> ビュー | プロパティ/属性バインディング | [property]='value' |
ビュー -> コンポーネント | イベントバインディング | (event)='handler' |
コンポーネント <-> ビュー | 双方向バインディング | [(target)]='value' |
テンプレート参照変数
- 変数名
- (change)="0"は、イベントトリガーで値を更新するため必要
<input #txtHoge type="text" (change)="0"/> <div>テンプレート:TxtHoge.value</div>
双方向バインディング
- import と @NgModule の imports に FormModuleを追加
ルートモジュール(app.modules.ts)
import { FormsModule } from '@angular/forms'; : @NgModule({ : imports: [ BrowserModule, FormsModule, :
ビュー
- input/textarea/selectなどフォーム要素をバインドするには、ngModel を利用する
- このためには、name属性の指定が必須
- ngModelを[(ngModel)]とする
<select name="selAcion" [(ngModel)]="selectedAction"> <option *ngFor="let item of testActions" value="テンプレート:Item" >テンプレート:Item</option> </select>
コンポーネント
export class AccountComponent implements OnInit { testActions: string[] = [,'login','logout','check']; selectedAction: string = ;
入力値の加工
- 上記は、プロパティバインディング、イベントバインディングを組み合わせて、双方向を実現している。
- データバインディング時に値を加工する場合、[(ngModel)] を [ngModel]と(ngModelChagen) に分解
- $eventは入力値そのものを表す
<input name="hoge" type="text" [ngModel] = "hogeName" (ngModelChange) = "hogeName=$event.toUpperCase()" />
ルーティング
適用
プロジェクト作成
> ng new app --routing
--routing オプションを付与せずにプロジェクトを作成した場合
- /src/app/app-routing.module.ts を追加
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [ RouterModule.forRoot(routes), ], exports: [RouterModule] }) export class AppRoutingModule { }
- /src/app/app.module.ts
import { AppRoutingModule } from './app-routing.module'; : @NgModule({ imports: [ BrowserModule, AppRoutingModule, ], providers: [],
- /src/app/app.component.spec.ts
import { RouterTestingModule } from '@angular/router/testing'; : describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); }));
コンポーネント作成
> ng g component account --routing
ルーティング定義
- app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AccountComponent } from './account/account.component' const routes: Routes = [ { path: 'account', component: AccountComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(routes), ], exports: [RouterModule] }) export class AppRoutingModule { }
利用
<a routerLink="/account">Account</a> <router-outlet></router-outlet>
コンポーネント
ライフサイクル
ライフサイクル | 内容 |
---|---|
コンポーネント生成 | |
コンストラクター | |
ngOnChanges | @Input経由で入力値が設定/再設定された |
ngOnInit | 入力値(@Inputp)が処理された後、コンポーネントの初期化時(最初のngOnChangesメソッドの後で一度だけ) |
ngDoCheck | 状態の変更を検出したとき |
ngAfterContentInit | 外部コンテンツを初期化した時(最初のngDoCheckメソッドの後で一度だけ) |
ngAfterContentChecked | 外部コンテンツの変更をチェックした時 |
ngAfterViewInit | 現在のコンポーネントと子コンポーネントのビューを生成した時(最初のngAfterContentCheckedメソッドの後で一度だけ) |
ngAfterViewChecked | 現在のコンポーネントと子コンポーネントのビューが変更された時 |
ngOnDestroyed | コンポーネントが破棄される時 |
コンポーネント破棄 |
サービス
- サービスクラスであることの条件は、@Injectable デコレータを付与することのみ。
- @Injectable デコレータは、コンポーネントに対してサービスを引き渡せることを意味する。
登録
- モジュールにサービスを登録する。
- コンポーネントにも登録できる。この場合コンポーネントと子コンポーネントのみで利用できる。
import { HogeService } from './hoge.service'; @NgModule({ : providers: [HogeService], : })
依存性注入
Providerであることの条件は以下のプロパティを持つこと
プロパティ | 内容 |
---|---|
provide | サービスを注入する際に利用するDIトークン |
useXxxxx | サービスの生成方法 例 userClass: XXXX と指定するとクラス XXXX を常にnew でインスタンス化する |
multi | 同一のDIトークンに対して複数のProviderを追加するか |
useXxxx
プロパティ | 内容 |
---|---|
useClass | 指定されたクラスを注入のたびにインスタンス化 |
useValue | 指定されたオブジェクトを常に引き渡す(同じ値になる) |
useExisting | 指定されたトークンのエイリアスを生成 |
useFactory | 指定されたファクトリー関数で注入の際にオブジェクトを生成 |
useClass
- 常に新たなインスタンスを生成する
providers: [ { provide: HogeService, useClass: HogeService } ]
useValue
- 常に同じオブジェクトを注入する
- クラスのインスタンスを渡す
providers: [ { provide: HogeService, useVlaue: new HogeService() } ]
useExisting
- トークンのエイリアスを生成
providers: [ { provide: HogeService, useClass: HogeService }、 { provide: HogeAliasService, useExisting: HogeService }、 ]
<blockquote>互換性維持など、別のトークンから同一インスタンスを取得したい場合などに利用</blockquote>
useFactory
- ファクトリー関数経由でインスタンスを生成
providers: [ { provide: HogeService, useFactory: () => { let service = new HogeService(); service.foo = "bar"; return service; } } ]
Modules
Http
RxJs
コンポーネントからサービスのデータを購読する
Service
import { Subject } from 'rxjs/subject'; import { User } from './user'; @Injectable() export class AccountService { private userChangeAnnouncedSource = new Subject<User>(); userChangeAnnounced$ = this.userChangeAnnouncedSource.asObservable(); : announceUserChange(user: User) { this.userChangeAnnouncedSource.next(user); } :
Component
import { Subscription } from 'rxjs/Subscription'; export class AccountComponent implements OnInit, OnDestroy { user: User; subscription: Subscription ngOnInit() { this.subscription = this.accountService.userChangeAnnounced$.subscribe((user:User) => { this.user = user; }); } ngOnDestroy() { this.subscription.unsubscribe(); } :
UI
Angular Material
レスポンシブレイアウト
テスト
ユニットテスト
Karma
- https://karma-runner.github.io/2.0/index.html
- karma.conf.js
Tips
機能
Chrome拡張機能
Facebook SDK
Hello.js 認証をまとめるJavaScriptライブラリ
文法
Javascriptのグローバルオブジェクトを利用
declare const hoge;
コード
コードからルーティング
import { Router } from '@angular/router'; : constructor(private router: Router) {} : this.router.navigate(['/hoge'])
CSRF
- https://angular.io/api/common/http/HttpClientXsrfModule
- https://angular.io/guide/http
- Angular + HttpClientXsrfModule + Flask で CSRF
参照
© 2006 矢木浩人