angular를 console 모드에서 설치하고 간단한 프로젝트를 만들어 보았는데
어떤식으로 작동이 되는지 디렉토리와 파일 구조들을 한번 보도록 하겠습니다.
angular가 설치된 디렉토리의 구조와 파일 모양은 아래와 같은데요.
Angular 실행을 담당하는 ng 파일을 좀 볼까요?
node ….ng “$@” 이런 형태군요.
ng 명령을 사용해도 결국 node를 이용하고 나머지 ng를 포함해서 파라미터로 넘기는 군요
이젠 프로젝트가 생성된 디렉토리를 구경해 볼까요?
먼저 angular.json 설정 파일 내용을 보겠습니다.
프로젝트와 관련된 모든 설정이 이곳에 정의되어 있는 것을 볼 수 있습니다.
잘은 모르겠지만 대충 살표보면
“sourceRoot”: “src” - 프로젝트와 관련된 source는 src 디렉토리에 있고
“prefix”: “app” - 시작을 app로 하며
“index”: “src/index.html” - 초기 view 파일은 src 밑에 index.html 파일이고
“main”: “src/main.ts” - src 밑에 main.ts 라는 typescript 파일이 있군요.
그렇다면 src 디렉토리로 가서 첫 화면을 어떻게 불러 왔나 하나씩 풀어보겠습니다.
제일 먼저 index.html을 호출 한다고 했으니 열어보면
일반 html 형태의 파일인데 실제 화면 보여줄 <body>테그에는 내용이 없고
<app-root></app-root>
이게 눈에 띄는 군요.
그렇다면 <app-root></app-root> 이게 내용 이라는 건데 뭔가가 대체를 하겠다는것 같고.
그럼 main.ts는 뭐가 정의 되어 있을까요?
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
모듈과 환경설정이 어떤 파일인지를 포함하고 있습니다.
source가 app을 접두어로 사용한다고 했으니 app으로 가면 뭔가 있겠네요.
app.module.ts를 보겠습니다.
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
여기서는 라우팅과 컴포넌트를 정의하고 있습니다.
화면과 관련있는 소스는 component입니다.
app.component.ts를 보겠습니다.
몇 줄 안되는 곳에 많은 내용이 들어있네요.
index.html 파일 하단에서 본적이 있는
<app-root></app-root>
이거에 맵핑할 app.component.html 파일을 정의 하고 있습니다.
그리고 title도 정의가 되어 있군요.
그렇다면 ./app.component.html 파일을 열어보겠습니다.
보이시나요?
localhost:4200 했을 때 보여준 웹 화면이 이것 이었습니다.
index.html은 껍데기 이고 이 app.component.html 가 app-root에 맵핑되어서
보여진 것이지요.
title도 여기서 위치 잡고 있습니다.
대충 파일들의 구조를 그려보면 이런 식으로 연결 되어 있습니다.
다음에는 페이지를 추가해 보면서 구조를 좀더 살펴 보겠습니다.
- copy coding -
'Angular' 카테고리의 다른 글
| [angular] 앵귤러 Material Theme 종류별 비교 (0) | 2018.11.25 |
|---|---|
| [angular] 앵귤러 form material 입력 작업 비교 (0) | 2018.11.24 |
| [angular] 앵귤러 component 추가 방법 (0) | 2018.11.13 |
| [angular] 앵귤러 eclipse에서 간단한 project 테스트 (0) | 2018.11.11 |
| [angular] 앵귤러 간단한 프로젝트 console에서 테스트 (0) | 2018.11.08 |
