(2) New프로젝트 생성
지난 포스팅(Anular기본 1)에서 angular cli를 모두 설치했다면, ng 명령어로 새 프로젝트를 생성해보자.
1 ng new 명령어
콘솔에서, `` ng new firstAngulr `` 명령어를 실행하면, default 프로젝트
파일들이 생성된다. 참고로 시작을 숫자나 특수문자 기호로 해서는 안 된다.
2 angular 폴더
angular cli로 설치한 폴더에서 가장 중요하게 살펴봐야 할 곳은
'src' 폴더이다. src 폴더에 어플리케이션을 작성하기 때문이다. 먼저, index.html을 살펴보자.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstPrj</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
위의 코드에서 눈여겨 봐야할 부분은 <app-root> </app-root>부분이다. app-root 태그는 어플리케이션이 랜더링되는 곳이다. 처음 Angular를 접하면, w3c에서 정하지 않은 태그들이 나오는 상황에 당황할 수 있다. 그러나 지금껏 프론트 개발을 하면서, 자신이 정한 이름의 태그를 마음껏 사용해보고 싶다는 욕구를 느낀 적이 있었다면 놀라운 일이다.
app-root 태그처럼, Angular에서는 component에서 정의한 태그를 랜더링할 수 있는 구조를 갖고 있다. 즉, Angular에서는 자체 HTML태그를 정의하고, 맞춤형 새 기능을 부여할 수 있다.
3 App실행
앱을 브라우저에서 로드해보자. 앵글러CLI는 HTTP서버를 내장하고
있다. 그러므로 바로 앱실행이 가능하다. 먼저, 콘솔에서 app루트 폴더로 디렉터리를 지정한다.
angular cli로 실행한 후, localhost:4200 (4200포트)로 접속해보자.
위와 같은 화면이
나온다면 성공이다.
'코드 스터디' 카테고리의 다른 글
| Angular 기본(4) 컴포넌트, 데이터 추가하기 (0) | 2019.06.03 |
|---|---|
| Angular 기본(3) 컴포넌트 생성 (0) | 2019.06.02 |
| Angular 기본 (1) Angular cli설치 (0) | 2019.05.31 |
| html5 문법 (8) 이벤트 심화[사용자 화면] (0) | 2019.05.30 |
| html5 문법(7) 노드생성 추가 삭제 (0) | 2019.05.29 |
댓글