🛡️ Angular/🛡️ Angular
Angular 산책하기 (1) : angular-cli 설치와 appModule
DarrenKwonDev
2021. 11. 22. 22:21
기본만 살펴보면 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