[ANGULAR] Angular_Tutorial_1

[ANGULAR] Angular_Tutorial_1

728x90

2021.05.31 - [Front-End/angular 7.0] - [ANGULAR] Angular_Tutorial

Angular 7.0 프로그래밍 (2021.06.01)

전날 설치했던 Augury - Chrome Extention 제거 후 Angular Devtools 로 대체

앵귤러 개발 가이드

- 인턴 업무 일환인 교육 운영 업무로 참여한 강의에 대한 수강 내용을 정리 한다.

- 앞으로 진행 되는 내용은 Angular 공식 Tutorial의 내용을 상속 받았다.

1. Angular Data Binding

* value binding

One - way Binding을 지원

{{ }} : 컴포넌트(ts)에 정의 된 변수나 메서드를 템플릿에서 출력할 때 사용

* property binding

One - way Binding을 지원

[property] = "value" : 템플릿에서 HTML 엘리먼트의 속성 값이나 동적 변수를 출력 할 때 사용

imgUrl = "aa.jpg""; `or`

* event binding

One - way Binding을 지원

(event) = "handler" : 템플릿에서 event가 발생 했을 때를 위해 컴포넌트에 event handler를 작성해야 한다. 데이터를 보내거나 함수를 호출할 때 사용

: 템플릿에서 event가 발생 했을 때를 위해 컴포넌트에 event handler를 작성해야 한다.

// hero.component.html input tag Hero name :

// hero.component.ts keyupHeroName(event : any) { this.hero.name = event.target.value; }

Text box에 입력한 값을 Component 값으로 전달

* Direcitve

common module은 따로 import하지 않아도 사용 가능

for 문, if 문과 유사하다

사용 예시

{{i}}/{{users.length}}. {{user}} default

**Attribute Directive : ngModel

Two - way Binding을 지원

[(ngModel)] = "property" : property binding + event binding

: property binding + event binding ngModel 사용을 위해선 App.module.ts 에 추가 모듈 Import 필요 AppModule : Component 묶음

에 추가 모듈 Import 필요

