{"id":18928,"date":"2017-01-19T08:00:45","date_gmt":"2017-01-18T23:00:45","guid":{"rendered":"http:\/\/www.sssg.org\/blogs\/hiro345\/?p=18928"},"modified":"2017-01-21T10:43:31","modified_gmt":"2017-01-21T01:43:31","slug":"angular2%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6web%e3%82%b5%e3%83%bc%e3%83%90%e3%81%8b%e3%82%89%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e5%8f%96%e5%be%97%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f","status":"publish","type":"post","link":"https:\/\/www.hiro345.net\/blogs\/hiro345\/archives\/18928.html","title":{"rendered":"Angular2\u3092\u4f7f\u3063\u3066Web\u30b5\u30fc\u30d0\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u307f\u305f"},"content":{"rendered":"

Angular2\u306eQuickStart\u3092\u3055\u3063\u3068\u3084\u3063\u3066\u307f\u305f\u3002
\n
\nDownload | Node.js<\/a>\u304b\u3089LTS\u306eNode.js\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\u81ea\u5206\u306fUbuntu16.04\u3067\u52d5\u304b\u3059\u305f\u3081\u306b\u3001node-v6.9.4-linux-x64.tar.xz \u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066 ${HOME}\/app\/node-v6.9.4-linux-x64 \u3078\u5c55\u958b\u3057\u307e\u3057\u305f\u3002.<\/p>\n

\u4e0b\u8a18\u3092 ${HOME}\/.profile \u3078\u8ffd\u52a0\u3057\u3066\u3001\u30ed\u30b0\u30a4\u30f3\u3057\u306a\u304a\u3059\u3068\u3001node\u30b3\u30de\u30f3\u30c9\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\r\nPATH="$HOME\/app\/node-v6.9.4-linux-x64\/bin:$PATH"\r\nexport PATH\r\n<\/pre>\n
Setup for local development – ts – GUIDE<\/a>\u306b\u3042\u308b\u30b3\u30de\u30f3\u30c9\u3092\u6253\u3066\u3070\u3001\u3082\u3046\u305d\u308c\u3067Angular2\u30a2\u30d7\u30ea\u304c\u52d5\u304d\u307e\u3059\u3002\u7c21\u5358\u3002\u6700\u521d\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4f5c\u6210\u3068\u3001git\u30b3\u30de\u30f3\u30c9\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306e\u30b3\u30de\u30f3\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\r\nmkdir -p workspace\/angular2\r\ncd workspace\/angular2\r\nsudo apt -y install git\r\ngit clone https:\/\/github.com\/angular\/quickstart.git quickstart\r\ncd quickstart\r\nnpm install\r\nnpm start\r\n<\/pre>\n
\u305f\u3060\u3057\u3001npm install \u306e\u3042\u3068\u306b\u3001TypeScript\u306f2.1\u3092\u4f7f\u3044\u305f\u304b\u3063\u305f\u306e\u3067\u3001package.json \u3067typescript\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u66f8\u304d\u63db\u3048\u307e\u3057\u305f\u3002<\/p>\n
\r\n   "typescript": "~2.1.0",\r\n<\/pre>\n
npm start \u3092\u3059\u308b\u3068\u3001\u81ea\u52d5\u3067Web\u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3057\u3066\u3001 http:\/\/localhost:3000\/\u304c\u52d5\u304d\u307e\u3059\u3002<\/p>\n
Web\u30b5\u30fc\u30d0\u30fc\u3068\u9023\u643a\u3055\u305b\u3066\u307f\u307e\u3059\u3002CORS\u5bfe\u5fdc\u306e\u30b5\u30fc\u30d0\u30fc\u304c\u5fc5\u8981\u306a\u306e\u3067\u3001Python3\u3067\u7528\u610f\u3057\u3066web.py\u3068\u3057\u307e\u3059\u3002\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306f workspace\/angular2\/webpy\u3092\u4f5c\u3063\u3066\u3001\u305d\u3053\u306b\u3057\u3066\u304a\u3051\u3070\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n
\r\n#!\/bin\/python\r\nfrom http.server import HTTPServer, SimpleHTTPRequestHandler, test\r\nimport sys\r\n\r\nclass CORSRequestHandler (SimpleHTTPRequestHandler):\r\n  def end_headers (self):\r\n    self.send_header('Access-Control-Allow-Origin', '*')\r\n    SimpleHTTPRequestHandler.end_headers(self)\r\n\r\nif __name__ == '__main__':\r\n  test(CORSRequestHandler, HTTPServer, port=8000)\r\n<\/pre>\n
web.py\u3068\u540c\u3058\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078name.json\u30d5\u30a1\u30a4\u30eb\u3082\u7528\u610f\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
\r\n{ "name":"Angular2 JSON" }\r\n<\/pre>\n
\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ python3 web.py\r\n<\/pre>\n
\u3053\u308c\u3067\u3001http:\/\/localhost:8000\/name.json \u3067\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n
Angular2\u306e src\/app\/app.module.ts \u306f\u6b21\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\r\nimport { NgModule } from '@angular\/core';\r\nimport { HttpModule } from '@angular\/http';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { AppComponent }  from '.\/app.component';\r\nimport { NameService } from '.\/name.service';\r\n\r\n@NgModule({\r\n  imports:      [ BrowserModule, HttpModule ],\r\n  declarations: [ AppComponent ],\r\n  providers:    [ NameService ],\r\n  bootstrap:    [ AppComponent ]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
src\/app\/app.component.ts \u306f\u6b21\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Response } from '@angular\/http';\r\nimport { Observable } from 'rxjs\/Observable';\r\nimport 'rxjs\/add\/operator\/toPromise';\r\nimport 'rxjs\/add\/operator\/map'\r\nimport { NameService } from '.\/name.service';\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  template: `<h1>Hello {{name}}<\/h1>`,\r\n})\r\nexport class AppComponent implements OnInit {\r\n  name = 'Angular';\r\n\r\n  constructor (private nameService: NameService) {}\r\n\r\n  ngOnInit():void {\r\n    this.nameService.get().map(\r\n      (res: Response) => this.name = res.json().name as string\r\n    ).toPromise();\r\n  }\r\n}\r\n<\/pre>\n
src\/app\/name.service.ts\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
\r\nimport { Injectable }     from '@angular\/core';\r\nimport { Http, Response } from '@angular\/http';\r\nimport { Observable }     from 'rxjs\/Observable';\r\n\r\n@Injectable()\r\nexport class NameService {\r\n    private link = 'http:\/\/localhost:8000\/name.json';\r\n    constructor (private http: Http) {}\r\n    get(): Observable<Response> {\r\n        return this.http.get(this.link);\r\n    }\r\n}\r\n<\/pre>\n
\u5e83\u544a\uff1a
\n