앵귤러
-
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를 클릭하면 영웅 목록을 보여준다.여기에서도 해당영웅을 클릭하면 영웅의 이름을 수정하는 화면으로 이동한다. 화면의 흐름도는 위와 같다.
-
1 Angular 시작하기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 4. 17:42
본 문서는 연습삼아 angular.io에서 제공하는 Docs를 내맘대로 번역하였습니다.작성 당시 Angular 현재 버전은 4.3.3입니다.빠른 시작좋은 도구를 사용하면 모든 것을 수작업으로 다룬 것보다 응용 프로그램 개발을보다 빠르고 쉽게 유지 관리 할 수 있습니다.Angular CLI는 프로젝트를 만들고 파일을 추가하며 테스트, 번들링 및 배포와 같은 다양한 개발 작업을 수행 할 수있는 명령 줄 인터페이스 도구입니다.이 가이드의 목표는 모든 Angular 프로젝트에 도움이되는 스타일 가이드 권장 사항을 준수하면서 Angular CLI를 사용하여 TypeScript에서 간단한 Angular 응용 프로그램을 작성하고 실행하는 것입니다.이 장을 마치면, CLI를 사용하여 개발에 대한 기본 지식을 얻고 ..