Angular2를 활용한 컴포넌트 중심의 개발

component-based development using Angu-lar2Angular2 를 활용한 컴포넌트 중심의 개발

160514 대구개발자그룹 정진욱

• Google 이 만든 open-source web applica-tion MV* framework

• MEAN stack 중 Frontend 파트에 해당– MEAN = MongoDB + ExpressJS + AngularJS +

Node.JS

AngularJS?

• 2014 년 10 월 – ngEurope conference 에서 첫소개

• 2015 년 4 월 30 일 (Alpha Version)• 2015 년 12 월 (Beta Version)– https://angular.io/ 에서 다운로드 받을 수 있게됨

• 2016 년 5 월 – 첫 release candidate 가 되어 출시함

Angular2 의 History

https://angular.io/

https://angular.io/

• Angular 1 의 주요 컨셉이 사라짐– Deprecated : Controllers, Directive Definition Ob-

ject, $scope, angular.module, jqLite

• Angular 2 는 쉽다 .– Angular1 의 주요 컨셉은 사라졌지만 , 2 는 Javascript

Class 구축에만 집중할 수 있게 한다 .

• TypeScript 를 이용한다 .– JS 의 상위집합업어 OOP 지원 , 명확한 형정의 제공으로

가독성의 장점 , 프리컴파일이 필요

Angular2 의 중요특징

• 브라우저 지원– 크롬 , 파폭 , 오페라 , 사파리 , IE11, Android, iOS

6+ (PC 보다는 , 모바일 앱을 위한 프레임워크 )

• 기타 눈여겨볼 특징– Angular 1 의 확장이 아닌 , 2 는 새로 만들었다 .– Angular 2 는 모바일을 고려하여 적은 대역폭으로

이용할 수 있도록 하였다 .– Angular 1 에 비해 빠르다 . (3~10 배 )

Angular2 의 중요특징

Angular1 vs Angular2

Reference : http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

• Component 를 이용한 탬플릿과 서비스 로직 관리

Angular2 의 아키텍쳐

• Component 정의– 기능 명세에 의한 개발– 명세 따른 배포 , 조립 가능한 독립 구성단위– 컴포넌트는 인터페이스만을 통해서 접근 ( 예 : WSDL)

• Component 중심개발의 특징– 관심사분리의 개발 방법으로 컴포넌트간 연결이 느슨하다

(loosely coupled).– 컴포넌트 재활용에 초점을 맞춘다 .

컴포넌트 중심의 개발

• Front-End 에서의 컴포넌트– 커스텀 엘리먼트 (HTML5) 로 볼 수 있다– Angular2 에서 컴포넌트는 특정 Element 를 의미한다 .– 사용예 : <my-component></my-component>

• Angular 1 의 컴포넌트– directives, controllers, Scope 에 의해 구현– 컴포넌트에 해당하는 directive 는 Angular1 의

구성요소의 일부였다 .

Angular2 의 컴포넌트

• 컴포넌트 중심의 Angular2– Angular2 는 컴포넌트 중심으로 개발을 진행한다 .– 컴포넌트는 Template 과 Logic 을 포함한다 .– component 는 하나의 독립적인 모듈결합을 가진다 .– component 는 다른 component 나 service 를

의존주입 받을 수 있다 .


Angular2 를 활용한 컴포넌트 중심의 개발

Component Component-Based System

Import {Component, .. } from ‘@angular/core’;Import {Http,Headers .. } from ‘@angular/http’;’...@Component({ selector: 'app' })

@Injectable()export class App{ constructor(http:Http){ ... }}

Import {Component, .. } from ‘@angular/core’;Import {Http,Headers .. } from ‘@angular/http’;’...@Component({ selector: 'app' })

@Injectable()export class App{ constructor(http:Http){ ... }}

Import {Component, .. } from ‘@angular/core’;...@Component({ selector: 'app' })

export class App{ constructor(){ ... }} Component-Based

Angular2 ApplicationAngular2 Component


import {Component} from ‘@angular2/angular2'

