eclipse에서 단순히 클릭만으로 angular 프로젝트를 생성해서 테스트를 진행 했었는데
이번에는 여기에 페이지를 추가하는 작업을 해보겠습니다.
단순 프로젝트는 [angular] eclipse에서 간단한 project 테스트 이곳을 참조 하세요.
페이지를 추가하는 방법도 매우 간단 합니다.
1. Component 추가
component 추가를 해보겠습니다.
프로젝트에 마우스를 놓고 우측 버튼을 클릭 합니다.
New > Component
를 선택 하면 컴포넌트 생성 팝업 창이 나타납니다.
여기서 저는
company-vision
으로 Name을 설정하였습니다. 각자
편한 대로 기입하세요.
Component Name을 기입하면 하단에 Class 명칭도 실시간 자동으로 생성되는 모습을 볼 수 있습니다.
[Next] 버튼을 클릭 합니다.
그냥 [finish]를 선택 해도 되지만 한가지 보고 가려고 합니다.
바로 console mode 에서 어떤 명령으로 생성하는지 보여줍니다.
이제 [Finish] 버튼을 클릭 합니다.
company-vision 이라는 컴포넌트 명으로 디렉토리가 생성 되었고
새로운 웹페이지를 구성하는 4개의 파일도 생성 되었습니다.
2. 생성 파일
새로운 컴포넌트를 생성하면 기존 파일에는 어떤 변화가 있을까요?
1개의 파일에 변화가 발생 합니다.
app.module.ts 파일에 component를 자동으로 등록한걸 볼 수 있습니다.
import { CompanyVisionComponent } from './company-vision/company-vision.component';
/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';
@NgModule({
declarations: [
AppComponent,
CompanyVisionComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
그럼 신규 생성 파일들 중에 중요한 파일만 내용을 보겠습니다.
company-vision.component.ts 파일을 열어 보면 신규 생성 파일의 구성을 볼 수 있습니다.
html과 css 파일 그리고 중요한 랜더링 입니다.
company-vision은 <app-company-vision>에 랜더링 되겠네요.
/src/app/company-vision/company-vision.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-company-vision',
templateUrl: './company-vision.component.html',
styleUrls: ['./company-vision.component.css']
})
export class CompanyVisionComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
그럼 html에는 어떤 내용이 있는지 보겠습니다.
/src/app/company-vision/company-vision.component.html
<p> company-vision works! </p>
별거 없군요.
3. 신규 페이지 메인에 추가
지금 생성한 company-vision을 초기 웹페이지 index.html에 삽입이 가능 한지 해보겠습니다.
기존에
<body > <app-root > </app-root > </body >
이렇게 되어 있는데 이곳에 새로 생성한 페이지를 추가 해서
<body> <app-root></app-root> <app-company-vision></app-company-vision> </body>
이렇게 하고 테스트를 진행 해 보겠습니다.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyNgProject</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> <app-company-vision></app-company-vision> </body> </html>
그리고
company-vision.component.html 도 글씨를 좀 키우겠습니다.
<h1> <p> company-vision works! </p> </h1>
자. 이제 프로젝트를 실행 합니다.
프로젝트 명에 마우스를 놓고 우측버튼을 클릭하고
Run As > Angular Web Application
잠시 기다리면 웹 브라우저가 열립니다.
어? 없네요?
하단이 깨끗하군요.
멀 잘못 했을까요?
컴포넌트를 하나 생성 하면 company-vision에 웹 페이지관련 파일들이 들어 있고
기존 파일 중에 component들을 관리 하는 파일이 하나 있습니다.
/src/app/app.module.ts
바로 이 파일에 컴포넌트를 자동으로 추가를 해주지만 사용 여부는 개발자가 해줘야 겠죠.
bootstrap: [AppComponent, CompanyVisionComponent]
추가를 했습니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';
@NgModule({
declarations: [
AppComponent,
CompanyVisionComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent, CompanyVisionComponent]
})
export class AppModule { }
다시 실행해 봅니다.
잘 나오는 군요.
4. 변수 추가
여기서 조금만 더 가보겠습니다.
/src/app/company-vision/company-vision.component.ts
이 파일의 class에 변수 하나를 추가하고
companyVision: string;
생성자에 변수의 초기값을 부여하겠습니다.
this.companyVision = 'Good Good!!';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-company-vision',
templateUrl: './company-vision.component.html',
styleUrls: ['./company-vision.component.css']
})
export class CompanyVisionComponent implements OnInit {
companyVision: string;
constructor() {
this.companyVision = 'Good Good!!';
}
ngOnInit() {
}
}
/src/app/company-vision/company-vision.component.html
html에는 변수를 대입합니다.
<h1>
<p>
company-vision: {{companyVision}}!
</p>
</h1>
자. 프로젝트를 다시 실행 합니다.
class에서 여러가지 java script(type script) 작업을 하면 html에 반영을 할 수 있습니다.
다음에는 좀더 가보도록 하겠습니다.
- copy coding -
'Angular' 카테고리의 다른 글
| [angular] 앵귤러 Material Theme 종류별 비교 (0) | 2018.11.25 |
|---|---|
| [angular] 앵귤러 form material 입력 작업 비교 (0) | 2018.11.24 |
| [angular] 앵귤러 eclipse에서 간단한 project 테스트 (0) | 2018.11.11 |
| [angular] 앵귤러 console mode에서 프로젝트 분석 (0) | 2018.11.09 |
| [angular] 앵귤러 간단한 프로젝트 console에서 테스트 (0) | 2018.11.08 |