post Image
Angular2 Tour of Heroes with Golang (w/o npm)

(English follows Japanese)

Angular2のTour of Heroesをnpmではなく、golangで立てたhttpサーバー上で動かす方法を記載します。

Demonstrated how to run Tour of Heroes introduced at Angular2 tutorial with golang, without npm start.

環境 [Environment]

  • Angular2.0.0-beta.15
  • Golang 1.6

ポイント [Highlight]

  • index.htmlから読み込むファイル(css, ts, js)の場所をhttp.FileServerで指定しておく
  • http.Dir(location)で指定するlocationはURIではなく、ファイルシステムのパス(絶対パス or 相対パス)で指定(相対パスの場合は、end-pointから)
  • (その他)Tour of Heroes のstyles.cssはcssディレクトリを作成して移動してますのでご注意を(他はそのまま)

  • Specify the location with http.FileServer where index.html loads static files such as css, ts, and js
  • the location with http.Dir() should be the absolute or relative path depending on each filesystem; to be described from end-point for relative path
  • others: I’ve moved styles.css into css directory created newly

実際のコード [Actual code]

  • Go言語での簡易サーバー [simplified server with golang]

server.goはTour of Heroesのindex.htmlと同じディレクトに配置
server.go should be allocated at the same directory as that at index.html

server.go
package main

import (
    "fmt"
    "html/template"
    "net/http"
)

func viewHandler(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("index.html"))
    if err := tmpl.Execute(w, nil); err != nil {
        fmt.Println("err")
    }
}

func main() {
    http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("css"))))
    http.Handle("/app/", http.StripPrefix("/app/", http.FileServer(http.Dir("app"))))

    http.HandleFunc("/", viewHandler)
    http.ListenAndServe(":8080", nil)
}
  • Angular2のTour of Heroes

ここから取得してください。。
Linked please find tour of heroes from github.

node_modulesをinternal resourceとして取り込んでいる場合

上記のAngular2のgithubから取得したindex.htmlではangular2.dev.jsなどの各jsファイルを外部リンクしています。しかし、内部リソースとしてサーバー側に配置しているケースを想定して、jsファイルを指定する場合の例を以下に記載しておきます( <script src=…のリンク先をすべてサーバー内に配置したjsに変更)

The code illustrated above is to leverage external links when it comes to calling javascript libraries. But as usual cases they are to be located within servers after downloaded in advance. Described for the case.

index.html
<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular 2 Tour of Heroes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css" >

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

この場合のgolang側は以下です。
go should be changed as well.

server.go
package main

import (
    "fmt"
    "html/template"
    "net/http"
)

func viewHandler(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("index.html"))
    if err := tmpl.Execute(w, nil); err != nil {
        fmt.Println("err")
    }
}

func main() {
    http.Handle("/css/", http.StripPrefix("/css/", http.FileServer(http.Dir("css"))))
    http.Handle("/app/", http.StripPrefix("/app/", http.FileServer(http.Dir("app"))))
    http.Handle("/node_modules/es6-shim/", http.StripPrefix("/node_modules/es6-shim/", http.FileServer(http.Dir("node_modules/es6-shim/"))))
    http.Handle("/node_modules/systemjs/dist/", http.StripPrefix("/node_modules/systemjs/dist/", http.FileServer(http.Dir("node_modules/systemjs/dist/"))))
    http.Handle("/node_modules/angular2/es6/dev/src/testing/", http.StripPrefix("/node_modules/angular2/es6/dev/src/testing/", http.FileServer(http.Dir("node_modules/angular2/es6/dev/src/testing/"))))
    http.Handle("/node_modules/angular2/bundles/", http.StripPrefix("/node_modules/angular2/bundles/", http.FileServer(http.Dir("node_modules/angular2/bundles/"))))
    http.Handle("/node_modules/typescript/lib/", http.StripPrefix("/node_modules/typescript/lib/", http.FileServer(http.Dir("node_modules/typescript/lib/"))))
    http.Handle("/node_modules/rxjs/bundles/", http.StripPrefix("/node_modules/rxjs/bundles/", http.FileServer(http.Dir("node_modules/rxjs/bundles/"))))

    http.HandleFunc("/", viewHandler)
    http.ListenAndServe(":8080", nil)
}

実行確認 [run modules]

$ go run server.go

(prior to this, “$ npm install” is also needed if you’ve never run them with npm before)

then,

localhost:8080

これでnpm startと同じように動けば成功です。
Would be great if your codes run in the same way with npm start.


『 Go 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。