2016年12月30日

Angular2のRouting

app.module.ts内などでRouterModuleを読み込み@NgModuleでimportsでルーティング設定を行います。

import { RouterModule }   from '@angular/router';

@NgModule({
...
imports: [
RouterModule.forRoot([
{
path: 'list',
component: ListComponent
},
{
path: 'detail',
component: DetailComponent
}
])
]
...
});


app.components.ts内の@Componentではrouter-outletタグで@NgModuleのpathがあった場合にcomponentがouter-outletタグに指定したコンポーネントが表示されます。

@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<router-outlet></router-outlet>
`
});
タグ:Angular2 routing
posted by ねこまんま at 17:27 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月21日

Angular2のライフサイクルメソッド

OnInitやOnChangesをimportしておけば子コンポーネントでngOnInitやngOnChangesといったライフサイクルメソッドが利用可能

import { Component} from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div>
<my-h1 [myText]=h1></my-h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent{
h1:string = "h1";
onClick(){
this.h1 = this.h1+"!";
}
}


import { Component, Input,OnInit,OnChanges } from '@angular/core';

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component implements OnInit,OnChanges{
@Input() myText:String;
ngOnInit() {
console.log("ngOnInit")
}
ngOnChanges(changes) {
console.log('ngOnChanges',changes);
}
}
タグ:Angular2
posted by ねこまんま at 13:03 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

2016年12月20日

Angular2のサービス

Angular2のサービスに関しては「Angular2のDIを知る - Qiita」が詳しかった。

serviceは単純にデータ構造をかえすものにしておいて、providersに配列として登録、constructor(private fooService: FooService)みたいな感じで設定しておけばclass内からアクセスできるようになる。

myFoo.service.ts

export default class FooService {
say1(): string {
return "foo1";
}
say2(): string {
return "foo2";
}
}


app.component.ts

import { Component } from '@angular/core';
import FooService from "./myFoo.service";

@Component({
selector: 'my-app',
providers: [FooService],
template: `
<div>
<h1>{{name}}</h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent {
name:string;
constructor(private fooService: FooService) {
this.name = fooService.say1();
}
onClick(){
this.name = this.fooService.say2();
}
タグ:Angular2
posted by ねこまんま at 00:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月19日

Angular2のコンポーネント

Angular2でコンポーネントapp.modules.tsにコンポーネントを登録しておけば利用できるようになる。

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<my-h1 myText="h1"></my-h1>
<my-h2 myText="h2"></my-h2>
`
})
export class AppComponent {

}


h1.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component {
@Input() myText:String;
}


h2.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-h2',
template: `
<h2>{{myText}}</h2>
`
})
export class h2Component {
@Input() myText:String;
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { h1Component } from './h1.component';
import { h2Component } from './h2.component';

@NgModule({
imports: [
BrowserModule,
FormsModule,
],
declarations: [
AppComponent,
h1Component,
h2Component
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

タグ:Angular2
posted by ねこまんま at 23:28 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

Angular2でただ追加するだけのTODOリスト

Angular2でただTODOを1行ずつ追加するだけのTODOリスト。とりあえずngModelを入力フォームに設定したけど直接取得したい。

import { Component } from '@angular/core';

export class Hero {
id: number;
name: string;
}

const HEROES: Hero[] = [];

@Component({
selector: 'app-root',
styles: [`
input[type='button']{
background:#CCC;
}
input[type='text']{
border:1px solid #CCC;
}
`],
template:`
<h1>{{title}}</h1>
<ul>
<li *ngFor="let hero of heroes">
{{hero.id}} : {{hero.name}}
</li>
</ul>
<div>
<div>
<input type="text" [(ngModel)]="addText">
<input type="button" value="追加" (click)="onClick()">
</div>
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
addText: string;
onClick(){
if(!this.addText)return false;
this.heroes.push({
id: this.heroes.length+1,
name: this.addText
});
this.addText='';
}
}
タグ:Angular2
posted by ねこまんま at 21:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

ng serveでローカルサーバーが立ち上がらない

Angular2の利用でng serveで開発環境が立ち上がるようにしたのに以下のエラーがでて動かなくなった。

getaddrinfo ENOTFOUND localhost
Error: getaddrinfo ENOTFOUND localhost
at errnoException (dns.js:27:10)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:26)


立ち上がる際に以下のようにオプションを指定してあげたらちゃんと立ち上がるようになりました。

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

posted by ねこまんま at 20:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月16日

Angular2の利用

Angular2を触らなくなったのでとりあず環境構築から。

angular-cli



Angular2ではオフィシャルなビルドツールとしてangular-cliが提供されているのでこちらを利用して環境構築を構築するらしい。

まずはインストール

npm install -g angular-cli


これでngコマンドが使えるようになったのでng new アプリ名で簡単に環境を構築できる。

ng new myApp


Successfully initialized git.Installing packages for tooling via npm.と初期化に成功したようなので

以下のコマンドでアプリに移動してnpmのインストールを行う。

cd myApp
npm install


あとはng serveでサーバーを立ち上げれば、http://localhost:4200で表示を確認できる

ng serve


myApp/src/app/app.component.tsの内容を修正してリーロドするとブラウザに修正内容が反映されいるので環境の構築はひとまずこれでOKっぽい。

export class AppComponent {
title = 'app works!!!';
}

タグ:Angular2
posted by ねこまんま at 14:48 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

npmのアップデート

npmが古いようなのでアップデート。

まずはバージョン確認

npm -v


2.15.9と言われたので最新にアップデート

npm update -g npm


もう一度バージョンを確認すると4.0.5になってるので無事アップデートできました。
posted by ねこまんま at 14:31 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2016年12月06日

ES2015(ES6)のIterator

ES2015(ES6)ではIterableなオブジェクトというのが追加されている。

Iterableなオブジェクトはfor-of文で取得する事ができます、わかりやすいのが配列である。

for (let item of [1,2,3]) {
console.log(item);
}


他にもargumentsオブジェクトやnodeListなどいわゆる配列ライクなオブジェクトもIterableなオブジェクトとして定義されているfor-of文で取得する事ができます。

面白いところではStringオブジェクトなどもIterableなオブジェクトとして定義されておりfor-of文で取得する事ができます。

for (let item of 'abcde') {
console.log(item);
}


Iteratorとは?



Iterableなオブジェクトがそんな感じならIteratorとは何かというと、
Iterableなオブジェクトにnext()メソッドを付与して1個づつ取り出しができるようにしたオブジェクトです。
[Symbol.iterator]()を実行することでIteratorオブジェクトを作成できます。

const items = [1, 2, 3];
const iterator = items[Symbol.iterator]();
iterator.next();//Object {value: 1, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//{value: undefined, done: true}


取り出した際にvalueプロパティに値がdoneプロパティに出し切ったかのオブジェクトが出力され、出し切ったらdoneがtrueになります。
タグ:iterator ES6 ES2015
posted by ねこまんま at 13:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする