@Component({
    selector:    'app-root',
    templateUrl: './app.component.html',
    styleUrls:   ['./app.component.css']
})
export class AppComponent {

// #region fields

    /** タイトル */
    title = 'app';

// #endregion

// #region methods

    /**
     * クリックイベント
     */
    onClick(): void {
        console.log('hoge');
    }

// #endregion

}

折り畳みイメージ

f:id:kakkoya:20180530215554p:plain

HTML

<!--#region header  -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<!-- #endregion -->

CSS

/* #region color */
.hoge {
    color: blue;
}
/* #endregion */

終わりに

region を利用することで、指定した範囲を折り畳み可能になります。フィールド、パブリックメソッド、プライベートメソッド等をregionで区切ることで、あとからソースを確認しやすくなるので、ぜひやってみてください。

参考URL

code.visualstudio.com

2018-05-31

【GitHub】Gist貼り付けテスト

GitHub

概要

はてなブログへのGist貼り付けをテスト。
ユーザー検索で簡単に貼り付けできるんですね。手順を箇条書き

手順

編集サイドバーの「Gist貼り付け」をON
Gist貼り付けに自分のアカウント名を入力して連携
貼り付けを実施したいGistを選択して貼り付けを実行することで完了。

サンプル

貼り付けサンプル

2018-05-30

【Angular】HttpInterceptorの実装(Cookieベースセッション編)

AOP TypeScript Angular

概要

AngularのHttpリクエストの前後に共通処理を実装したい場合、HttpInterceptorを実装することで対応することが可能です。

用途としては以下のケースがありそうです。

ログ出力
HTTPヘッダーにトークンを設定

今回は前回の記事で紹介したAngularでのCookieベースセッション設定を共通化したいと思います。 kakkoyakakko2.hatenablog.com

動作環境

Angular 6.0.0

サンプルソース

custom.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // HttpRequestを複製。複製時にCookieベースセッションを必ずON
        const newReq = req.clone({ withCredentials: true });
        return next.handle(newReq);
    }
}

定義したインターセプターはModuleへの登録が必要です。

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomInterceptor } from './custom.interceptor';


@NgModule({
    imports: [
        HttpClientModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: CustomInterceptor, multi: true },
    ]
})
export class AppModule { }

終わりに

HttpClient実装前はHttpクラスを利用していました。Httpクラスにはインターセプター機能がないため、共通処理を実装したい場合はHttpクラスを継承して拡張するか拡張メソッドの定義が必要でした。便利な時代になったものですね。

参考URL

Angular公式 HttpClient - https://angular.jp/guide/http

2018-05-29

【Angular】Cookieベースのセッション管理を実施

Angular TypeScript

概要

AngularのHttpClient利用時は標準ではCookieベースのセッション管理が出来ません。旧システムの認証ではCookieベースのセッション管理が必要になる場合があります。

対応方法としてはget、post等のメソッドの引数に withCredentials: true を設定することでCookieベースセッション管理が出来るようになります。以下にサンプルを備忘録として残しておきます。

動作環境

Angular 6.0.0

サンプルソース

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class SampleService {

    constructor(private http: HttpClient) { }

    getData(): Observable<string> {
        // CookieベースセッションON
        return this.http.get<string>('url', { withCredentials: true });
    }
}