JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.
이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.
이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.
필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면
https://www.typescriptlang.org/
를 참조하라.
이 때까지 component를 사용하고 template을 사용하는 법을 알았다면 이제 모듈에 대해서 알아보자.
사실 모듈에 대해서는 깊게 생각할건 없다. 그냥 컴포넌트를 모아둔 것이라고 생각하면된다.
아래 자동으로 생성되는 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 { }
Module은 Component를 모아서 관리한다고 하였다.
여기서 보면 NgModule이라는 데커레이터가 존재하고 그 안에 여러 파라메터들이 존재한다.
각각이 무엇을 의미하는지를 알아보자.
declarations - 이 모듈에서 사용 가능한 뷰 클래스를 정의한다. angular에서는 component, directive, pipe 세 종류가 존재한다.
exports - 다른 모듈이나 컴포넌트에서 접근할 수 있도록 선언한다. 여기서 선언하지 않는다면 이 모듈이 컴포넌트를 포함하고 있더라도 다른 모듈이나 컴포넌트에서 사용할 수 없다.
imports - 다른 모듈을 포함시킬 때 사용한다. 위의 예제에서는 BrowserModule을 임포트 시켰다. Browsermodule은 루트 모듈을 의미한다.
providers - 전역의 서비스를 해당 객체에서 사용할 수 있더록 지정한다
bootstrap - 루트 모듈에만 존재하는 파라메터로 메인 어플리케이션의 뷰를 선언한다.
그럼 이제 사용하는 예제를 한번 보도록하자.
일단 처음 만든상태에서 모듈에 앞서서 컴포넌트를 만들어 보자.
컴포넌트가 모인게 모듈이라고 하였다.
컴포넌트 만들기
ng generate(g) component(c) <컴포넌트 명>
보다시피 해당 명령어로 컴포넌트를 만들 수 있다.
본디 ng generate component 같은 형태로 쓰지만 실제로 사용할 때는 ng g c 같이 줄여서 쓰는게 일반적이다.
해당 명령어를 입력했다면 컴포넌트명 이름으로 typescript 소스가 생겼을 것이다.
여기서 컴포넌트를 만드는 위치가 매우매우매우 중요하다.
해당 명령어를 사용하는 위치가 여러분이 따로 만든 모듈이 아니라면 루트모듈에 들어가지만
만약 특정 모듈의 하위에서 실행했다면 해당 모듈로 들어간다.
위의 경우는 루트모듈에서 실행했으므로 루트모듈로 들어갔다.
보다시피 해당 컴포넌트 파일이 새로 생성됬다 내부는 아래와 같다.
여러분이 이 때까지 작성했던 모듈과 같은 형태로 되어 있음을 알 수 있다.
단 모든 파일의 이름에 해당 컴포넌트의 이름이 기재되어 있음을 확인할 수 있다.
component의 소스를 보자.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
위의 코드가 자동완성되었다.
사실 새로운 개념이 몇개 있지만 여기서는 설명을 하지 않도록 하겠다.
그럼 html 소스를 보자.
<p>
test works!
</p>
해당 코드가 생성 되었음을 확인할 수 있다.
즉 test라는 모듈은 app-test라는 태그에 렌더링을 시켜주는 컴포넌트인 것이다.
이제 기존의 루트 모듈을 보도록 하자.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {TestComponent} from './test/test.component';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
루트 모듈을 보면 알수 있겠지만 자동으로 몇줄이 바뀌었다.
먼저 declarations에 TestComponent가 추가되었다.
이제 해당 컴포넌트 내부에서 해당 컴포넌트를 사용할 수 있게 된 것이다.
이제 루트 모듈의 부트스트래핑(진입지점)의 컴포넌트인 AppComponent를 보도록하자.
<app-test></app-test>모든 걸 다 지우고 필자가 추가한 코드이다. app-test라는 태그를 붙혔다.
이 태그는 필자가 만든 test component내에 정의된 템플릿이다.
이제 호출하여보자.
제대로 작동함을 확인할 수 있다.
여기서 질문점이 있다. 질문점을 보기위해서 먼저 index.html을 보도록하자.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyModule</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은 외부에서 사용하는 웹을 가정해서 만들어진 샘플 코드라고 하였다.
여기서 app-root라는 태그를 썼는데 이 태그는 app component에 내장된 템플릿이다.
그럼 우리는 app-test라는 태그를 소유한 test component를 만들었는데 이 녀석을 호출할 수 없을까?
결론은 불가능 하다는 것이다.
그 이유는 한 모듈에 bootstrap으로 선언한 템플릿만 외부에서 직접적으로 사용할 수 있다.
그럼 bootstrap에 여러 컴포넌트를 선언할 수 있을까?
그렇지도 않다. bootstrap에 선언가능한것은 오직 하나뿐이다.
즉 하나의 컴포넌트만이 bootstrap될 수 있다.
나머지 템플릿들은 우리가 루트 컴포넌트를 통해서만 표현할 수 있는 것이다.
그럼 이제 모듈을 제작해 보자.
모듈 만들기
ng genrate(g) module(m) <모듈명>
해당 모듈을 만드는 명령어는 ng g m이다.
물론 길게도 쓸 수 있지만 굳이 그렇게 쓸 이유 없다.
어느 디렉터리에서 쓰던 상관없이 app의 하위에 만들어 진다.
이 모듈은 루트 모듈이 아니며 루트 모듈에 포함된 하위 모듈이다.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class HumanModule { }
루트 모듈인 AppModule이 BrowserModule을 imports했던 것과는 달리
CommonModule을 imports했다. 이는 이 모듈이 루트모듈이 아니기 때문이다.
모듈은 새로 만들경우 자동으로 컴포넌트들을 제작해 주지 않는다. 그래서 우리는 컴포넌트들을 몇개 새로 만들어야한다.
여기서 중요한것은 경로이다. 아래의 컴포넌트를 생성하는 예제를 보자.
중요한것은 위치다. 해당 모듈의 하위디렉터리로 이동해서 만들어야 그 모듈의 컴포넌트로 등록된다.
그렇지 않으면 루트 모듈의 컴포넌트로 등록되어서 일일히 컴포넌트를 바인딩 하는 작업을 해줘야한다.
두번 손가지 않게 해주자.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ManComponent } from './man/man.component';
import { WomanComponent } from './woman/woman.component';
@NgModule({
imports: [
CommonModule
],
declarations: [ManComponent, WomanComponent]
})
export class HumanModule { }
보면 HumanModule에 ManComponent와 WomanComponent가 등록된 것을 볼 수 있다.
그럼이제 소스 코드들을 수정해서 템플릿 들을 한번 사용해 보자.
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ManComponent} from './man/man.component';
import {WomanComponent} from './woman/woman.component';
@NgModule({
imports: [
CommonModule
],
exports: [
ManComponent,
WomanComponent
],
declarations: [ManComponent, WomanComponent]
})
export class HumanModule {
}
먼저 HumanModule에 손을 대는데 ManComponent와 WomanComponent를 외부에서 사용할 수 있게 exports해준다.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {TestComponent} from './test/test.component';
import {HumanModule} from './human/human.module';
@NgModule({
declarations: [
AppComponent,
TestComponent,
],
imports: [
BrowserModule,
HumanModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
그 다음 AppModule에서 HumanModule을 import한다. 이러면 HumanModule은 AppModule에 포함된다.
<app-test></app-test>
<app-man></app-man>
<app-woman></app-woman>
app-component에 해당 템플릿을 선언해보고 실행해 보자.
제대로 작동하는 것을 확인할 수 있다.
'Programming > TypeScript-Angular' 카테고리의 다른 글
| [Angular-10]외부 프론트 라이브러리 적용하기 (0) | 2018.05.09 |
|---|---|
| [Angular-09]angular directive (0) | 2018.04.25 |
| [Angular-07]template 변수 바인딩 (0) | 2018.04.22 |
| [Angular-06]if문 (0) | 2018.04.22 |
| [Angular-05]for문 (0) | 2018.04.22 |