본문으로 바로가기

기본만 살펴보면 Nest.js와 상당히 비슷하다고 알 수 있따.

(Nest.js아 Angluar에 영감을 받아 만들어졌지만 필자는 Nest를 먼저 맛 본 관계로...)

 

설치

 

angular-cli 설치

npm install -g @angular/cli

버전확인

ng version

 

ng new [projectName]

 

ng generate 꼴로 필요한 코드들의 scafold를 만들어주는데 아주 유용함. 게다가 Module에 자동으로 주입까지 해 줌.

https://angular.io/cli/generate

ng generate <schematic> [options]

ex - ng generate component header
줄여서 ng g c header

ex- n g c header/logo
header 경로 아래 logo라는 컴포넌트 생성하기

 

 

구조 설명

 

react에서 <div id='root'></div>로 관습적으로 잡는 부분이 <app-root>로 되어 있음.

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

 

./main.ts

entry포인트 역할을 함. 구체적으론 AppModule파일을 실행

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();
}

// bootstrapModule : 애플리케이션 로드
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

 

app 내부

 

NgModule을 이용하여 AppModule이란 클래스를 모듈화함.

* 모듈 -> 독립 가능한 덩어리, 아래 글을 참고 하면 더 좋음

https://programmingsummaries.tistory.com/118

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AppModules는 모듈이야
@NgModule({
  // 선언값. 모듈에서 사용할 컴포넌트들이 들어감
  declarations: [AppComponent],
  // 다른 모듈 import
  imports: [BrowserModule, AppRoutingModule],
  // 서비스 로직들
  providers: [],
  // 실행할 컴포넌트 (booting)
  bootstrap: [AppComponent],
})
export class AppModule {}

 

그렇다면 AppModule이 boot하는 AppComponent는 무엇인지 app.component.ts를 살펴보자.

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

// AppComponent는 컴포넌트야
@Component({
  selector: 'app-root', // tag 이름 <app-root>
  templateUrl: './app.component.html', // 이 템플릿을 렌더할거야
  styleUrls: ['./app.component.scss'], // 이 스타일을 쓸거야
})
export class AppComponent {
  title = 'front-end'; // templateUrl에서 {{ title }} 꼴로 사용 가능
}

 

기타 

package.json 중 script 부분

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

 

angular.json

앵귤러의 각종 설정들이 들어 있음. (생략)

 

빌드해서 뱉어보자

(wow webpack 안 짜도 되네?)

 

 

ref)

https://programmingsummaries.tistory.com/118

 

darren, dev blog
블로그 이미지 DarrenKwonDev 님의 블로그
VISITOR 오늘 / 전체