Angular + Go Ginで簡単なWebアプリ作成

- 6月 19, 2019

はじめに

Angularと Go /Ginで簡単なWebアプリケーションを作成した記事です。
サーバから取得したメッセージを画面表示するWebアプリケーションを作成します。

技術要素

Angular CLI：8.0.3
Go：1.12.1

前提条件

Goがインストールされていること。
環境変数にGOPATH・GOROOTが設定されていること。

ソースコード

作成したソースコードは下記Githubリポジトリに公開しています。

Angularでクライアント作成

初期スターターアプリの作成

コマンドプロンプトを起動します。
下記のコマンドを実行し、Angular CLIをインストールします。

npm install -g @angular/cli

下記のコマンドを実行し、任意のディレクトリで、ワークスペースと初期スターターアプリを作成します。

ng new my-webapp-client

Would you like to add Aunglar routing?と聞かれたら、"N"と入力します。（今回は不要のため。）
Which stylesheet format would you like to useと聞かれたら、"CSS"を選択して、Enterを押します。
下記のコマンドを実行し、ワークスペースと初期スターターアプリを作成できたことを確認します。

cd my-webapp-client
ng serve --open

下記の画面がブラウザに表示されます。

サーバのAPI呼び出し処理の実装

src/app配下のapp.module.tsを下記の通りに編集します。

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 { }

src/app配下にmessage.tsを下記の通りに作成します。

export class Message {
   message: string;
}

下記のコマンドを実行し、messageサービスを作成します。

ng generate service message

作成したmessage.service.tsを下記の通りに編集します。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Message } from './message'

@Injectable({
   providedIn: 'root'
})
export class MessageService {

   private url = 'api/message';

   constructor(private http: HttpClient) {}

   getMessage() : Observable{
       return this.http.get(this.url);
   }
}

下記のコマンドを実行し、messageコンポネントを作成します。

cd src/app
ng generate component message

src/app/message配下のmessage.component.tsを下記の通りに編集します。

import { Component, OnInit } from '@angular/core';
import { Message } from '../message'
import { MessageService } from '../message.service'

@Component({
   selector: 'app-message',
   templateUrl: './message.component.html',
   styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {

   message: Message;

   constructor(private messageService: MessageService) { }

   ngOnInit() {
      this.getMessage();
   }

   getMessage() {
      this.messageService.getMessage().subscribe(message => this.message = message);
   }
}

src/app/message配下のmessage.component.htmlを下記の通りに編集します。

{{message.message}}

src/app配下のapp.component.htmlを下記の通りに編集します。

<app-message></app-message>

src配下にproxy.conf.jsonを下記の通りに作成します。

{
   "/api": {
      "target": "http://localhost:8080",
      "secure": false,
      "pathRewrite": {
         "^/api": ""
      }
   }
}

angular.jsonの"service"に"proxyConfig"を下記の通りに追記します。

"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
      "browserTarget": "my-webapp-client:build",
   "proxyConfig": "src/proxy.conf.json" // 追記
},

Go Ginでサーバ作成

任意のディレクトリでmy-webapp-serverフォルダを作成します。
下記のコマンドを実行し、Ginをインストールします。

go get -u github.com/gin-gonic/gin

my-webapp-server配下に、main.goを下記の通りに作成します。

package main

import "github.com/gin-gonic/gin"

func main() {
router := gin.Default()

router.GET("/message", func(ctx *gin.Context) {
ctx.JSON(200, gin.H{"message": "Success!!!"})
})

router.Run(":8080")

}

Webアプリ起動

コマンドプロンプトにて、my-webapp-serverディレクトリで下記のコマンドを実行します。

go run main.go

コマンドプロンプトの別ウィンドウにて、my-webapp-clientディレクトリで下記のコマンドを実行します。

ng serve --open

下記の画面がブラウザに表示されればOK！

参考サイト

Angular公式サイトチュートリアル

https://angular.jp/tutorial

Go言語のインストール

http://golang.jp/install

Github：Gin

https://github.com/gin-gonic/gin

このブログを検索

E-Note