Angular 기초

# Angular CLI(Command Line Interface)

Q. Angular CLI란?

Angular CLI는 Angular 프로젝트를 지원하는 명령어 툴이라고 생각하면 된다. 해당 툴을 사용하여 기본 Angular Project를 생성한다. 단, node.js 프로젝트이기 때문에, 6.9 이상의 node.js를 먼저 설치해야 정상작동 가능하다.

 

Q. How to Install?

1. npm install -g @angular/cli   -> -g 키워드를 붙여서, angular cli를 어디서든 사용가능하도록 설치

2. ng --version                       -> 설치 후, 제대로 설치되었는지, version을 확인한다.

 

Q. Angular 기본 프로젝트를 생성하는 방법

1. ng new first-app                 -> 기본 angular 프로젝트를 자동 생성

 

Q. 프로젝트 폴더의 구성

- src 폴더를 제외하고, configuration 파일로 구성된다.

- config 파일은 typescript 관련 속성 파일과, 프로젝트 전반에서 사용되는 node 모듈을 정의한 package.json 등이 있다.

주로 작업은, src 폴더 내 app 폴더 내에서 이루어지며, app 폴더 내 실질적으로 application 관련된 파일들이 들어가게 된다.

- assets 폴더 내에는 작업에 사용되는 이미지들이 저장되는 공간이라고 생각하면 된다.

- 그외, environments 폴더는 environment.ts(서버 url 등)와 environment.prod.ts로 구성되어 있는데, 마지막에 프로젝트를 production 모드로 build할 경우 environment.prod.ts 파일의 내용이 environment.ts로 덮어씌워지게 된다.

- main.ts 파일에서 app이 실행된다고 생각하면 된다.

 

Q. Angular 프로젝트 build & 서버실행

1. ng serve

2. localhost:4200 -> 브라우저 접속 후, 확인

 

Q. Angular CLI 기본 명령어

ng -help  : 지원하는 명령어 출력

     new (n)   : Creates a new workspace and an initial Angular app.

     build (b)  : src폴더에 있는 것을 build하여, dist 폴더로 이동?

     generate : 제일 많이 사용, 새로운 컴포넌트, 라우트, 모듈, 서비스, 클래스 Angular cli를 통해 만들어줌.

     serve (s) : Build 후, 어플리케이션을 서버에 띄워줌 / Builds and serves your app, rebuilding on file changes.

     version (v) : CLI의 버전 반환 / Outputs Angular CLI version.
     test (t) : 컴포넌트별 유닛테스트 진행 / Runs unit tests in a project.

     lint(l) : 코드의 스타일 가이드에 맞게 되어있는지 체크(l) 코드의 스타일 가이드에 맞게 되어있는지 체크

     add Adds support for an external library to your project.
     analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
     build -aoh ahead of time
     build --watch 소스코드 저장 및 변경되자마자, build가 바로 발생하도록 설정(기본)
     deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
     config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
     doc (d) 공식 document
     e2e (e) 완전 테스트 / end-to-end tests
     run Runs an Architect target with an optional custom builder configuration defined in your project.
     update Updates your application and its dependencies. See https://update.angular.io/
     xi18n 다국어 처리 / (i18n-extrxcact) Extracts i18n messages from source code.

 

# Angular Hello World

- angular.json란 cli에서 사용하는 기본 설정 파일을 의미한다.
- build할 때, 동적으로 js와 css를 생성한다.

- src/main.ts 中

Angular Application을 실행할 Module을 지정

기본적으로, app.module.ts가 Root Module로 지정되어 있다.

기본적으로, app.module.ts의 경우, app.component.ts를 bootstrap 컴포넌트로 지정하고 있다.

 

- src/app/app.module.ts 中
@NgModule({}) : Angular Module 클래스 임을 정의, bootstrap 속성 내에 AppComponent 모듈을 지정

- src/app/app.component.ts 中

@Component : Augular Component임을 정의

 

# ES6 상의 Module 생성

Q. Module에 대해서

세부 구현이 숨겨지고 공개 API(메소드)를 이용해 다른 코드에서 재사용 가능한 코드를 의미한다.
(ex) 리모콘이라는 모듈, 각 버튼이 method, 버튼마다 기능이 있음

 

Q. ES6 상의 모듈
변수의 스콥이 모듈로 제한 (js 특성상, 변수의 스콥이 모듈 내에 제한 된다.)
각각의 파일이 Module이 되고, 각각의 파일 내에 변수는 해당 모듈 내 제한된다.

 

Q. ES6 상의 모듈 선언법
ES6 이전에는 현재 js파일에서, 같은 폴더내 js를 마음껏 가져다 쓸수 있었으나, ES6부터는 export라는 키워드를 써주어 선언하고, 현재 js에서 함수를 호출할 수 있다.

// moduleExample.js
// 함수 예시
export function functionName(){}

// main.js
import { functionName } from 'jsFilePath' 
functionName()

