K4750.NET

Angular6.1でHello World

Angular6もそろそろ安定してきただろう・・・ということで、インストール済みのnode等のバージョンアップとAngular6を軽く動作確認してみる。


１．Node.js バージョンアップ

まずは現状確認。

$ node -v
v6.11.0
$ npm -v
3.10.10

Angularの公式サイトでは「Node.js は 8.x 以上、npm は 5.x 以上」と書かれているのでバージョンアップが必要だ。で、簡単にバージョンアップするためのツール「n」なんてものもあるようだが・・・日々の使用頻度は少なく、そもそもインストールしたことすら忘れそうなのでNode.js本家から最新版（8.12.0 LTS）をダウンロードして普通に手動インストールする。

$ node -v
v8.12.0
$ npm -v
6.4.1

２．Angular CLI バージョンアップ

こちらも現状確認から。

$ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 8.12.0
OS: win32 x64
Angular:
...

Angular CLI 6が出ているようなので、こちらもバージョンアップする。本家のドキュメント どおりに下記のコマンドを実行する。

$ npm uninstall -g @angular/cli
$ npm cache verify
$ npm install -g @angular/cli@latest

バージョンを確認してみると・・・無事バージョン6がインストールされたようだ。

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.5
Node: 8.12.0
OS: win32 x64
Angular:
...

３．Angular6.1でHello World

Hello Worldするだけならコードを書くまでもなく・・・

$ ng new helloworld
$ cd helloworld
$ ng serve --open

デフォルトのブラウザ（例えばChrome）に「Welcome to helloworld!」と（一応「helloworld」と）表示される＾＾；
ちょっと手抜きすぎるので、本当にAngular6.1になっているのか確認してみる。app.component.tsでtitleにバージョンを埋め込んでみる。

import {Component, VERSION} from '@angular/core';

～略～
export class AppComponent {
  title = `helloworld (${VERSION.full})`;
}

「Welcome to helloworld (6.1.10)!」と表示され、Angular6.1.10であることが分かった。ng -vでも分るようだ。

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.5
Node: 8.12.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

４．JSONデータの表示

以下のJSONデータ（message.json）をHTTP通信で取得して、画面に表示してみる。ファイルは「src/assets/message.json」に格納する。

{ "message": "Hello Angular World!" }

HttpClientModuleを使うので、app.module.tsのimportsに一行追加する。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angularの入門としては適切ではなさそうだが・・・AsyncPipeを使って通信結果をテンプレート（app.component.html）に埋め込んでみる。まずは、app.component.ts に messageApi 変数と、constructor()を追加する。

import {Component, VERSION} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = `helloworld (${VERSION.full})`;
  messageApi = null;

  constructor(private http: HttpClient) {
    this.messageApi = this.http.get('assets/message.json');
  }
}

最後にテンプレートに以下を記述し、「３．Angular6.1でHello World」と同様に「ng serve –open」を実行する（実行済みなら、勝手に画面が更新される）。

{{ (messageApi | async)?.message }}

これで「GET http://localhost:4200/assets/message.json」が実行されてレスポンスのJSONデータがパースされ、JSONデータのmessageプロパティが画面に表示される。