Copy Coding

angular에는 총 4개의 테마가 있습니다.

사이트의 성격에 따라 내용도 중요 하지만 컬러가 느낌을 전달 하는데 많은 역할을 하게 되는데요.

angular에서 제공하는 테마들이 어떻게 다른가에 대해 결과만 확인해 보겠습니다.

1. deeppurple-amber.css

진보라색과 황색이 조화된 구조 입니다.

2. indigo-pink.css

남색 또는 쪽빛과 핑크색이 주가된 테마입니다.

3. pink-bluegrey.css

핑크색과 푸른회색이 섞여 있는 테마 입니다.

4. purple-green.css

자주색과 녹색으로 되어진 테마 입니다.

5. 전체 비교

한번에 다 모아놓고 비교를 해보면 차이점을 쉽게 알 수 있습니다.

이것만 가지고 사이트를 완성 하라고 하는건 아닙니다.

별도로 디자인을 할 수 없는 상황이면 기본적으로 제공하는 테마를 사용하면 되고

필요하다면 테마를 추가하여 사용 할 수 있도록 되어 있습니다.

- copy coding -

오늘은 데이터 입력 화면을 하나 만들어 테스트 해보겠습니다.

입력 폼을 두개 만들어 비교를 하고 모양은 아래와 같습니다.

form을 두개 만들고 데이터를 입력하여 어떻게 처리 되는지 보려고 합니다.

상단 폼은 일반적인 형태의 폼 테그입니다.

두번째는 Angular Material을 사용한 입력 폼 입니다.

작업할 파일은 다음 그림과 같습니다.

위에 2개의 파일이 주요 작업 대상이고 나머지는 그냥 설정 파일들 입니다.

작업 순서

이전에 했던  component 추가 파일을 가지고 작업합니다.

[angular] component 추가 방법

1. 먼저 기존 화면을 수정합니다.  기존화면은 Angular 마크가 커다랗게 나왔는데 모두 주석처리 합니다.

2. css 파일 생성

3. html 파일에 form 2개 추가

4. module에 material 관련 import

5. 변수 및 버튼 클릭 이벤트 함수 생성

6. 테마 추가

7. 화면 테스트

이런식으로 진행 됩니다.

1. 메인 화면 주석 처리

/src/app/app.component.html

파일을 열고 모두 주석 처리를 하여 새로 추가한

/src/app/company-vision/company-vision.component.html 화면만 나오도록 합니다.

2. css 파일 생성

company-vision 관련 화면에만 나오도록 하려면 company-vision.component.css 여기에 추가하면 됩니다.

저는 전체에 적용하는 것으로 작업 합니다.

2.1 폴더 및 파일 생성

먼저 css 폴더를 생성 합니다.

assets에 마우스를 놓고 우측 버튼을 클릭해서 New를 선택하고 Folder를 선택합니다.

폴더 생성 팝업 창이 나타납니다.

Folder name:에 css를 입력 합니다.

만드는 김에 혹시나 해서 이미지 폴더도 만들었습니다.

Folder name:에 images를 입력 합니다.

생성된 css 폴더에 css 파일을 하나 생성 합니다.

css 폴더에 마우스를 놓고 우측 버튼 > New 선택 > Other… 선택

창이 열리면 Web을 찾아서 펼칩니다.

CSS File을 선택하고 하단의 Next 버튼을 클릭 합니다.

 파일 이름을 저는 form.css로 정했습니다. 각자 편한 이름으로 기입하시고 [Finish] 버튼을 클릭 합니다.

form.css 파일이 생성 되었습니다.

필요한 내용을 적어줍니다. 소스는 하단에 추가 하겠습니다.

2.2 CSS 반영

새로 추가한 form.css를 반영해보겠습니다.

/app/company-vision/company-vision.component.ts

파일을 열고 기존 css 파일은 주석처리 또는 삭제하고 신규 파일의 path도 같이 추가를 하면 되는데

css 파일의 path 잡기가 어렵지 않습니다.

자동 완성 기능이 있어서 아주 쉽게 처리 할 수 있습니다.

path와 file도 자동으로 완성 기능이 적용 됩니다.

styleUrls: ['../../assets/css/form.css']

3. html 파일에 form 2개 추가

이제 화면 작업을 진행 합니다.

/src/app/company-vision/company-vision.component.html

파일을 열고 열심히 코딩 합니다.

