'Front-End/AngularJs2' 카테고리의 글 목록 (2 Page)

[Angularjs2] AngularJs2 컴포넌트 구조

Front-End/AngularJs2 2017. 3. 5. 17:45

AngularJs2 컴포넌트 구조

1. AngularJs2 컴포넌트

- AngularJs2 컴포넌트는 일반 웹 컴포넌트 기반 기술이다

1) 중첩 컴포넌트

- AngularJs2의 컴포넌트는 하나의 독립 적인 프로그램이지만 부모-자식 컴포넌트 구조로 계층 적인 구성을 가진다

2) 컴포넌트 기반 개발

- 컴포넌트를 개발의 중심에 두고 개발하는 것을 의미한다

- 컴포넌트는 명세에 따른 배포, 조립 가능한 독립 구성 단위여야 한다

3) 컴포넌트 내부

- import 영역

- @Component 장식자

- 컴포넌트 클래스 영역

2. import 영역

- 호출 영역에서 Angular 라이브러리 모듈을 호출하거나 사용자 모듈을 호출

1) Angular 라이브러리 모듈 호출

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

- Angular 라이브 모듈을 @를 붙이는데 다른 모듈과 구분하기 위해서다

2) 사용자 모듈 호출

import { LoggerService } from './logger.service';

3. 장식자 영역

- @Component는 컴포넌트 장식자라고 한다

- 컴포넌트 관련 설정정보를 입력

@Component({ selector : 'intro-component', template : '<div>App Hello</div>' style : ['div{ background: blue;}'] }) export class AppHello{ }

1) selector

- 컴포넌트 이름을 정의

- 컴포넌트 이름은 템플릿을 나타낼 떄 사용한다

<intro-component></intro-component>

2) 템플릿 속성

- 템플릿 속성에는 컴포넌트 UI 코드를 정의한다

a. template : 내부 파일에 HTML 과 템플릿 문법을 이용해서 템플릿정의

b. templateUrl : 외부 파일에 HTML 과 템플릿 문법을 이용해 정의

4. 컴포넌트 클래스 영역

- 템플릿 데이터 출력과 관련된 로직을 처리

'Front-End > AngularJs2' 카테고리의 다른 글

[Angularjs2] 앵귤러2 HelloWorld Service - 서비스 사용하기 (0)	2017.09.17
[Angularjs2] 앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성) (0)	2017.09.10
[AngularJs2] 웹 컴포넌트 (0)	2017.03.05
[AngularJs2] AngularJs2 ng 명령어 활용 (0)	2017.03.05
[AngularJs2] Angular CLI 설치 및 프로젝트 만들기 (0)	2017.03.05

리딩리드

,

[AngularJs2] 웹 컴포넌트

Front-End/AngularJs2 2017. 3. 5. 16:08

웹 컴포넌트

1. 정의

- HTML, CSS, 자바스크립트를 하나의 단위로 묶어 주는 기술

- 위의 여러 기술을 합해져 하나의 웹 컴포넌트를 구성한다

- 웹 컴포넌트를 이용하려면 보완 라이브러리를 이용해야 한다(웹컴포넌트js,폴리머)

1) 기술 요소

- HTML 템플릿

- 템플릿 호출

- 쉐도우 DOM

- 커스텀 엘리먼트

2. HTML 템플릿

- 컴포넌트의 UI를 표현하는 영역

- 웹 페이지의 일부분으로 동작, 재사용이 가능하다

<template id="nav-item-template"> <div class="nav> <div class="item">main</div> <div class="item">service</div> </div> </template>

3. 템플릿 호출

- 정의한 템플릿을 외부에서 호출한다

- 문서 상단에 링크 엘리먼트를 이용해 호출한다

<head> <link rel="import" href="template.html"> </head>

1) 템플릿 실제 사용

- 스크립트 엘리먼트 안에 template.html 내용을 불러와 쿼리 선택자를 이용해 템플릿 노드를 현재 문서 DOM노드 밑으로 붙임

4. 쉐도우 DOM

- DOM에 엘리먼트에 대한 정의나 스타일과 같은 각종 정보가 저장된다

- 웹 페이지는 기본적으로 DOM을 가진다

A. 문서 DOM

- 현재 페이지에 대한 DOM

B. 쉐도우 DOM

- 웹 페이지가 실행되는 도중 가상으로 생성되는 DOM

- 문서 DOM 외부에 존재하기 때문에 문서 DOM에 정의한 스타일이나 이벤트가 적용되지 않고 캡슐화 된다

1) 쉐도우 DOM 호출

- 쉐도우 DOM은 쉐도우 경계가 있으며 쉐도우 호스트를 통해 호출된다.

- 현재 문서에 쉐도우 DOM을 포함할 때는 쉐도우 루트를 호출함

5. 커스텀 엘리먼트

- 이름을 임의로 정의해서 만든 엘리먼트

- 커스텀 엘리먼트는 빈 엘리먼트가 아닌 기능과 모양이 합쳐진 화면 구성 요소이다

<hello-button></hello-button>

