Angular4 공부하기 1

https://youtu.be/KhzGSHNhnbI

이 영상과 책보면서 정리

-----------------------------------------------------------

npm이란?

node package manager.

node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램.

터미널에 몇줄만 치면 알아서 설치되고 버젼관리도 할 수 있고 그래서 편리함.

(명령어는 터미널이나 cmd에서 실행해야함)

-----------------------------------------------------------

angular란?

구글이 만든 단일 페이지 개발을 위한 자바스크립트 기반 프레임워크.

(추가)

-----------------------------------------------------------

초보자를 위한 앵귤러,npm 설치 방법

1) node.js를 깐다.

2) angular.js를 깔고 압축을 푼다.

3) 에디터에서 앵귤러 폴더를 불러온다.

4) 터미널창을 연다.

-아톰

file-setting-install에서

'platformio-ide-terminal' 설치

(terminal-plus ㄴㄴ 오류나서 안됨)

그러면 왼쪽 하단에 + x 이런게 생기는데 +를 누르면 터미널 창이 올라옴.

-Vscode

원래 설치되어 있으므로 '통합 터미널'을 찾아 켜면 됨.

5) npm install 하고 엔터

6) npm run start 하고 엔터

(run start는 서버 여는 명령어기 때문에 터미널 끄면 서버 닫힘)

여기까지 하면 로컬주소가 localhost:4200이라고 뜸(보통 4200이라고 함).

이걸 주소창에 복붙하면 앵귤러4 메인 페이지가 나옴.

실시간이기때문에 에디터에서 저장만 하면 새로고침 할 필요 없이 알아서 적용됨 ^ㅗ^

-----------------------------------------------------------

1) cities.component.html

앵귤러 메인페이지.

(영상에서 나오는 앵귤러는 당시 메인이 app.component.html가 기준)

2) cities.component.ts

cities폴더 안에 있는 파일들의 이름 등을 총괄함.

3) app.module.ts

제일 중요한 ts파일. 새 폴더/새 페이지를 만든다면 꼭 이곳에 등록해줘야함.

-----------------------------------------------------------

ts파일 자세히 보기, 메타데이터

cities.component.ts 기준

*) @component

컴포넌트임을 알리는 표시이자, 컴포넌트를 구성하는 정보를 전달함.

이 안에 있는 정보들을 '메타데이터'라고 함.

1) selector

cities.component.html의 이름.

다른 html에 가서 <app-cities></app-cities>라고 쓰면, 그 html에서 app-cities 즉 cities.component.html의 내용이 출력됨.

2) templateUrl, styleUrls

cities.component.html와 css의 경로.

3) CitiesComponent

대장인 app.module.ts에 가서 써줘야할 선언.

첫글자는 꼭 대문자여야함.