Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
component-based development using Angular2
Angular2를 활용한 컴포넌트 중심의 개발
160514 대구개발자그룹 정진욱
• Google이 만든 open-source web application
MV* framework
• MEAN stack중 Frontend 파트에 해당
– MEAN = MongoDB + ExpressJS + Angula...
• 2014년 10월
– ngEurope conference에서 첫소개
• 2015년 4월 30일 (Alpha Version)
• 2015년 12월 (Beta Version)
– https://angular.io/ 에서...
• Angular 1의 주요 컨셉이 사라짐
– Deprecated : Controllers, Directive Definition Object,
$scope, angular.module, jqLite
• Angular ...
• 브라우저 지원
– 크롬, 파폭, 오페라, 사파리, IE11, Android, iOS 6+
(PC보다는, 모바일 앱을 위한 프레임워크)
• 기타 눈여겨볼 특징
– Angular 1의 확장이 아닌, 2는 새로 만들었다....
Angular1 vs Angular2
Reference : http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
• Component를 이용한 탬플릿과 서비스 로직 관리
Angular2의 아키텍쳐
• Component 정의
– 기능 명세에 의한 개발
– 명세 따른 배포, 조립 가능한 독립 구성단위
– 컴포넌트는 인터페이스만을 통해서 접근 (예 : WSDL)
• Component 중심개발의 특징
– 관심사분리의 개...
• Front-End에서의 컴포넌트
– 커스텀 엘리먼트(HTML5)로 볼 수 있다
– Angular2에서 컴포넌트는 특정 Element를 의미한다.
– 사용예 : <my-component></my-component>
•...
• 컴포넌트 중심의 Angular2
– Angular2는 컴포넌트 중심으로 개발을 진행한다.
– 컴포넌트는 Template과 Logic을 포함한다.
– component는 하나의 독립적인 모듈결합을 가진다.
– comp...
Angular2를 활용한 컴포넌트 중심의 개발
Component Component-Based System
Import {Component, .. } from ‘@angular/core’;
Import {Http,Head...
Angular2의 컴포넌트
import {Component} from ‘@angular2/angular2'
@Component({
selector: 'my-component',
template: '<div>Hello m...
• 아키텍쳐의 주요 구성단위는 다음과 같다.
– Module , Component, Template
– Metadata, Data Binding, Directive
– Service, Dependency Injectio...
• Angular는 많은 모듈로 이루어져있다.
• Module은 다른 모듈에 의해 Import 될 수 있다.
– Import시 핵심모듈은 ‘@’을 붙인다.
• @angular/core (angular 핵심모듈)
• @a...
• 핵심모듈 Import
– import { Component } from '@angular/core';
• RC 버전이후에 반영
• 사용자 정의 모듈 Import
– import { AppComponent } from...
• 컴포넌트는 함수를 통해 View를 바인딩 컨트롤
2. Component
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templa...
• Component가 Render하여 생성된다.
3. Template
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<div *ngFor="let hero o...
• Angular가 Class를 어떻게 처리해야 할지를 정의
4. Metadata
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.ht...
5. Data Binding
• Component의 탬플릿은 모듈내 function에 의해
제어되고, Two Way Binding된 변수(model)를 통
해 rendering 된다.
<div>{{hero.name}}<...
5. Data Binding
• Two way binding
– ngModel directive를 이용하여 모델은 Element에 연
결되고, 모듈이 이를 제어한다.
<input [(ngModel)]="hero.name...
6. Directive
• Directive를 통해 Template은 동적으로 변경됨
– Angular에서 제공하는 대표적인 Directive
• ngFor는 list에 대한 item을 출력
• ngModel direc...
6. Directive
• 컴포넌트에서 사용자 Directive를 Import가능
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ s...
• Template에서 attribute directive는 [Directive
명]=“string literals” 형태로 사용
6. Directive
<p [myHighlight]="color" [defaultCol...
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable() //서비스 클래스에 추가해야
하는 Injec...
• 서비스가 의존성을 가지는 경우 constructor
injection pattern을 이용해 주입받는다.
7. Service
import { Injectable } from '@angular/core';
import...
• Construct의 parameter를 통한 서비스 주입
8. Dependency Injection
import { Component } from '@angular/core';
import { Hero } from ...
• Constructor 주입 미사용시 변수에 직접할당
8. Dependency Injection
import { Component } from '@angular/core';
import { HEROES } from '...
• Typescript는 JS의 상위집합(superset) 언어
– ES2016+ 특징을 가진다.
- Typescript = ES6 + TYpes + Annotaions
- Generics나 Lambdas를 이용할 수 ...
• 프리컴파일 언어
– coffescript, atscript, typescript
• Javascript의 미래버전인 Ecma Script 사용
– ECMA Script는 Ecma International의 기술규격에...
• Typescript는 ES6의 스펙을 포함한다
Typescript의 위치
• Node.JS 설치후 npm 명령어를 이용하여 설치
– $ npm install -g typescript
– Compile : $ tsc test.ts
– Test : $ node test.js
• 설치후 Windo...
Typescript 컴파일과 테스트
TS JS HTML
Tsc로 컴파일 JS 로딩
Typescript에서 Class 사용예
/src/typescript/ex3_class/test.ts
• TS파일에 클래스 정의
class Gorilla { foo: number; }
class chimpanzee { ...
var Gorilla = (function () {
function Gorilla() { }
return Gorilla;
})();
var chimpanzee = (function () {
function chimpan...
Typescript에서 Interface 사용예
/src/typescript/ex4_interface/test.ts
interface Person {
firstName: string;
lastName: string;
}...
Typescript에서 Interface 사용예
/src/typescript/ex4_interface/test.js
• TSC에 의해 JS로 컴파일된 결과
function greeter(person) {
return "...
THANK YOU
https://github.com/DaeguDevGroup/angular2-bootstrap
Upcoming SlideShare
Loading in …5
×

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

11,475 views

Published on

Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.

대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타

필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.

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

- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.

*Change Log*

- 2016-05-14 : 슬라이드 첫 버전을 업로드

Published in: Software
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. component-based development using Angular2 Angular2를 활용한 컴포넌트 중심의 개발 160514 대구개발자그룹 정진욱
  2. 2. • Google이 만든 open-source web application MV* framework • MEAN stack중 Frontend 파트에 해당 – MEAN = MongoDB + ExpressJS + AngularJS + Node.JS AngularJS?
  3. 3. • 2014년 10월 – ngEurope conference에서 첫소개 • 2015년 4월 30일 (Alpha Version) • 2015년 12월 (Beta Version) – https://angular.io/ 에서 다운로드 받을 수 있게됨 • 2016년 5월 – 첫 release candidate가 되어 출시함 Angular2의 History
  4. 4. • Angular 1의 주요 컨셉이 사라짐 – Deprecated : Controllers, Directive Definition Object, $scope, angular.module, jqLite • Angular 2는 쉽다. – Angular1의 주요 컨셉은 사라졌지만, 2는 Javascript Class 구축에만 집중할 수 있게 한다. • TypeScript를 이용한다. – JS의 상위집합업어 OOP 지원, 명확한 형정의 제공으 로 가독성의 장점, 프리컴파일이 필요 Angular2의 중요특징
  5. 5. • 브라우저 지원 – 크롬, 파폭, 오페라, 사파리, IE11, Android, iOS 6+ (PC보다는, 모바일 앱을 위한 프레임워크) • 기타 눈여겨볼 특징 – Angular 1의 확장이 아닌, 2는 새로 만들었다. – Angular 2는 모바일을 고려하여 적은 대역폭으로 이 용할 수 있도록 하였다. – Angular 1에 비해 빠르다. (3~10배) Angular2의 중요특징
  6. 6. Angular1 vs Angular2 Reference : http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
  7. 7. • Component를 이용한 탬플릿과 서비스 로직 관리 Angular2의 아키텍쳐
  8. 8. • Component 정의 – 기능 명세에 의한 개발 – 명세 따른 배포, 조립 가능한 독립 구성단위 – 컴포넌트는 인터페이스만을 통해서 접근 (예 : WSDL) • Component 중심개발의 특징 – 관심사분리의 개발 방법으로 컴포넌트간 연결이 느슨 하다(loosely coupled). – 컴포넌트 재활용에 초점을 맞춘다. 컴포넌트 중심의 개발
  9. 9. • Front-End에서의 컴포넌트 – 커스텀 엘리먼트(HTML5)로 볼 수 있다 – Angular2에서 컴포넌트는 특정 Element를 의미한다. – 사용예 : <my-component></my-component> • Angular 1의 컴포넌트 – directives, controllers, Scope에 의해 구현 – 컴포넌트에 해당하는 directive는 Angular1의 구성요 소의 일부였다. Angular2의 컴포넌트
  10. 10. • 컴포넌트 중심의 Angular2 – Angular2는 컴포넌트 중심으로 개발을 진행한다. – 컴포넌트는 Template과 Logic을 포함한다. – component는 하나의 독립적인 모듈결합을 가진다. – component는 다른 component나 service를 의존주입 받을 수 있다. Angular2의 컴포넌트
  11. 11. 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 Application Angular2 Component
  12. 12. Angular2의 컴포넌트 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의 컴포넌트 정의
  13. 13. • 아키텍쳐의 주요 구성단위는 다음과 같다. – Module , Component, Template – Metadata, Data Binding, Directive – Service, Dependency Injection Angular2의 주요 구성단위
  14. 14. • Angular는 많은 모듈로 이루어져있다. • Module은 다른 모듈에 의해 Import 될 수 있다. – Import시 핵심모듈은 ‘@’을 붙인다. • @angular/core (angular 핵심모듈) • @angular/common, @angular/router, and @angular/http ... • Module은 export할때 여러 자료형을 가진다. – Classes, function, values 1. Module
  15. 15. • 핵심모듈 Import – import { Component } from '@angular/core'; • RC 버전이후에 반영 • 사용자 정의 모듈 Import – import { AppComponent } from './app.component'; 1. Module
  16. 16. • 컴포넌트는 함수를 통해 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 Metadata To the Class
  17. 17. • 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>
  18. 18. • Angular가 Class를 어떻게 처리해야 할지를 정의 4. Metadata @Component({ selector: 'hero-list', templateUrl: 'app/hero-list.component.html', directives: [HeroDetailComponent], providers: [HeroService] }) export class HeroesComponent { ... }
  19. 19. 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>
  20. 20. 5. Data Binding • Two way binding – ngModel directive를 이용하여 모델은 Element에 연 결되고, 모듈이 이를 제어한다. <input [(ngModel)]="hero.name">
  21. 21. 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>
  22. 22. 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
  23. 23. • Template에서 attribute directive는 [Directive 명]=“string literals” 형태로 사용 6. Directive <p [myHighlight]="color" [defaultColor]="'violet'"> Highlight me too! </p>
  24. 24. import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable() //서비스 클래스에 추가해야 하는 Injectable Decorator export 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": "RubberMan"}, {"id": 17, "name": "Dynama"}, {"id": 18, "name": "Dr IQ"}, {"id": 19, "name": "Magma"}, {"id": 20, "name": "Tornado"} ]; Heroservice.ts Return the mock hero mock-heroes.ts
  25. 25. • 서비스가 의존성을 가지는 경우 constructor injection 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; } }
  26. 26. • 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
  27. 27. • 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.
  28. 28. • Typescript는 JS의 상위집합(superset) 언어 – ES2016+ 특징을 가진다. - Typescript = ES6 + TYpes + Annotaions - Generics나 Lambdas를 이용할 수 있다. • Javascript의 결점 보완 – OOP(상속, 인터페이스 등) 지원 – Primitive Type 지원 (num, string, boolean..) 으로 가 독성의 장점 Typescript의 특징
  29. 29. • 프리컴파일 언어 – coffescript, atscript, typescript • Javascript의 미래버전인 Ecma Script 사용 – ECMA Script는 Ecma International의 기술규격에 정 의된 스크립트 언어 – Javascript는 ECMA Script를 따른다. Typescript의 특징
  30. 30. • Typescript는 ES6의 스펙을 포함한다 Typescript의 위치
  31. 31. • Node.JS 설치후 npm 명령어를 이용하여 설치 – $ npm install -g typescript – Compile : $ tsc test.ts – Test : $ node test.js • 설치후 Windows 에서 패스가 안잡히는 경우 – C:Program Files (x86)Microsoft SDKsTypeScript1.7 디렉터리를 환경변수에 추가 Typescript 컴파일러 설치
  32. 32. Typescript 컴파일과 테스트 TS JS HTML Tsc로 컴파일 JS 로딩
  33. 33. 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
  34. 34. 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로 컴파일된 결과
  35. 35. 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 정의
  36. 36. 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);
  37. 37. THANK YOU https://github.com/DaeguDevGroup/angular2-bootstrap

×