Angular 2 rc5 조사

Angular 2 RC5 조사
by RYU
(신림 프로그래머 모임)

참고 자료
• https://angular.io/docs/ts/latest/guide/architecture.html
• http://learnangular2.com

Angular 2를 감히 말하자면…
• Angularjs2는 Javscript 및 Typescript, Dart와 같은 Javascript로 컴파일 되
는
언어로 Html안에서 Client Application을 만들기 위한 Framework
• 몇 개의 코어와 몇 개의 부가적인 라이브러리로 구성 되어 있다.
• Component 클래스를 이용하여 앵귤라화 된 Html 템플릿과 템플릿을
관리 하고, 컴포넌트를 관리하고 서비스의 로직을 추가 할 수 있다.
• 최상위 모듈을 이용해 어플리케이션을 구동시킬 때 Angularjs는 브라우져에
어플리케이션을 출력하고 사용자에 행동에 따라 당신이 지정해 놓은 사용자
반응을 응답한다.

Angular 2 Architecture Overview

Angular 2: 8가지 주요 요소
• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Ionic Team이 소개하는 특징
• COMPONENT
• INPUTS
• OUTPUTS
• APP LIFECYCLE
• TEMPLATES
• EVENTS
• FORMS
• VIEWCHILD

# ANGULAR 2: COMPONENT
컴포넌트는 페이지에 로직과 페이지에 엘리먼트를 구체화할수 있는 주
요한 방법이다. 앵귤라1에서 directives, controllers, and scope를 통
해서 구현하였다면 앵귤러2 에서 해당 컨셉은 Components로 통합되
었다.
import
{ Component } from
'@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My
First Angular 2
App</h1>'
})
export class
AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { AppComponent } from
'./app.component';
import { OtherAppComponent } from
'./otherapp.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { platformBrowserDynamic }
from '@angular/platform-browser-
dynamic';
import { AppModule } from
'./app.module';
import { OtherAppModule } from
'./otherapp.module';
platformBrowserDynamic().boots
trapModule(AppModule);
platformBrowserDynamic().bootstra
pModule(OtherAppModule);

# ANGULAR 2: COMPONENT
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">


