'Front-End/AngularJs2'에 해당되는 글 12건

AngularJs2 설치

1. npm설치

- 기본적으로 npm을 이용하여 AngularJs2를 설치한다

- npm을 이용하면 모듈 의존성 관리를 통해 모듈간의 충돌을 막는다

- package.json이라는 파일로 의존성 관리를 한다

2. Angular 개발서버 실행

1)  package.json 

- npm init

-  위 명령어로 기본 package.json 생성

- 기본 설정으로 만들경우 : npm init --yes

{ "name": "angular", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

3.  타입스크립트 설치

- Angular2 는 기본적으로 타입스크립트를 주력 언어로 사용

$npm install -g typescript

$tsc -v : 버전확인

$tsc app.ts -t ES5 : 타입스크립트를 브라우저에 적용할 때 일반 스크립트 언어로 컴파일

4. Angular 프로젝트구성

1) package.json

{ "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "dependencies": { "@angular/common": "~2.0.2", "@angular/compiler": "~2.0.2", "@angular/core": "~2.0.2", "@angular/forms": "~2.0.2", "@angular/http": "~2.0.2", "@angular/platform-browser": "~2.0.2", "@angular/platform-browser-dynamic": "~2.0.2", "@angular/router": "~3.0.2", "@angular/upgrade": "~2.0.2", "angular-in-memory-web-api": "~0.1.5", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25" }, "devDependencies": { "concurrently": "^3.0.0", "lite-server": "^2.2.2", "typescript": "^2.0.3", "typings":"^1.4.0" } }

-  dependencies : 앵귤러 실행과 관련된 직접적인 의존성 패키지 추가

- devDependencies : 개발 과정에 필요한 의존성 패키지 추가

2) npm install 

-  현재 디렉토리를 기준으로 node_modules 디렉토리에 의존 모듈이 설치됩니다

3) npm start  

- Angular 개발 서버 실행

AngularJs2의 구성요소 - component of AngularJs2  

1. 정의

- 구성 요소는 크게 4가지 이다

- 컴포넌트, 모듈, 서비스, 지시자

2. 컴포넌트

- 가장 핵심이 된다

- 지시자 + 템플릿 + 클래스로 구성되어있다

import {Component} from '@angular/core'; @Component({ selector:'my-component', template: '{{msg}}' }) exprot class MyComponent{ msg: string = "hello"; ... }

- @Component : 콤포넌트를 정의 할떄 장식자를 사용

- selector : 컴포넌트의 지시자가 위치

- template : 템플릿 UI가 위치

- class : 컴포넌트에서 사용할 로직 위치

- 템플릿과 클래스는 바인딩을 통해 값을 주고 받는다

<my-component></my-component>라고 선언된 위치에서 템플릿 출력으로 hello가 들어감

3. 모듈

- AngularJs는 많은 모듈로 구성된 모듈 집합

- 내장 모듈과 사용자 정의 모듈로 나뉜다

1) 모듈 정의 방법

export class Hello{}  

- export : export 키워드를 이용해 모듈을 정의하고 모듈울 외부로 노출시킨다

2) 정의한 모듈 컴포넌트에 임포트

import { Hello} from './hello';  

3) 모듈의 체계적인 구성 방법

- 클래스 선언위에 장식자를 추가 함으로써 체계적으로 구성된다

- 장식자 모듈 : 컴포넌트, 지시자, 파이프

- Angular 모듈 시스템 : 컴포넌트를 기반으로 모듈을 구성하면 복잡하기 때문에 통합적인 관리 시스템이 필요하고 이런 관리를 모듈 시스템에서 한다

4) 모듈의 구성

- 애플리케이션 루트 모듈을 기본 적으로 이용하고 하위 모듈 구성을 추가한다

@NgModule({ imports: [ Angular 모듈, routing 모듈, ... ], declarations:[ 컴포넌트,. 지시자, 파이프 ... ], providers:[ 서비스 모듈,.... ], ... }) export class MyModule{}  

- @NgModule : @NgModule 장식자 내부에 모듈을 구성

4. 서비스

- 재사용 가능한 로직을 정의하기 위한 용도로 컴포넌트 외부에 정의

1) 서비스 정의(@Injectable)

@Injectable import{ Injectable} from '@angular/core'; export class HelloService{ }  

2) 서비스 사용의 예

- 로깅 서비스

- 테스트 

- 환경 설정과 공통 변수 관리

5. 지시자

- AngularJs는 선언형 프로그래밍(지시자를 이용한 개발)

- 컴포넌트의 템플릿에서 엘리먼트 속성과 같이 구성요소의 속성이나 이름으로 표현

- 지시자를 이용하면 UI 로직 코드를 반복적으로 입력할 필요가 없다

- 지시자는 화면 출력시 필요한 기능을 외부 모듈로 분리해 정의

1) helloStyle 지시자의 템플릿 표현

@Component({ selector : 'my-component', template : '<div helloStyle></div> })  

2) 커스텀 지시자의 예 @Directive

import{Directive, Elmenent, Renderer} from '@angular/core'; @Directive({ selector : '[helloStyle]' }) export class HelloStyleDirective{ constructor(private el : ElmenentRef, private renderer : Renderer){ } .... }  

AngularJs2의 구조 - AngularJs2 architecture

1. AngularJs2의 아키텍처

1) 컴포넌트

- AngularJs는 컴포넌트 중심으로 개발

- 템플릿(컴포넌트UI) + 클래스로 구성 된다

- 컴포넌트는 자식 컴포넌트를 포함하거나 다른 컴포넌트로 URL을 라우팅 할 수 있다

- 포함시 자식 컴포넌트 지시자를 현재 컴포넌트의 템플릿에 입력함으로 포함

A. 템플릿

- UI는 별도의 가상 DOM에 저장되고 컴포넌트마다 가상 DOM을 이용하므로 컴포넌트 간의 스타일 영향 받지 않는다

- 템플릿은 선언적 템플릿방식으로 지시자와 템플릿 문법을 활용해 개발

B. 클래스

- 컴포넌트 로직을 관리

- 템플릿과 클래스는 바인딩으로 연결되어 있다

2) 모듈

- 컴포넌트의 기능을 더하는 방법으로 모듈을 사용

- 내장모듈과 커스텀모듈이 있다

- 작성한 컴포넌트에서 모듈을 불러온다

3) 서비스 

- 컴포넌트 내부의 중복 로직 코드를 최소화 하기 위해 사용

- 서비스를 컴포넌트에 주입시 DI를 이용

- 클래스인 서비스를 객체로 만들어 클래스에 제공(DI)

AngularJs2 란? - What's angularJs2

1. 정의

- 앵귤러Js 와는 전혀 다른 프레임 워크(핵심 개념은 같다)

- 클래스 중심의 프로그래밍

- 컴포넌트에 의해 영역이 명확

- 지시자와 바인딩을 이용한 프로그래밍 템플릿 개발

2. 특징

- 컴포넌트가 개발의 중심

- 타입 스크립트를 주력 언어로 채택

- AngularJs 보다 로딩 시간과 바인딩을 통한 렌더링 성능이 빨라졌다