@Component({ selector: 'my-component', template: '<div>Hello my name is {{name}}. <button (click)=“sayHello()">Say Hello</button></div>' }) export class MyComponent { constructor() { this.name = 'Programmer' } sayHello () { console.log('My name is', this.name) } }

• Angular2 의 컴포넌트 정의

• 아키텍쳐의 주요 구성단위는 다음과 같다 .– Module , Component, Template– Metadata, Data Binding, Directive– Service, Dependency Injection

Angular2 의 주요 구성단위

• Angular 는 많은 모듈로 이루어져있다 .• Module 은 다른 모듈에 의해 Import 될 수 있다 .

– Import 시 핵심모듈은 ‘ @’ 을 붙인다 .• @angular/core (angular 핵심모듈 )• @angular/common, @angular/router, and @angular/

http ...

• Module 은 export 할때 여러 자료형을 가진다 .– Classes, function, values

1. Module

• 핵심모듈 Import– import { Component } from '@angular/core';

• RC 버전이후에 반영

• 사용자 정의 모듈 Import– import { AppComponent } from './app.compo-

nent';

1. Module

• 컴포넌트는 함수를 통해 View 를 바인딩 컨트롤

2. Component

import {Component} from 'angular2/core';@Component({ selector: 'my-app', template: ‘...’})export class AppComponent { name =''; district = ['namgu', 'bukgu', 'seogu', 'suseonggu']; constructor() { this.name = 'daegu' } sayCityName() { alert('Our city name is '+this.name); }}

Module=AppComponent

MetadataTo the Class

• Component 가 Render 하여 생성된다 .

3. Template

<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><div *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}}</div><hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

• Angular 가 Class 를 어떻게 처리해야 할지를 정의

4. Metadata

@Component({ selector: 'hero-list', templateUrl: 'app/hero-list.component.html', directives: [HeroDetailComponent], providers: [HeroService]})export class HeroesComponent { ... }

5. Data Binding

• Component 의 탬플릿은 모듈내 function 에 의해 제어되고 , Two Way Binding 된 변수(model) 를 통해 rendering 된다 .

<div>{{hero.name}}</div><hero-detail [hero]="selectedHero"></hero-detail><div (click)="selectHero(hero)"></div>

5. Data Binding

• Two way binding– ngModel directive 를 이용하여 모델은 Element 에

연결되고 , 모듈이 이를 제어한다 .<input [(ngModel)]="hero.name">

6. Directive

• Directive 를 통해 Template 은 동적으로 변경됨– Angular 에서 제공하는 대표적인 Directive

• ngFor 는 list 에 대한 item 을 출력• ngModel directive 는 two-way binding 을 함• ngIf 는 component 의 포함여부를 결정

<div *ngFor="let hero of heroes"></div><hero-detail *ngIf="selectedHero"></hero-detail>

6. Directive

• 컴포넌트에서 사용자 Directive 를 Import 가능import { Directive, ElementRef, Input } from '@angular/core';@Directive({ selector: '[myHighlight]' })export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; }}import { Component } from '@angular/core';import { HighlightDirective } from './highlight.directive';@Component({ selector: 'my-app', templateUrl: 'app/app.component.html', directives: [HighlightDirective]})export class AppComponent { }

directive definition

Using directive

• Template 에서 attribute directive 는 [Direc-tive 명 ]=“string literals” 형태로 사용

6. Directive

<p [myHighlight]="color" [defaultColor]="'violet'"> Highlight me too!</p>

import { Injectable } from '@angular/core';

import { HEROES } from './mock-he-roes';

@Injectable() // 서비스 클래스에 추가해야 하는 Injectable Decoratorexport class HeroService { getHeroes() { return HEROES; }}

7. Service

• 재사용이 빈번한 기능을 서비스로 정의함import { Hero } from './hero';export var 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": "Rubber-Man"}, {"id": 17, "name": "Dynama"}, {"id": 18, "name": "Dr IQ"}, {"id": 19, "name": "Magma"}, {"id": 20, "name": "Tornado"}];

Heroservice.tsReturn the mock hero

mock-heroes.ts