3.1 일반 형태의 form

<form>
    <h3>Input Data</h3>

    <div>
        <label for="vision1">Vision :</label>
        <input name="vision1" #vision1> 
    </div>
    <div>
        <label for="name1">Name :</label>
        <input name="name1" #name1> 
    </div>
    <div>
        <label for="email1">e-mail :</label>
        <input name="email1" #email1>
    </div>

    <button (click)="addArticle1(vision1, name1, email1.value)">
    Submit
    </button>
</form>
Input Data :  {{name3}} / {{email3}}

<input name="vision1" #vision1>

<input name="name1" #name1>

<input name="email1" #email1>

name1과 email1으로 input을 정의 하였고

<button (click)="addArticle1(name1, email1)">

버튼 클릭시 addArticle1() 가 실행되도록 연결하였습니다.

Input Data :  {{name3}} / {{email3}}

하단에 입력한 값을 보여주도록 했습니다.

3.2 Material 형태의 form

<div class="divcenter">
 <h3>Input Data2</h3>

<div class="example-container">
    <mat-form-field>
        <input matInput #vision2 placeholder="Vision">
    </mat-form-field>
    <mat-form-field>
        <input matInput #name2 placeholder="Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput #email2 placeholder="e-mail">
    </mat-form-field>
    <div class="example-button-row">
        <button mat-raised-button color="primary"
        (click)="addArticle2(vision2, name2, email2.value)">Submit</button>
    </div>
</div>
</div>

Input Data :  {{name4}} / {{email4}}

<input matInput #vision2 placeholder="Vision">

<input matInput #name2 placeholder="Name">

<input matInput #email2 placeholder="e-mail">

name2와 email2으로 input을 정의 하였고

태그들이 mat-으로 시작합니다.

<button (click)="addArticle1(vision1, name1, email1.value)">

버튼을 클릭하면 addArticle2() 함수가 실행되도록 하였습니다.

입력한 데이터는 화면에서 볼 수 있도록

Input Data :  {{name4}} / {{email4}}

하였고요.

4. module에 material 관련 import

mat-으로 시작하는 material 태그들이 작동되려면 모듈들을 import 해야 합니다.

/src/app/app.module.ts

파일을 열고 import 해줍니다.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatFormFieldModule } from '@angular/material/form-field';

import { MatInputModule } from '@angular/material';

import { MatButtonModule } from '@angular/material/button';

import 한다고 적용이 되는게 아니고 반영을 해야 합니다.

imports: [

BrowserModule,

BrowserAnimationsModule,

MatFormFieldModule,

MatInputModule,

MatButtonModule

],

뒤에 공백이 있으면 오류가 발생합니다.

앞에 콤마를 찍어도 오류 표시가 나오니까 형식대로 입력 합니다.

5. 변수 및 버튼 클릭 이벤트 함수 생성

이곳에서 실제 코딩이 진행됩니다.

name3: string;

name4: string;

email3: string;

email4: string;

5.1 일반 폼

일반 폼의 버튼을 선택 했을 때 작동하는 이벤트 함수를 생성합니다.

  addArticle1(vision1: HTMLInputElement, name1: HTMLInputElement, email1: string): boolean {
    alert(`Adding article title: ${name1.value} and link: ${email1}`);
    this.companyVision = vision1.value;
    this.name3 = name1.value;
    this.email3 = email1;
    return false;
 }

화면에서 변수를 보낼 때 일반적으로 보내는 방법과 값만 보내는 방법을 사용 했고

addArticle1(vision1, name1, email1.value)

email1은 값만 보내는 방식입니다.

받는 곳에서도 값만 보낸 경우는 string으로 받습니다.

vision1: HTMLInputElement, name1: HTMLInputElement, email1: string

받은 값은 변수에 대입할 때도 다르게 적용 합니다.

this.name3 = name1.value;

this.email3 = email1;

5.2 Material 폼

두번째 입력 폼은 Angular Material을 사용해 작업을 했습니다.

  addArticle2(vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string): boolean {
    alert(`Adding article title: ${sample1.value} and link: ${sample2}`);
    this.companyVision = vision2.value;
    this.name4 = sample1.value;
    this.email4 = sample2;
    return false;
 }

그리고 변수도 수정을 했는데요.

보내준 parameter 명을 다르게 받아왔습니다.

사실 실제 코딩에서는 이렇게 해놓으면 헤깔려서 짜증이 나겠죠.

vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string

name2를 sample1으로 email2를 sample2로 받아 와서 작업을 하였습니다.

코딩도 별로 어려울게 없죠?

6. 테마 추가

글을 입력할 때 기존 글자까 휙 하고 위로 올라가는 기능은 테마가 해주는 건데요.

/src/styles.css

파일에 4개의 Theme중 하나를 적어 줍니다.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

4가지 테마는 다음과 같습니다.

deeppurple-amber.css

indigo-pink.css

pink-bluegrey.css

purple-green.css

7. 화면 테스트

이제 테스트를 해볼까요?

프로젝트에 마우스를 대고 우측 버튼 > Run As > Angular Web Application을 선택하면

이제 첫번째 폼에 입력 테스트를 해봅니다.

사장이 돈이 오라고 하네요.

직원은 사장 집에 가라 케라 하는군요.

8. Source Code

복사코딩을 위해 소스를 올립니다.

/myNgProject/src/app/company-vision/company-vision.component.html

<h1>
<p>
  company-vision : {{companyVision}}!!
  
</p>
</h1>


<form>
    <h3>Input Data</h3>

    <div>
        <label for="vision1">Vision :</label>
        <input name="vision1" #vision1> 
    </div>
    <div>
        <label for="name1">Name :</label>
        <input name="name1" #name1> 
    </div>
    <div>
        <label for="email1">e-mail :</label>
        <input name="email1" #email1>
    </div>

    <button (click)="addArticle1(vision1, name1, email1.value)">
    Submit
    </button>
</form>
Input Data :  {{name3}} / {{email3}}

<div class="divcenter">
 <h3>Input Data2</h3>

<div class="example-container">
    <mat-form-field>
        <input matInput #vision2 placeholder="Vision">
    </mat-form-field>
    <mat-form-field>
        <input matInput #name2 placeholder="Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput #email2 placeholder="e-mail">
    </mat-form-field>
    <div class="example-button-row">
        <button mat-raised-button color="primary"
        (click)="addArticle2(vision2, name2, email2.value)">Submit</button>
    </div>
</div>
</div>

Input Data :  {{name4}} / {{email4}}

/myNgProject/src/app/company-vision/company-vision.component.ts

import { Component, OnInit } from '@angular/core';
import { Alert } from 'selenium-webdriver';

@Component({
  selector: 'app-company-vision',
  templateUrl: './company-vision.component.html',
  styleUrls: ['../../assets/css/form.css']
  /*styleUrls: ['./company-vision.component.css'] */
})
export class CompanyVisionComponent implements OnInit {

  companyVision: string;
  name3: string;
  name4: string;
  email3: string;
  email4: string;
  constructor() {
    this.companyVision = 'Good Good!!';
    this.name3 = ' ';
    this.email3 = ' ';
  }

  addArticle1(vision1: HTMLInputElement, name1: HTMLInputElement, email1: string): boolean {
    alert(`Adding article title: ${name1.value} and link: ${email1}`);
    this.companyVision = vision1.value;
    this.name3 = name1.value;
    this.email3 = email1;
    return false;
 }

  addArticle2(vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string): boolean {
    alert(`Adding article title: ${sample1.value} and link: ${sample2}`);
    this.companyVision = vision2.value;
    this.name4 = sample1.value;
    this.email4 = sample2;
    return false;
 }



  ngOnInit() {
  }

}

/myNgProject/src/app/app.component.html

얘는 전체 주석처리만 했음.

/myNgProject/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';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent, CompanyVisionComponent]
})
export class AppModule { }

/myNgProject/src/assets/css/form.css

@charset "UTF-8";

form {
    margin: 0 auto;
    width: 500px;
    padding: 10px;
    border: 1px solid #CCC;
    background-color: #cccccc;
}

form div + div {
    margin-top: 5px;
}

label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

input, textarea {
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    vertical-align: top;
    height: 100px;
}

button {
    margin-left: 10em;
}

.example-container {
  display: flex;
  flex-direction: column;
}

.example-container > * {
  width: 100%;
}

.example-button-row button,
.example-button-row a {
  margin-right: 8px;
}

.divcenter {
    margin: 0 auto;
    width: 500px;
}

/myNgProject/src/styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

- copy coding -

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 -

console mode에서 angular를 설치하고 간단한 project를 생성하고 테스트를 해보았는데요.