<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<body>
<my-app>Loading...</my-app>
<other-my-app>Loading...</other-my-app>
</body>
</html>
/**
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-
web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename
and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension:
'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js',
defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName
+ '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the
individual index files
var setPackageConfig = System.packageWithIndex ? packIndex :
packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);

# ANGULAR 2: INPUTS
앵귤러 2 어플리케이션에서 코어는 컴포턴트들이긴 하지만 대부분 개
발자들은 동적으로 설정하여 컴포넌트에 어떻게 데이터를 넣어줄지 필
요할것이다. (컴포넌트 동적 프로퍼티 변경)
@Input
컴포넌트에 'input'을 정의하기 위해서 '@Input'표시자를 써야 한다 .
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-number',
template: '<div><p> The next number is {{ mynumber + 1}} </p></div>'
})
export class MyNumberComponent {
@Input() mynumber: number;
}
@Component({
selector: 'MyNumberRootComponent',
directives: [MyNumberComponent],
template: `<my-number [mynumber]="42"></my-number>`
})
export class MyNumberRootComponent {}

# ANGULAR 2: OUTPUTS
특별한 이벤트를 바인딩 할때 앵귤러 2에서는 이벤트 문법을 사용하여
처리 할 수 있지만. 필요한 커스텀 이벤트를 작성할때 @Output 지시자
를 사용하면 된다. ( 이벤트 동적 바인딩 )
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'zippy',
template: `
<div class="zippy">
<button (click)="toggle()">눌러봐 ~</button>
<div [hidden]="!visible">@Output 데코레이터를 통한 이벤트 동적 바인딩 </div>
</div>`
})
export class Zippy {
visible: boolean = true;
@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();
toggle() {
this.visible = !this.visible;
if (this.visible) {
this.open.emit(null);
} else {
this.close.emit(null);
}
}

# ANGULAR 2: APP LIFECYCLE
ANGULAR는 다단계에 걸친 기동과 lifecycle 과정을 통해 시작되며 어플리케이
션이 시작/동작 컴포넌트의 생성과 소멸 될 때 다양한 이벤트를 받을 수 있다.
BOOTSTRAP
Angular 2 어플리케이션들은 the root component를 통해 기동된다.
COMPONENT INIT
컴포넌트가 생성될때 그것에 생성자는 호출된다. 이것은 우리에 컴포넌트를 위한 초기화 영역이다. 그
러나
자식 컴포넌트부터 데이터나 속성에 의존되어 있다면 자식 컴포넌트가 먼저 초기화 하는 것을 기다려야
한다. 컴포넌트는 설정이나 어플리케이션 코드에 들어갈수 있다 컴포넌트들의 템플릿들은 전체 어플리
케이션에
연결이 생성 되는 곳에 있다. 'ngOnInit' lifecycle event을 통해서 이런 부분을 컨트롤 할수 있고 추가적
으로
setTimeout에서 호출하면서 생성자와 비슷한 효과를낼수 있다.
COMPONENT LIFECYCLE
'ngOnInit' 같이 우리는 컴포넌트에 lifecycle 을 통해 몇가지 이벤트를 추적 할수 있다.

# ANGULAR 2: APP LIFECYCLE
import { Component } from '@angular/core';
@Component({
selector: ‘app-lifecycle',
template: `
<div class="lifecycle">해당 컴포넌트 호출시 일어나는 이벤트
</div>`
})
export class Zippy {
ngOnInit() {
console.log("call ngOnInit in Zippy Component");
// Properties are resolved and things like
// this.mapWindow and this.mapControls
// had a chance to resolve from the
// two child components <map-window> and <map-
controls>
}
ngOnDestroy() {
console.log("call ngOnDestroy in Zippy Component");
// Speak now or forever hold your peace
}
ngDoCheck() {
console.log("call ngDoCheck in Zippy Component");
// Custom change detection
}
ngOnChanges(changes) {
console.log("call ngOnChanges in Zippy Component");
// Called right after our bindings have been checked but only
// if one of our bindings has changed.
//
// changes is an object of the format:
// {
// 'prop': PropertyUpdate
// }
}
ngAfterContentInit() {
console.log("call ngAfterContentInit in Zippy Component");
// Component content has been initialized
}
ngAfterContentChecked() {
console.log("call ngAfterContentChecked in Zippy
Component");
// Component content has been Checked
}
ngAfterViewInit() {
console.log("call ngAfterViewInit in Zippy Component");
// Component views are initialized
}
ngAfterViewChecked() {
console.log("call ngAfterViewChecked in Zippy
Component");
// Component views have been checked
}
…

# ANGULAR 2: TEMPLATES
템플릿은 좀더 명확하게 작지만 많은 문법 변화가 일어났지만 앵귤라1 과 아주 흡사하다
- {}: RENDERING
standard double-curly syntax 값을 출력한다.
- []: BINDING PROPERTIES
component에 변수를 맵핑 하기 위해서 '[]' 문법을 사용한다. 만약 우리에
컴포턴트에 this.currentVolume 값이 있을 때, 컴토넌트를 통해서 값을
넘겨주고 값들이 계속 동기화된다.
- (): HANDLING EVENTS
'()' 신텍스를 통해서 이벤트를 컴포넌트에서 처리할수 있다.
- [()]: TWO-WAY DATA BINDING
다른 이벤트나 사용자의 입력을 통해서 변경을 유지하기 위해 '[()]' 문법을 사용하고
property를 연결하거나 이벤트처리에 대한 조합을 생각할수 있다.
- *: THE ASTERISK
'*'는 template로써 directive가 component를 다룰수 있는 것을 말한다. 전처럼 그리지는 않는다. 예를 들어
'ngFor'는 <my-component> 를 취해서 아이템리스트를 출력한다. 그러나 초기화는 하지 않는다. 몇몇
비슷한 다른 directives는 template에서 *ngIf, *ngSwitch보다 더 좋게 동작한다.

# ANGULAR 2: TEMPLATES
<div> Hello my name is {{name}} and I like {{thing}} quite a lot. </div>
<video-control [volume]="currentVolume"></video-control>
<my-component (click)="onClick($event)"></my-component>
<input [(ngModel)]="myName">
<my-component *ngFor="#item of items"> </my-component>
{}: RENDERING
[]: BINDING PROPERTIES
(): HANDLING EVENTS
[()]: TWO-WAY DATA BINDING
*: THE ASTERISK

# ANGULAR 2: EVENTS
Angular2 에서의 이벤트는 템플릿 안에서 괄호 표현식을
사용하며 컴포턴트 클래스 안에 메소드와 연결되어 있다.
DELEGATION (위임)
Angular2 에서의 이벤트는 일반적인 DOM이벤트와 비슷하게 동작한다. 이벤트를 상향으
로 올리거나 아래로 전파할 수 있으며 특별한게 없다.
EVENT OBJECT
이벤트를 처리 할 때 '$event'라는 파라메터로 템플릿에 이벤트 콜백(함수)로 처리한다.

# ANGULAR 2: EVENTS
import { Component } from '@angular/core';
@Component({
selector: 'keyup-event1',
template: `<input (keyup)="onKey($event)"/><p>{{value}}</p>`
})
export class KeyUpComponent_v1 {
value = '';
onKey(event: KeyboardEvent){
this.value += (<HTMLInputElement>event.target).value + '|';
}
}
<html>
<head>
<title>Angular 2 Components Simple Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="styles.css">


<script src="node_modules/core-
js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-
metadata/Reflect.js"></script>
<script
src="node_modules/systemjs/dist/system.src.js"></script>

<script src="componentexample.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<body>
<click-component>Loading...</click-component>
<keyup-event1>Loading...</keyup-event1>
</body>
</html>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClickComponent } from './componentexample.component';
import { KeyUpComponent_v1 } from './keyupevent.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [
ClickComponent,
KeyUpComponent_v1
],
bootstrap: [ ClickComponent,KeyUpComponent_v1 ]
})
export class ComponentExampleModule { }

# ANGULAR 2: FORMS
SIMPLE FORM
FORMBUILDER
The FormBuilder from the example above makes it easy for us to specify form controls and the various validators
we might want to apply to certain controls. In the example above, we are creating two inputs, an email and
password field:
CONTROLGROUP
The FormBuilder creates instances of ControlGroup, which we refer to as a form. Instead of using the FormBuilder,
we could also construct the ControlGroup manually: In practice though, the FormBuilder is what we will use to
quickly create forms.
FORM DIRECTIVES
You’ll notice the lack of ngModel anywhere in our form. Instead, we have the ngControl decorators that map
certain inputs to our control objects: This “binds” the email input to the instance of our email control.
CUSTOM VALIDATORS
We can build custom form validators as a simple function:
HANDLING FORM
We can easily get the simple Javascript object value of our form, or the value of an individual control:

# ANGULAR 2: VIEWCHILD
ANGULAR 2에서 모든 컴포넌트들이 클래스를 가지기 떄문
에 클래스 안에 메소드를 호출한다. 이것으로 인해 컴포넌
트에 접근할수 있다. (쉽게 말해서 컴포넌트에서 컴포넌트
접근)
@ViewChild
Component과 그 것들의 method들을 접근하기 위해
@ViewChild 어노테이션을 쓸수 있다.
예를 들어 <user-profile> component가 sendData()라는
메소드를 호출 가능하다면 우리에 페이지에서 user-profile
를 사용할 때 클래스에 참조가능하며 지역 변수로 그것을
할당 가능하다.

# ANGULAR 2: VIEWCHILD
@Component({ selector: 'user-profile' })
export class UserProfile {
sendData(){ //send data
}
}
import { Component, ViewChild } from '@angular/core';
import { UserProfile } from '../user-profile';
@Component({
template: '<user-profile (click)="update()"></user-profile>', directives: [UserProfile]
}) export class MasterPage {
@ViewChild(UserProfile) userProfile: UserProfile
update(){
this.userProfile.sendData();
}
}

미흡한 자료를 봐주셔서
감사합니다. Orz

Angular 2 rc5 조사

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular 2 rc5 조사 (14)

Angular 2 rc5 조사