• 서비스가 의존성을 가지는 경우 constructor in-jection pattern 을 이용해 주입받는다 .

7. Service

import { Injectable } from '@angular/core';import { Hero } from './hero';import { HEROES } from './mock-heroes';import { Logger } from '../logger.service';@Injectable()export class HeroService { constructor(private logger: Logger) { } getHeroes() { this.logger.log('Getting heroes ...') return HEROES; }}

• Construct 의 parameter 를 통한 서비스 주입

8. Dependency Injection

import { Component } from '@angular/core';import { Hero } from './hero';import { HeroService } from './hero.service';@Component({ selector: 'hero-list', template: `<div *ngFor="let hero of heroes">{{hero.id}} - {{hero.name}} </div>`,})export class HeroListComponent { heroes: Hero[]; constructor(heroService: HeroService) { this.heroes = heroService.getHeroes(); } }

With D.I

• Constructor 주입 미사용시 변수에 직접할당

8. Dependency Injection

import { Component } from '@angular/core';import { HEROES } from './mock-heroes';@Component({ selector: 'hero-list', template: ` <div *ngFor="let hero of heroes"> {{hero.id}} - {{hero.name}} </div> `,})export class HeroListComponent { heroes = HEROES;}

Without D. I.

• Typescript 는 JS 의 상위집합 (superset) 언어– ES2016+ 특징을 가진다 .

- Typescript = ES6 + TYpes + Annotaions - Generics 나 Lambdas 를 이용할 수 있다 .

• Javascript 의 결점 보완– OOP( 상속 , 인터페이스 등 ) 지원– Primitive Type 지원 (num, string, boolean..)

으로 가독성의 장점

Typescript 의 특징

• 프리컴파일 언어– coffescript, atscript, typescript

• Javascript 의 미래버전인 Ecma Script 사용– ECMA Script 는 Ecma International 의 기술규격에

정의된 스크립트 언어– Javascript 는 ECMA Script 를 따른다 .

Typescript 의 특징

• Typescript 는 ES6 의 스펙을 포함한다

Typescript 의 위치

• Node.JS 설치후 npm 명령어를 이용하여 설치– $ npm install -g typescript– Compile : $ tsc test.ts– Test : $ node test.js

• 설치후 Windows 에서 패스가 안잡히는 경우– C:\Program Files (x86)\Microsoft SDKs\Type-

Script\1.7 디렉터리를 환경변수에 추가

Typescript 컴파일러 설치

Typescript 컴파일과 테스트

TS JS HTMLTsc 로 컴파일 JS 로딩

Typescript 에서 Class 사용예

/src/typescript/ex3_class/test.ts

• TS 파일에 클래스 정의class Gorilla { foo: number; }class chimpanzee { bar: string; }

class Primates { constructor(foo: Gorilla, bar: chimpanzee) { }}

let primates = new Primates(new Gorilla(), new chimpanzee()); // valid

var Gorilla = (function () { function Gorilla() { } return Gorilla;})();var chimpanzee = (function () { function chimpanzee() { } return chimpanzee;})();var Primates = (function () { function Primates(foo, bar) { } return Primates;})();var primates = new Primates(new Gorilla(), new chimpanzee()); // valid

Typescript 에서 Class 사용예

/src/typescript/ex3_class/test.ts

• TSC 에 의해 JS 로 컴파일된 결과

Typescript 에서 Interface 사용예

/src/typescript/ex4_interface/test.ts

interface Person { firstName: string; lastName: string;}

function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName;}

var user = { firstName: "Happy", lastName: "Grammer" };

document.body.innerHTML = greeter(user);

• TS 파일에 Interface 정의

Typescript 에서 Interface 사용예

/src/typescript/ex4_interface/test.js

• TSC 에 의해 JS 로 컴파일된 결과function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName;}var user = { firstName: "Happy", lastName: "Grammer" };document.body.innerHTML = greeter(user);

THANK YOU

https://github.com/DaeguDevGroup/angular2-bootstrap




Angular2를 활용한 컴포넌트 중심의 개발

Software