[ Angular 2: Horizon ] rethinkdb 맛보기

angular2, horizon, rethinkdb 를 사용해보자.

프로젝트 Setup

$ ng new myproject
$ cd myproject
$ npm install @horizon/client --save
$ hz init

myproject 폴더안에  .hz 폴더가 생성되었다.

.hz/config.toml 을 열고 가장 마지막에 다음을 추가한다.

connect = "localhost:28015"

myproject 밑에서 cmd 창을 열고

$ hz serve --dev

를 실행하면, 다음과 같이 표시된다. 에러없이 horizon 이 잘 시작되는 지 확인한다.

horizon.service.ts 생성

$ ng g service horizon

src/app/hroizon.service.ts

import { Injectable } from '@angular/core';
declare var require: any
const Horizon = require('@horizon/client');

@Injectable()
export class HorizonService {
  table = Horizon({ host: 'localhost:8181' });
}

src/app/app.module.ts

...
...
import { HorizonService } from "./horizon.service";

@NgModule({
...
...
  providers: [HorizonService],
...
})
...

horizonService 적용

app.component.html

<h1>{{title}}</h1>
<form (submit)="add(todo)">
  <input type="text" [(ngModel)]="todo" name="todo">
  <button type="submit">Add</button>
</form>
<ul>
  <li *ngFor="let item of items | async">
    {{item.text}}
  </li>
</ul>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HorizonService } from "./horizon.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  title = 'app works!';
  todo: string = '';
  items: any;
  table = this.horizon.table('todos');

  constructor(private horizon: HorizonService) {
  }

  ngOnInit() {
    this.load();
  }

  load() {

    this.items = this.table
        .order('datetime', 'descending')
        .limit(10)
        .watch();
  }

  add(todo: string) {

    this.table.store({
      text: todo,
      datetime: new Date(),
    });

    // clear
    this.todo = '';
  }
}

 실행해보기

$ ng serve

브라우저 주소창에 localhost:4200 를 입력해서 열어본다.

 

참고 : http://horizon.io/

댓글 남기기