분류 전체보기
-
03-01 아키텍처 개요앵귤러/02 앵귤러 기초 - 아키텍처 2017. 8. 14. 08:55
아키텍처 개요Angular는 HTML과 JavaScript 또는 JavaScript로 컴파일되는 TypeScript와 같은 언어로 클라이언트 응용 프로그램을 작성하기 위한 프레임워크입니다.프레임 워크는 몇개의 라이브러리로 구성되며, 일부 라이브러리는 코어라이브러리이고 일부 라이브러리는 선택적 라이브러리입니다.Angular용 마크업을 사용하여 HTML 템플릿을 구성하고, 이러한 템플릿을 관리하기 위한 컴포넌트 클래스를 작성하며, 서비스의 응용 프로그램 로직을 추가하며, 컴포넌트와 서비스를 모듈로 묶음으로써 Angular 응용 프로그램을 작성합니다.그런 다음 루트모듈을 부트스트랩하여 앱을 실행합니다. Angular는 브라우저에서 애플리케이션 콘텐츠를 제공하고 당신이 제공하는 명령에 따라 사용자 상호작용에 응..
-
Angular CLI 사용법앵귤러/앵귤러 팁모음 2017. 8. 14. 08:50
Angular CLI앵귤러4에서 앵귤러를 제대로 사용하기 위해서는 앵귤러CLI(Command Line Interface)의 사용법을 배울 필요가 있다.프로젝트 생성, 서버가동, 컴포넌트 등 각종 클래스 생성 및 배포용 앱 작성 까지 다양하게 사용할 수 있다. 설치홈페이지 : https://cli.angular.io설치 : npm install –g @angular/cli도움말 : ng help 프로젝트 생성 : ng new PROJECT-NAME 서버 가동 : ng serve서버 가동 후 호출 URL : http://localhost:4200/서버 가동시 디폴트 호스트 및 포트설정 : ng serve –host 0.0.0.0 –port 4201 서버 가동 및 브라우저 호출 : ng serve –o ng ..
-
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..