#앵귤러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를 컴포넌트 별로 정리해서 깔끔한느낌인데..조금 복잡하다. 익숙해지면 괜찮을려나.
댓글