Angular + Go Ginで簡単なWebアプリ作成
はじめに
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-clientWould 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 messagesrc/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/ginmy-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公式サイトチュートリアル
- Go言語のインストール
- Github：Gin
コメント
コメントを投稿