Angular2のQuickStartをさっとやってみた。
Download | Node.jsからLTSのNode.jsをダウンロードします。自分はUbuntu16.04で動かすために、node-v6.9.4-linux-x64.tar.xz をダウンロードして ${HOME}/app/node-v6.9.4-linux-x64 へ展開しました。.
下記を ${HOME}/.profile へ追加して、ログインしなおすと、nodeコマンドが使えるようになります。
PATH="$HOME/app/node-v6.9.4-linux-x64/bin:$PATH" export PATH
Setup for local development – ts – GUIDEにあるコマンドを打てば、もうそれでAngular2アプリが動きます。簡単。最初にプロジェクト用のディレクトリ作成と、gitコマンドのインストールのコマンドを追加しています。
mkdir -p workspace/angular2 cd workspace/angular2 sudo apt -y install git git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start
ただし、npm install のあとに、TypeScriptは2.1を使いたかったので、package.json でtypescriptのバージョンは書き換えました。
"typescript": "~2.1.0",
npm start をすると、自動でWebブラウザが起動して、 http://localhost:3000/が動きます。
Webサーバーと連携させてみます。CORS対応のサーバーが必要なので、Python3で用意してweb.pyとします。ディレクトリは workspace/angular2/webpyを作って、そこにしておけばいいでしょう。
#!/bin/python
from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys
class CORSRequestHandler (SimpleHTTPRequestHandler):
def end_headers (self):
self.send_header('Access-Control-Allow-Origin', '*')
SimpleHTTPRequestHandler.end_headers(self)
if __name__ == '__main__':
test(CORSRequestHandler, HTTPServer, port=8000)
web.pyと同じディレクトリへname.jsonファイルも用意しておきます。
{ "name":"Angular2 JSON" }
起動します。
$ python3 web.py
これで、http://localhost:8000/name.json で取得できます。
Angular2の src/app/app.module.ts は次のようにします。
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NameService } from './name.service';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent ],
providers: [ NameService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
src/app/app.component.ts は次のようにします。
import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map'
import { NameService } from './name.service';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent implements OnInit {
name = 'Angular';
constructor (private nameService: NameService) {}
ngOnInit():void {
this.nameService.get().map(
(res: Response) => this.name = res.json().name as string
).toPromise();
}
}
src/app/name.service.tsを追加します。
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class NameService {
private link = 'http://localhost:8000/name.json';
constructor (private http: Http) {}
get(): Observable<Response> {
return this.http.get(this.link);
}
}
広告：