<!doctype html> <head> <meta charset="utf-8"> <script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var shadow = this.createShadowRoot(); var button = document.createElement('button'); button.className = 'btn'; button.innerHTML = "Hello 버튼"; button.style.fontStyle = "20px"; shadow.appendChild(button); button.addEventListener('click', function(e) { alert("클릭했습니다"); }); }; document.registerElement('hello-button', { prototype: proto }); </script> <style> .btn{font-size:50px;} </style> </head> <hello-button></hello-button>

'Front-End > AngularJs2' 카테고리의 다른 글

[Angularjs2] 앵귤러2 컴포넌트 사이 값 전달(@Input 장식자, inputs속성) (0)	2017.09.10
[Angularjs2] AngularJs2 컴포넌트 구조 (0)	2017.03.05
[AngularJs2] AngularJs2 ng 명령어 활용 (0)	2017.03.05
[AngularJs2] Angular CLI 설치 및 프로젝트 만들기 (0)	2017.03.05
[AngularJs2] AngularJs2 설치 (0)	2017.02.16

리딩리드

,

[AngularJs2] AngularJs2 ng 명령어 활용

Front-End/AngularJs2 2017. 3. 5. 13:05

AngularJs2 ng 명령어 활용

1. 포트 변경

- 기존 개발 포트는 4200을 사용하지만 다른 프로그램이 사용할 경우 충돌 발생

- $ ng serve --port 4202

- 설정 가능한 포트는 두 개이다.

1) http 서버포트

- $ --port 4202

2) 라이브 리로드 서버에서 사용하는 포트

- $ --live-reload-port 49000

3) $ ng serve --port 4201 --live-reload-port 49000

2. Angular 구성요소 추가

- 핵심구성 요소 : 컴포넌트, 지시자, 파이프, 서비스

- 아래 명령어를 루트 디렉토리에서 실행하면 자동으로 /src/app 디렉토리 기준으로 생성된다

1) 컴포넌트 추가

- 컴포넌트는 Angular에서 라우터와 같은 URL 경로 단위가 되기 때문에 폴더로 구분되어 생성된다

- $ ng g component 컴포넌트 명

2) 지시자 추가

- $ ng g directive 지시자명

3) 파이프

- $ ng g pipe 파이프명

4) 서비스 추가

- 컴포넌트에 사용될 때는 provide라는 속성에 추가 해야한다

- $ ng g service 서비스명

3. Angular 빌드

- 프로젝트를 배포하기 이전에 타입스크립트 기반으로 만들어진 코드를 빌드를 통해 브라우저에서 동작 가능하도록 변경해야한다

1) 개발환경 빌드

- $ ng bulid

- /src/enviroments/enviroment.ts 파일의 개발환경 설정 정보를 이용해서 개발 환경 빌드 수행

- dist 폴더가 생성되었다

2) 프로덕션 용

- $ ng build - prod

'Front-End > AngularJs2' 카테고리의 다른 글

[Angularjs2] AngularJs2 컴포넌트 구조 (0)	2017.03.05
[AngularJs2] 웹 컴포넌트 (0)	2017.03.05
[AngularJs2] Angular CLI 설치 및 프로젝트 만들기 (0)	2017.03.05
[AngularJs2] AngularJs2 설치 (0)	2017.02.16
[AngularJs2] AngularJs2의 구성요소 - component of AngularJs2 (0)	2017.02.15

리딩리드

,

[AngularJs2] Angular CLI 설치 및 프로젝트 만들기

Front-End/AngularJs2 2017. 3. 5. 12:49

Angular CLI 설치 및 프로젝트 만들기

1. 정의

- 개발자가 Angular 개발만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행

1) 제공하는 기능

- Angular 프로젝트 생성

- Angular 중요 구성요소 추가(컴포넌트, 지시자, 파이프, 서비스)

- 코드 변경 시 빌드를 수행하고 애플리케이션 시작

- 브라우저 동기화

- 단위 테스트

- 프로젝트 배포 패키징

2. Angular CLI 설치

-$ npm install -g angular-cli

- 설치가 완료되면 ng 명령어를 사용할 수 있다

-$ ng -help

3. Angular CLI 프로젝트 만들기

1) 프로젝트 추가

-$ ng new hello-ng2

2) Angular 개발서버 실행

-$ cd hello-ng2

-$ ng serve

- localhost:4200

'Front-End > AngularJs2' 카테고리의 다른 글

[AngularJs2] 웹 컴포넌트 (0)	2017.03.05
[AngularJs2] AngularJs2 ng 명령어 활용 (0)	2017.03.05
[AngularJs2] AngularJs2 설치 (0)	2017.02.16
[AngularJs2] AngularJs2의 구성요소 - component of AngularJs2 (0)	2017.02.15
[AngularJs2] AngularJs2의 구조 - AngularJs2 architecture (0)	2017.02.15

리딩리드

,

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

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

[Angularjs2] AngularJs2 컴포넌트 구조

'Front-End > AngularJs2' 카테고리의 다른 글

[AngularJs2] 웹 컴포넌트

'Front-End > AngularJs2' 카테고리의 다른 글

[AngularJs2] AngularJs2 ng 명령어 활용

'Front-End > AngularJs2' 카테고리의 다른 글

[AngularJs2] Angular CLI 설치 및 프로젝트 만들기

'Front-End > AngularJs2' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바