2. 발표에 앞서 다루는 내용
• Angular와 연관된 프론트엔드 개발 생태계
• Angular Framework의 아키텍처
• Angular CLI와 Spring boot를 사용한 Angular
개발 과정 데모
3. 발표에 앞서 다루지 않는 것
• 프론트엔드 웹 개발에 한정된 개념 혹은 지식
• TypeScript의 고유한 syntax 및 feature
• Angular Framework 패키지별 API 사용 방법
• RxJs 및 Server Side Rendering 등 고급 주제
20. Module화를 향한 노력
• 코드 재사용성 및 범용화를 위한 노력
• CommonJS, AMD
• Webpack, Module in ES6
• 자세한 내용은…
• http://d2.naver.com/helloworld/12864
• http://d2.naver.com/helloworld/591319
• http://d2.naver.com/helloworld/023981
23. Angular Framework
• Angular is a framework
• for building client applications
• in HTML and either JavaScript or a language
like TypeScript that compiles to JavaScript.
26. Def 3) TypeScript
• TypeScript is a typed super set of JavaScript
• that compiles to plain JavaScript.
http://chariotsolutions.com/blog/post/angular2-starter-walkthrough-overview/
36. 주요개념 1: Component
• 컴포넌트는 View를 관리하는 컨테이너와 같다.
• Angular App은 컴포넌트 트리를 반드시 갖는다.
• 컴포넌트 트리의 최상위 루트 컴포넌트를 관례적으
로 AppComponent라 한다.
• View를 컴포넌트로 나누는 기준은 없다.
• 재사용성
• 페이지 단위
39. 주요개념 2: Template
• View를 구성하는 Angular-style의 마크업
• View를 구성하기 위하여 Component와 짝을 이룸
• HTML을 포함한 Angular에서 제공하는 다양한 연
산자 및 syntax를 사용하여 View를 구성하는 코드
를 작성
42. 주요개념 2: Template
<md-card>
<div class="contents">
<md-input-container>
<input mdInput name="value" placeholder="사용자 이름"
[(ngModel)]="userName" (ngModelChange)="onChange()">
</md-input-container>
<button md-raised-button (click)="showWelcomeMsg()">입력</button>
<span class="welcome-msg">{{welcomeMsg}}</span>
</div>
</md-card>
Html + Angular의 Template 구문으로 이뤄집니다.
처음 보는 속성들은 다음 개념 설명에서 알 수 있습니다.
https://github.com/not-for-me/hb-angular-first/blob/master/ch03/ng-
welcome-msg-app/src/app/welcome-msg/welcome-msg.component.html
51. 주요개념 4: Directive & Pipe
• View를 동적으로 만들어주는 요소
• Directive
• Structural Directives
• DOM 구조를 동적으로 변화시킬 때 사용
• NgIf, NgFor, NgSwitch, …
• Attribute Directives
• 컴포넌트, DOM 요소의 표현 및 동작방식을 변경할 때 사용
• NgStyle, NgClass, …
52. 주요개념 4: Directive & Pipe
• Pipe
• View에 노출하는 데이터를 변형시킬 때 사용
• DatePipe, UpperCasePipe, CurrencyPipe, ….
<p>Seminal Date: {{ seminarDate | date:'YYYY-MM-dd' }}</p>
<p>Seminal Date: {{ seminarDate | date | uppercase }}</p>
56. 주요개념 5: Data Binding
• Component(+Template)과 View 사이의 연결고리
• 모든 일은 Angular가 한다. 우리는 선언만 할 뿐
• 절차적인 방식 vs 선언적인 방식
• http://www.notforme.kr/archives/1698
67. 주요개념 6: Service & DI
• Service
• 애플리케이션에서 사용할 값, 함수 등 무엇이든 OK!
• 일반적으로 View와 관련 없는 로직
• 비즈니스로직, 애플리케이션 공통 코드, Data Store, …
• 단일 책임 원칙
• Dependency Injection
• 우리가 보는 것은 Framework입니다.
• Angular에도 의존성 주입 기능이!!!
68. 주요개념 6: Service & DI
• Dependency Injection
• 우리가 보는 것은 Framework입니다.
• Angular에도 의존성 주입 기능이!!!
• DI를 위해 필요한 것
1. 의존성 정보를 어딘가 기록하고
2. 의존 하는 쪽에서는 constructor에서 Arg.로 받음
71. 주요개념 6: Service & DI
import { Component } from '@angular/core';
import { TestDiService } from './test-di.service';
@Component({
…
providers: [TestDiService]
})
export class AppComponent {
constructor(private testService: TestDiService) { }
foo() { this.testService.print(); }
}
먼저 사용할 서비스 import 합니다.
의존성 정보를 @Component
메타데이터에 선언합니다.
* 다음에 설명하는 Module 개념에서도 선언 가능
74. 주요개념 6: Service & DI
• DI를 사용하는 이유
• 객체 간의 결합도 낮추기 (Framework에게 맡겨줘)
• 단일 인스턴스 보장 받기
• 서비스 클래스를 애플리케이션 전역에서 사용하는
MemoryDB, Message Bus등으로 쓸 수 있어요~~
75. 주요개념 7: Module
• ES6에서 말하는 모듈이 아님
• 지금까지 설명했던 Angular의 요소들을 하나로 담는
컨테이너
• Angular Framework의 많은 기능은 모듈 단위로 제공
• FormsModule, ReactiveFormsModule, RouterModule,
HttpModule, …
82. Angular에서 제공하는 주요 Module
• CommonModule: Angular에서 제공하는 각종 지시자 등을 포함하는 기본 모
듈
• BrowserModule: 웹에서 실행할 때 필요한 기본 모듈, CommonModule을 내
장하고 있음
• FormsModule, ReactiveFormsModule: 폼 구성에 필요한 지시자 등을 제공,
ngModel을 쓰려면 반드시 필요
• HttpModule, JsonpModule: ajax 호출과 관련된 서비스 클래스 등을 제공
• BrowserAnimationsModule: 브라우저의 애니메이션 처리(css) API를 제공