Angular의 기본 개념 및 사용

• 기본 명령어
• Component
• Module
  • declaration
  • imports
  • bootstrap
• Service
  • WorkFlow
  • main.ts
  • 라이브러리
• Express
  • Example
  • 활용법
• Structural Deretive
  • Pipe
  • Method in Components
  • Model
  • Property Binding
  • Class Binding
  • Event Binding
  • (click)=”func()”
  • Two Way Binding
  • Routes
  • Http Library
  • 언디파인 방지

기본 명령어

새 프로젝트 만들기

ng new [project name]

빌드 및 실행

$ ng build
$ node server.js

참고 페이지

Component

컴포넌트는 어플리케이션을 구성하는 작은 조각이다.

@Component 를 클래스 위에 선언하여 컴포넌트를 꾸며주고 필요한 정보를 명시한다.

Selector

selector는 css선택자이며, 태그의 이름이다.

template

우리가 로드하려고 하는 템플릿을 작성한다.

브래킷인 `안에 작성한다.`

각컴포넌트는 html, css, class를 가진다.

컴포넌트는 template을 가진 일종의 directive이다.

ng generate component [componentname]
을 통해 아주 간편하게 컴포넌트를 생성할 수 있다.

Module

모듈은 우리의 어플리케이션을 angulr하게 조직하기 위해 필요한 것이다.

모든 어플리케이션은 앱을 lauch하기 위한 적어도 하나의 root module을 가진다.

모듈은 기능적으로 관력이 있는 컴포넌트들을 묶어준다.

declaration

컴포넌트들을 선언한다.

imports

브라우저에서 앱을 런칭하기 위해 필요한 디펜던시를 인젝트해준다.

bootstrap

root component를 명시하여 모듈이 bootstrap될 때 render하도록 한다.

Service

컴포넌트 사이에 중복된 코드와 데이터를 교환하는데 사용된다.

WorkFlow

1. Service에 @Injectable()을 추가한다.

뿐만 아니라 import{Injactable} from “@angular/core”도 해주어야 한다.

2. Injector 즉, Module에게 Providers를 제공하여 서비스에 대해 알게 해야 한다.

providers:[Service]

3. 컴포넌트에 Dependency를 Inject 해준다.
   • ngOnInit() :
   • constructor(pricate service:Service){}

main.ts

필요한 라이브러리를 import해준다.

BrowserModule

앵귤러 웹사이트를 동작하기 위한 라이브러리이다.

platformBrowserDynamic

웹사이트를 render하기 위한 앵귤러의 라이브러리이다.

라이브러리

Express

Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다.

app.use() 및 app.METHOD() 함수를 이용해 애플리케이션 미들웨어를 앱 오브젝트의 인스턴스에 바인드하십시오.

이때 METHOD는 미들웨어 함수가 처리하는 요청(GET, PUT 또는 POST 등)의 소문자로 된 HTTP 메소드입니다.

다음 예에는 마운트 경로가 없는 미들웨어 함수가 표시되어 있습니다. 이 함수는 앱이 요청을 수신할 때마다 실행됩니다.

Example

var app = express();
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

활용법

Structural Deretive

html element들을 추가 제거 대체하여 레이아웃을 변형한다.

*ngFor = "let carPart of catParts"

어레이를 돌며 객체를 꺼낼때 사용한다.

*ngIf="carPart.inStock>0"

if문을 사용한다.

Pipe

template output을 변형하기 위해 쓰인다.

Method in Components

template output을 변형하기 위해 쓰이며, 선언없이 바로 정의한다.

Model

특정 객체를 선언하도록 ts에서 선언한다.
export const
export const를 통해 상수 객체를 선언하고 가져다 쓸 수 있따.

Property Binding

프로퍼티 바인딩은 컴포넌트의 property를 any Dom element property로 지정할 수 있게 한다.
여기서 컴포넌트의 property가 업데이트 되면 DOM도 자동으로 업데이트 된다.
하지만 DOM에서 업데이트 되었다고 컴포넌트의 property가 업데이트 되지는 않는다.

Class Binding

[class.name]="property"를 통해 property가 참이면 클래스에 name을 추가할 수 있다.

Event Binding

DOM에서 발생하는 다양한 이벤트들을 처리할 수 있다.

(click)=”func()”

클릭이벤가 발생하면 컴포넌트의 func()를 실행시킨다.

Two Way Binding

[(ngModel)}="property"

이를 통해 two way data binding이 가능하다.
이를 쓰기 위해서는 FormModule을 Import해야 한다.

Routes

Angular 내에서 url을 부여하여 옮겨다니기 위함이다.

1. RouterModule을 Import 해준다.
   
   import{RouterModule} from "@angular/router"
2. RouterModule을 imports에 추가해 준다.
   
   .forRoot([{path:"/race",component:raceComponent},{}])
3. 링크를 걸어준다.
   
   a [routerLink]="['/races']"
4. router-outlet 태그를 먹여준다.
   
   <router-outlet></router-outlet>

Http Library

1. json파일을 만든다.
2. HttpModule을 Import 해준다.
   Http를 위한 library를 추가해야 하지만 HttpModule 내에서 이미 서비스를 provide하므로 할필요 없다.
3. injector에 httprovider를 추가해준다.
4. 서비스에 http를 dependency inject해준다. 그리고 get request를 한다.
5. req에 의해 반환되는 data를 listen한다.

언디파인 방지

if(Array.isArray(this.carParts){}로 감싸 this.carParts가 undefined된 경우를 처리할 수 있다.

---