[angular] angular 간단한 프로젝트 console에서 테스트

이번에는 eclipse에서 angular plug-in을 설치하고 테스트를 해보도록 하겠습니다.

상단 메뉴에서

를 선택하면 창이 하나 뜨고 거기에 Angular가 있는지 확인 합니다.

없네요.

설치가 안되어 있나 봅니다.

그럼 설치를 해보겠습니다.

먼저 eclipse 상단 메뉴에서 Eclipse Marketplace를 선택 합니다.

Help > Eclipse Marketplace…

그러면 Eclipse Marketplace 팝업 창이 열립니다.

Find 입력창에 설치하려는 angular를 입력하고 검색을 합니다.

버전은 시간이 지나면서 변경이 되겠지만 검색된 Angular IDE 설치 합니다.

Angular IDE는 Angular 통합 개발환경으로 자세한 제품 및 기능 설명은

https://www.genuitec.com/products/angular-ide/

이곳을 참조하면 좋은 정보를 얻을 수 있습니다.

[Install] 버튼을 클릭해서 설치할 파일들을 다운받습니다.

추가로 설치할 솔루션이 있으면 선택을 하고 [Confirm] 버튼을 클릭 합니다.

라이선스에 동의를 하고 [Finish] 버튼을 선택 합니다.

eclipse에 Angular를 설치를 완료 하면 재시작 요청 팝업을 오픈 합니다.

[Restart Now] 버튼을 선택하여 eclipse를 재시작 합니다.

재 시작을 하면 eclipse 테마를 변경 시킬 수 있습니다..

[Next] 버튼을 선택 합니다.

이제 테마를 선택 하는 창이 나오는데 기호에 맞는 테마를 선택 합니다.

여기서는 Darkest Dark Theme를 선택 했습니다.

테마를 선택 했으면

[Next] 버튼을 선택 합니다.

추가적인 기능 설치 팝업이 나오는데 Angular IDE를 만든 CodeMix에서 제공하는 건데 모두 Next를 해줍니다.

설치가 끝났으면 이제 원래 하려던 Project를 하나 생성해 보겠습니다.

console mode에서 만들어 본 것 처럼 동일하게 만들겠습니다.

상단 메뉴에서 Angular Project를 찾기 위해 선택을 하면

File > New > Other…

이제는 Angular가 보이는 군요.

Angular Project를 선택 합니다.

생성할 프로젝트에 대한 설정을 하는 팝업 창이 나오네요.

프로젝트 명은 myNgProject로 했고 나머지는

선택할 수 있는 버전들이 있는데 잠시 어떤 버전들이 있는지 볼까요?

그냥 기본으로 설정 합니다.

[Finish] 버튼을 선택 합니다.

Anglar perspective를 보겠냐는데 함 보죠.

eclipse 우측에 머가 나오는 군요.

eclipse 좌측 Project Explorer를 보니 프로젝트가 생성이 되었는데 파일이 없습니다.

아직 다 생성이 된게 아닙니다.

시간이 지나면서 조금씩 파일이 나타납니다.

하단에 프로젝트 생성 진행 상황이 Terminal 창에 보여집니다.

한참 동안 뭔가를 만들다가 화면에 README.md가 나타나면 생성이 된 것 입니다.

README.md에 간단한 프로젝트에 대한 설명이 기술되어 있는데

실행은 ng serve로 하고 접속은 http://localhost:4200으로 하면 된다는 군요.

생성된 프로젝트 파일들도 보입니다.

프로젝트를 실행 합니다.

프로젝트 명에 마우스를 놓고 우측버튼을 클릭하고

Run As > Angular Web Application

선택하면 또 한참을 하단 Terminal 창에서 먼가를 표시하다가

짠 하고 결과가 나옵니다.

테마를 어떤걸 선택하느냐에 따라 화면 비교를 해보겠습니다.

위에서도 화면 캡처를 두가지 버전으로 해보았습니다.

Darkest Dark Theme

Fresh Light Theme

테마를 Light로 하니 단점이 있습니다.

원래 Angular IDE가 Dark를 기본으로 해서 그런지 일부 기호가 흰바탕 에서는 희미하게 보이는군요.

개인의 기호니까 가독성이 좋은것으로 선택을 하세요.

저는 노트북과 데스크톱을 달리 해서 좀더 써봐야 겠습니다.

- copy coding -