#앵귤러js?

구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크


#특징

웹 컴포넌트 기반 

재사용 가능

커스텀 엘리먼츠, 쉐도우 돔, html import,  html 템플릿 



#framework에서 platform으로

router, angular cli, material, universal 등 다양한 기능 제공



#차이점

앵귤러 1                                                    앵귤러2

스콥 0,                                                       스콥 x

지시자와 컨트롤러 o                                          x

비스니스 로직 controll함수                       타입스크립트 클래스

자바스크립트 모듈 시스템 require.js            타입스크립트 모듈시스템



#angular cli

커멘트라인 인터페이스 : 터머널에서 명령어를 입력하면, 그에 따라 프로젝트를 만들어 주고, 라우터, component 등 서비스를 자동 생성 해준다.


node js 반드시 설치를 해야함(version 6.9.0 이상)


터미널 열어서(window에서는 sudo 키워드 없어도 됨)

sudo npm install -g @angular/cli



#버전 확인

ng --version 



#프로젝트 생성 

ng new 프로젝트 이름



#폴더구조

src - 제일중요, 중요한 angular 소스들이 들어 있다.

app - 어플리케이션과 관련된 폴더

assets 이미지 등

enviroments 프로젝트 빌드 관련

main.ts  프로젝트의 메인이 되는 파일, 여기서 부터 시작




#서버시작

ng server



#페이지 확인

url에 localhost:4200 입력



# 앵귤러 모듈


컴포넌트, 파이프, 서비스 등 과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑 하게 해준다.

- 모든 앵귤러 애플리케이션은 하나의 root 모듈을 가진다

-여러 피쳐 모듈을 가질 수 있다.

- 재사용할수 있는 기능을 외부에 배포하기 위해서 사용되기도 한다.


# 예제 todo 모듈 만들기

ng generate module todo


#todo 모듈에서 사용할 컴포넌트(부품 todos) 만들기

ng g c todo/todos --module todo/todo.module.ts --export



#todo컴포넌트 부분 index.html 에 부분으로 들어갈 내용



#todo컴포넌트 부분 (셀렉터가 존재하고 위의 내용에 대한 경로를 가지고 있다.)


#index.html 에서 todo 컴포넌트가 들어갈 위치 정하기(셀렉터로 지정)


#app.modul에서 import(app.module= root 모듈)


#확인



view를 컴포넌트 별로 정리해서 깔끔한느낌인데..조금 복잡하다. 익숙해지면 괜찮을려나.

'매일코딩 > Angular' 카테고리의 다른 글

[나홀로 앵귤러] 낙서로 간단하게 시작하기  (0) 2017.07.31

+ Recent posts

티스토리 툴바