앵귤러4 튜토리얼
-
2-6 경로배정(Routing) 추가앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:14
경로배정(Routing) 추가이제 경로배정을 추가하는 작업을 진행해 보자. src/index.html doctype html> 태그태그 맨 윗부분에 태그를 추가하여야 한다. 모듈에 경로 설정하기 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 { HeroDetailCompo..
-
2-5 경로배정(Routing)을 위한 컴포넌트 수정앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:12
경로배정(Routing)을 위한 컴포넌트 수정Angular가 제공하는 컴포넌트 라우터를 적용해 보자.서비스 분리에서 사용했던 소스를 변경해서 적용해 보자. 1. 먼저 AppComponent를 HeroesComponent로 바꾸어 보자.절차는 다음과 같다.l app.component.ts파일을 heroes.component.ts파일로 이름 변경l Appcomponent클래스를 HeroesComponent클래스로 변경l app-root 셀랙터를 my-heroes로 변경 src/app/heroes.component.ts import {Component, OnInit} from '@angular/core'; import { Hero } from './hero'; import { HeroService } from..
-
2-4 서비스 분리앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:09
서비스 분리(Services)컴포넌트 마다 데이터를 액세스 하는 동일한 코드가 있을 수 있다. 이러한 코드들을 모아서 서비스로 만들어 재사용할 수 있다. 컴포넌트에서 데이터액세스 부분을 제거함으로써 좀더 뷰에 집중할 수 있으며, 모조 서비스(mock service)를 이용하여 유닛테스트를 좀더 쉽게 할 수 있다. 이전 장에서 만든 어플리케이션을 리팩토링 해보자.app.component.ts파일을 hero.service.ts, mock-heroes.ts, app.component.ts파일로 분리하였다.ng명령어 : ng g service hero src/app/hero.service.ts import { Injectable } from '@angular/core'; import { Hero } from '..
-
2-3 영웅여행 마스터/디테일 분리앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:05
마스터/디테일(Master/Detail) 이번에는 영웅 목록을 보여주고, 뷰 탬플릿에 영웅을 추가하는 프로그램을 만들어 본다. src/app/app.component.ts import {Component} from '@angular/core'; export class Hero{ id: number; name: string; } @Component({ selector: 'app-root', template:` {{title}} 나의 영웅들 {{hero.id}}{{hero.name}} {{selectedHero.name}} 내역! 아이디 : {{selectedHero.id}} 이름 : `, styles:[` .selected{ background-color: #CFD8DC !important; } .hero..
-
2-2 영웅편집기 만들기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 5. 13:02
영웅편집기 만들기 폴더구조는 위와 같이 진행할 예정이다. 먼저 프로젝트를 생성하고, 서버를 구동한다. ng new angular-tour-of-heroes cd angular-tour-of-heroes ng serve -open @Component, select 메타데이타, template 메타데이타, {{}}(표현식) app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` {{title}} {{hero.name}} id: {{hero.id}} 이름: `, styleUrls: ['./app.component.css'] }) export class AppCompon..
-
2-1 튜토리얼-소개 영웅만들기 흐름도앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 4. 21:29
소개https://angular.io/docs/ts/latest/tutorial/사이트에 나오는 튜토리얼을 따라해 보고자 한다. 영웅여행 어플리케이션을 만든다.상단에 대시보드와 영웅들을 만들고 아래에 탑영웅들을 표시한다. 탑영웅중에서 한명을 클릭하면 해당 영웅의 이름을 수정할 수 있게 한다. 메인화면에서 Heroes를 클릭하면 영웅 목록을 보여준다.여기에서도 해당영웅을 클릭하면 영웅의 이름을 수정하는 화면으로 이동한다. 화면의 흐름도는 위와 같다.