App.module.ts

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; @NgModule({ declarations: [ AppComponent, HeroesComponent ], imports: [ BrowserModule, // FormsModule import를 해야 사용 가능 FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

heroes.component.html

Hero name :

event binding과 value binding이 동시에 진행 된다

Hero name :

레이블을 눌러도 input 칸에 커서가 향하게 됨

== vs ===

== 는 같은지 비교

는 같은지 비교 === 는 타입까지 같은지 비교

728x90

2. Displaying a List

mock-heroes.ts

import { Hero } from './hero'; export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: ' Narco ' }, { id: 13, name: ' Bombasto ' }, { id: 14, name: ' Celeritas ' }, { id: 15, name: 'Magneta ' }, { id: 16, name: 'RubberMan ' }, { id: 17, name: ' Dynama ' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' }, ];

heroes.component.html

My Heroes {{hero.id}} {{hero.name}}

heroes.component.ts

import { Component, OnInit } from '@angular/core'; import{ Hero} from '../hero'; import { HEROES } from '../mock-heroes'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { //hero = 'WindStorm'; hero : Hero = {id:1, name:'WindStorm'}; heroes:Hero[] = HEROES; selectedHero ? :Hero; constructor() { console.log("HeroesComponent 생성자 호출 됨"); } ngOnInit(): void { console.log("HeroesComponent ngOnInit 메서드 호출 됨"); } keyupHeroName(event:any) :void { this.hero.name = event.target.value; } onSelect(hero:Hero):void { this.selectedHero = hero; } }

heros-detail.component.ts

import { Component, Input, OnInit } from '@angular/core'; import{Hero} from '../hero'; @Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit { // 데이터를 넘겨주는 Input 데코레이터 @Input() hero?:Hero; constructor() { } ngOnInit(): void { } }

hero-detail.component.html

{{hero.name|titlecase}} id :{{hero.id}} Hero name :

3. Service

ng generate service [서비스명]

hero.service.ts

import { Injectable } from '@angular/core'; import {Hero} from './hero'; import {HEROES} from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes() : Hero [] { return HEROES; } }

HeroService는 DI(Dependency Injection) 를 사용하여 HeroesComponent 에 주입 (inject) 되어진다

heroes.component.ts

import { Component, OnInit } from '@angular/core'; import{ Hero} from '../hero'; import { HEROES } from '../mock-heroes'; import {HeroService} from '../hero.service'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { //hero = 'WindStorm'; hero : Hero = {id:1, name:'WindStorm'}; heroes:Hero[] = HEROES; selectedHero ? :Hero; //생성자에 히어로서비스 주입 constructor(private heroService : HeroService) { console.log("HeroesComponent 생성자 호출 됨"); } ngOnInit(): void { console.log("HeroesComponent ngOnInit 메서드 호출 됨"); this.getHeroes(); } keyupHeroName(event:any) :void { this.hero.name = event.target.value; } onSelect(hero:Hero):void { this.selectedHero = hero; } getHeroes() : void { this.heroes = this.heroService.getHeroes(); } }

* Observable Service

Observable은 RxJS Library 의 중요한 클래스이다

Angular의 HttpClient 의 메서드들은 RxJS Observable 객체를 리턴 한다 .

RxJS의 of( ) function 은 Server 로 부터 데이터를 가져오는 것 처럼 simulate 하는 함수이다. of() 대신 HttpClient 의 get() 메서드 사용하기

function 은 Server 로 부터 데이터를 가져오는 것 처럼 simulate 하는 함수이다.

hero.service.ts

import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import {Hero} from './hero'; import {HEROES} from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } // of 함수 사용 및 Observable 객체 타입 맞춰주기 getHeroes() : Observable { return of(HEROES); } }

값을 동적으로 받아오는 것이 아니기 때문에 getHeroes()에서 에러가 발생한다. .subscribe() 를 사용해서 값을 가져오고 Callback 함수에서 처리 한다.

heroes.compoent.ts

getHeroes() : void { // this.heroes = this.heroService.getHeroes(); //히어로 서비스에서 of()메서드로 생성한 가상 값을 .subscribe 함수로 받아 옴 this.heroService.getHeroes().subscribe(heroesObj => this.heroes = heroesObj); }

* Message Service

ng generate component [컴포넌트명]

App.component.html에 추가

ng generate service [서비스명]

message.service.ts

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class MessageService { messages: string[] = []; constructor() { } add(message: string) : void{ this.messages.push(message); } clear(): void { this.messages = []; } }

1. HeroService에서 MessageService 호출

service-inservice scenario

hero.service.ts

import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import {Hero} from './hero'; import { MessageService } from './message.service'; import {HEROES} from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { //생성자에 메세지 서비스 주입 constructor(private messageService: MessageService) { } //메세지 서비스에서 add를 호출해 사용하는 getHeroes() 메서드 생성 getHeroes() : Observable { this.messageService.add(`HeroService: fetched heroes`); return of(HEROES); } }

2. MessageComponent에서 MessageService 호출

기존에는 Typescript 내부에서만 사용 했기 때문에 private으로 했지만 템플릿에서 사용을 원할 경우 public으로 설정

message.component.ts

import { Component, OnInit } from '@angular/core'; import { MessageService } from '../message.service'; @Component({ selector: 'app-messages', templateUrl: './messages.component.html', styleUrls: ['./messages.component.css'] }) export class MessagesComponent implements OnInit { //생성자에 메세지 서비스 주입 constructor(public messageService : MessageService) { } ngOnInit(): void { } }

message.component.html

Messages Clear messages {{message}}

3. HeroesComponent에서 MessageService 호출

import { HeroService } from '../hero.service'; export class HeroesComponent implements OnInit { selectedHero?: Hero; heroes: Hero[] = []; //생성자에 메시지 서비스 주입 constructor(private heroService: HeroService, private messageService: MessageService) { } ngOnInit() { this.getHeroes(); } onSelect(hero: Hero): void { this.selectedHero = hero; this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`); } getHeroes(): void { this.heroService.getHeroes().subscribe(heroesObj => this.heroes = heroesObj); } }

728x90

from http://ktae23.tistory.com/169 by ccl(S) rewrite - 2021-06-01 23:26:30