앵귤러4 튜토리얼
-
2-15 Observable사용하기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 9. 09:10
Observable사용하기Http서비스 메소드는 HTTP Response객채에서 Observable을 리턴한다.Observable은 배열과 같은 연산자로 처리 할 수 있는 이벤트 스트림이다. 영웅조회 기능 추가영웅조회용 서비스를 생성한다.ng g service hero-service –m app src/app/hero-search.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import { Hero } from './hero..
-
2-14 http를 이용한 영웅 추가앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 9. 09:09
http를 이용한 영웅 추가서비스에 post메소드를 이용하여 추가 메소드를 생성한다. src/app/hero.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import 'rxjs/add/operator/toPromise'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { private heroesUrl = 'http://localhost:3000/heroes'; constructor(private http:Http..
-
2-13 http를 이용한 영웅 수정앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 9. 09:08
http를 이용한 영웅 수정서비스에 update메소드를 추가한다. src/app/hero.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import 'rxjs/add/operator/toPromise'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { private heroesUrl = 'http://localhost:3000/heroes'; constructor(private http:HttpClient){} g..
-
2-12 HttpClient Promise를 사용하여 영웅목록 가져오기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 9. 09:07
HttpClient Promise를 사용하여 영웅목록 가져오기 지금까지 만든 앱을 개선해보자l 서버에서 영웅 데이터 가져오기l 영웅 추가, 편집, 삭제l 변경사항 서버에 저장 http서비스를 사용하려면 @angular/common/http라이브러리에서 HttpClientModule을 임포트해야 한다. src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; //import { HttpModule } from '@angular/http'; import { HttpC..
-
2-11 json-server 설치앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 8. 09:00
Json-server를 설치json-server는 json파일을 이용하여 간단한 RESTful서버를 만들 수 있다.npm intall –g json-serverjson-server에서 제공할 영웅목록 json파일 생성 heroes.json { "heroes" : [ { "id": 11, "name": "홍길동"}, { "id": 12, "name": "이순신"}, { "id": 13, "name": "수퍼맨"}, { "id": 14, "name": "배트맨"}, { "id": 15, "name": "로빈훗"}, { "id": 16, "name": "장보고"}, { "id": 17, "name": "을지문덕"}, { "id": 18, "name": "김유신"}, { "id": 19, "name": "간디"..
-
2-10 스타일 적용하기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 8. 08:58
스타일 적용대시보드에 스타일을 적용하기 위해 컴포넌트를 수정한다. src/app/dashboard.component.ts import { Component, OnInit } from '@angular/core'; import { Hero } from './hero' import { HeroService } from './hero.service'; @Component({ selector: 'my-dashboard', templateUrl: './dashboard.component.html', styleUrls:['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { heroes: Hero[] = []; const..
-
2-9 영웅 내역으로 조회앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:21
영웅 내역으로 조회Parameterized route(파라미터를 이용한 경로)를 이용하여 경로 설정에 영웅편집기에 대한 경로를 추가한다. src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { HeroDetailComponent } from './hero-detail.compo..
-
2-7 경로배정에 대시보드 추가앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:16
경로배정에 대시보드 추가경로배정은 다양한 뷰를 제공할 때 의미가 있다. 지금까지 만든 프로그램에 대시보드를 추가해 보자.ng g component dashboard --flat src/app/dashboard.component.ts import { Component, OnInit } from '@angular/core'; import { Hero } from './hero' import { HeroService } from './hero.service'; @Component({ selector: 'my-dashboard', template: '대시보드' }) export class DashboardComponent implements OnInit { ngOnInit() { } } 모듈에 대시보드컴포너트 ..