본문 바로가기
개발/Angular

[Angular] 앵귤러 프로젝트 구조 & 흐름 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 24.

Angular 프로젝트를 처음 생성하면, 매우 복잡하다는 생각이 들것이다.

하지만, 한 두번 보다보면 금방 이해될것이다.


Angular의 흐름을 아는 것이 중요하다.


우선 가장 먼저 실행되는 것은 index.html이다.



 index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgJamongApp</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>




그다음 index.html 에서 제어가 main.ts으로 넘어가게되는데....

index.html파일에서 main에대한 얘기는 전혀 없다.

이는 현재 실행되는 index.html Element를 보면 확인이 가능하다.






 index.html에서 설정해주지 않은 script들이 추가되어있다.

위 5가지는 실행될떄 Angular가 추가해주는 Script들인데 main.js가 main.ts로 연결해준다.



main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));


import되는 module은 크게 2가지로 나뉜다.

angular의 모듈과,

우리가 만드는 모듈들이다.

angular의 모듈들은 모두 @angular가 붙는다. 경로상으로는 node_modules안에 있는 것을 확인할 수 있다.


여기서 .bootstrapModule()함수는 서버가 실행될때 가장 먼저 실행되는 module이 인자로 들어간다.

AppModule은 ./app/app.module파일에서 import된 class인데 이는 app.module.ts파일을 의미한다.



app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.module.ts파일이 angular프로젝트에서 Component를 관리해주는 역할을 한다고 볼 수 있다.

@NgModule함수에서 4개의 key: value값이 들어있는 object를 인자로 사용된다.

bootstarp은 가장 처음 실행되는 모듈이다.

declarations와 imports의 차이는 아래와 같다.

declarations : 우리가 만든 클래스를 다른 파일에서 사용할수 있게끔 선언한다.

imports : angular의 모듈에서 사용되는 클래스를 다른 파일에서 사용할수 있게끔 선언한다.



module


위에 4개의 파일을 묶어서 하나의 모듈이라고한다.

앞으로 만들 module들은 app폴더에 각각 폴더를 만들어서 module을 관리할것이다.



app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ng-jamong-app';
}


@Component함수를 통해 Component를 생성하고, export된 클래스를 app.module.ts에 등록해주면 다른 파일에서 마음껏 위 컴포넌트를 사용할수 있다.

selector는 사용될 태그이고,

templateUrl은 selector에 담을 html code,

styleUrls는 css를 맡는다.


이부분은 설명보다는 실습을 통해 자세히 알게 될것이다.



app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3..."
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>




app module의 html code는 index의 app-root 태그안에 들어간다.


다음은 실습을 통해 Component과 module에 대해서 알아본다.

댓글0