// moduleExample.js 
// class 예시
export class Greeting {
  sayHello(){
  }
}
//main.js 
import { Greeting} from 'jsFIlePath'
let/const g = new Greeting();
g.sayHello();

Q. Angular TypeScript 상의 모듈 선언법

//./src/app/greeing.ts

export function greeting(name) {
    console.log('hello ' + name);   
}

//./src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { Greeting } from './app/greeting'; //★
if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
// 우리가 만든 코드를 browser에서 컴파일할 것이다라는 선언

const g = new Greeting(); //★
g.sayHello('sangdeok'); //★

 

Q. 부가 지식

- unpack.com이란 npm에서 제공되는 것을 cdn으로 호스팅해주는 서비스

- ES6을 지원하지 않는 browser의 경우, export, import 문법 사용시, 에러 발생
- SystemJS와 babel을 통해 해결, 그러나 의존성이 있는 js 파일을 cdn을 통해 계속 불러올 경우, 성능이 느려지기 때문에, Angular 같은 경우는 의존성이 있는경우, bundle 형식으로 묶어서 한번에 hosting 한다. Webpack을 통해 bundle.js 파일을 생성한다?
- build 시, main.ts를 보고 필요한 depedency있는 모듈들을 bundle파일로 생성해준다. main.bundle.js

 

# Angular Module

Q. 앵귤러 모듈이란?

- 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑하게 해준다.
- 모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다. 기본 Root Module은 app.module.ts이다.

- 여러 Feature Module을 가질 수 있다.
- 재사용 할 수 있는 기능을 웹에 배포하기 위해 사용되기도 한다.

- Root Module에 때려박아도 되지만, 앱이 커질 수록 재사용가능한 Feature module로 쪼개는 것이 필요하다.

 

 

Q. 앵귤러 (Feature) Module 생성 및 재사용가능한 Component 생성

 

1. ng generate module todo(모듈명)
app 폴더 내 todo 폴더가 자동생성, todo.module.ts 라는 모듈이 생성

 

2. ng g(enerate) c(omponent) todo/todos(컴포넌트경로/컴포넌트명) --module todo/todo.module.ts(모듈상대경로) --export

- todo 폴더 내에 todos(컴포넌트명) 폴더가 자동생성된다.

- 하나의 component는 4가지 파일 구성으로 이루어져 있다.(.css 파일과 .html 파일은 Optional)

- todos.component.ts / todos.component.css / todos.component.html / todos.component.spec.ts 가 생성

- module과 관련된 export flag가 붙은 component를 생성된다.

- import/export 설정이 정상적으로 되어 있을 경우, AppComponent의 html 상에서 <app-todos></app-todos> 형식으로 사용가능(컴포넌트명.component.ts 파일 상의 selector 속성에 app-todos로 정의되어 있을 경우)

 

//src\app\todo\todos\todos.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit { //★ export 처리

  constructor() { }

  ngOnInit(): void {
  }

}


//src\app\todo\todo.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TodosComponent } from './todos/todos.component'; //★

@NgModule({
  declarations: [TodosComponent], //★ 모듈내에서, 사용가능한 컴포넌트로 지정
  imports: [
    CommonModule
  ],
  exports: [TodosComponent]
})
export class TodoModule { }

 

Q. 앵귤러 Module의 기본 속성값

- import : [모듈명,] -> 해당 모듈에서 참조할 모듈명 리스트

해당 모듈은 다 export로 정의되어 있어야 하고, 모듈 상단에 아래와 같이 선언되어 있어야한다.

import { TodoModule } from './todo/todo.module';

 

- declarations : [컴포넌트명,] -> 해당 모듈에서 사용 선언한 컴포넌트명 리스트

참조한 module 내부에서 declarations가 되어 있을 경우, 다시 정의하지 않아도, 해당 컴포넌트 사용 가능

declarations 내에 선언되어 있지 않은 컴포넌트의 경우, 사용 불가하다.

부모 컴포넌트의 .html template에서 사용 가능해진다. (ex) app.component.html 상에서 <app-todos></app-todos> 사용가능

 

- bootstrap: [AppComponent]-> 해당 모듈 호출시, 시작점 컴포넌트로 사용될 컴포넌트명

app.module.ts와 같이 Root Module에 해당하는 모듈에서만 설정하는 속성?

- providers: [] //production 모드 시 유용

 

- exports : [CustomComponent]-> 외부 모듈에서, 해당 컴포넌트가 사용될 경우, exports에 컴포넌트명을 정의해주어야 함 사용될 

 

- export class 모듈명 { } -> 외부 모듈에서 현재 모듈을 참조할 수 있도록 export 설정

 

angular에서는 단 하나의 Root Module이 선언되어야 하는데, 그것이 app.module.ts라고 생각하면 된다.

app.module에서 bootstrap이 되는 Component는 AppComponent이다.

 

//src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TodoModule  //★
  ],
  providers: [],
  bootstrap: [AppComponent] //이제 app.component.html 상에서, <app-todos></app-todos> 형식표현 가능
})
export class AppModule { }