JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.
이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.
이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.
필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면
https://www.typescriptlang.org/
를 참조하라.
이번 장에서는 Angular프로젝트를 만들지 않고 Angular를 사용하는 법을 배울것이다.
그러나 앞으로는 angular cli를 사용할 것이므로 사실은 몰라도 된다.
이 장을 넘기고 가도 무방하다는 이야기이다.
그러나 일단 Angualr프로젝트없이 사용하는 법을 알고 싶다면 이 장을 보라.
일단 테스트를 보여줄 index.html과 main.ts를 보자.
main.ts는 우리가 사용할 angular프로젝트의 축소판이라고 할 수 있다.
그럼 main.ts의 코드를 보자.
import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
@Component({
selector : 'hello-world',
template : '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
name :string;
constructor(){
this.name = 'Angular';
}
}
@NgModule({
imports : [BrowserModule],
declarations : [HelloWorldComponent],
bootstrap : [HelloWorldComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
아직 이해 못할것 투성이다. 가볍게 설명을 하고 넘어가겠다.
Component - angular에서에서 사용하는 작은 단위이다. 위의 프로젝트를 기준으로 설명하면 hello-world라는 태그를 만나면 template로 치환해라는 것이다. 또한 안에 {{}}로 감싸져 있는 문구는 변수로 아래의 클래스 내부에 선언한 변수와 매칭이되서 삽입된다.
NgModule - 여러 컴포넌트를 논리적인 단위로 묶어둔 집합체이다. 우리는 모듈을 선언하고 그 모듈내부에 컴포넌트들을 적재한다. 외부에서는 이 모듈을 사용하는 것이로 해당 컴포넌트들을 모두 사용할 수 있다. 모듈을 사용하기 위해서는 NgModule 데커레이터 내부의 declarations와 bootstrap에 각각 선언해주는 것이 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5"></script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.src.js"></script>
<script src="https://unpkg.com/typescript@2.3.3"></script>
<script>
System.config({
transpiler : 'typescript',
map :{
'rxjs' : 'https://unpkg.com/rxjs@5.3.0',
'@angular/core' : 'https://unpkg.com/@angular/core@4.1.0',
'@angular/common' : 'https://unpkg.com/@angular/common@4.1.0',
'@angular/compiler' : 'https://unpkg.com/@angular/compiler@4.1.0',
'@angular/platform-browser' : 'https://unpkg.com/@angular/platform-browser@4.1.0',
'@angular/platform-browser-dynamic' : 'https://unpkg.com/@angular/platform-browser-dynamic@4.1.0'
}
});
System.import('main.ts');
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
html은 angular프로젝트를 어떻게 사용하는지에 대한 예제이다.
이것을 사용하기 위해서 총 4가지의 cdn을 사용했다.
이는 각각 core.js와 zone.js, system.js,typescript이다.
각각의 역활은 아래와 같다.
core.js - 자바 스크립트는 여러버전이 있다. 여러분이 책에서 배우는 버전은 보통 EcmaScript05이며 현재 대부분 웹에서 지원하는 버전이다. 그러나 TypeScripts는 보통의 경우 EcmaScript06로 번역이 된다. EcmaScript06은 자바 스크립트 최신버전이지만 모두가 지원하는건 아니다. 물론 경우에 따라 다르다. 이러한 브라우저, 스크립트 끼리의 차이를 좁히기 위해서 사용하는 것이 core.js이다.
zone.js - 아직 해보진 않았겠지만 angular는 이벤트에 반응해서 뷰를 변형해서 보여주는 기능이 있다. 단 그 기능은 앵귤러에서 지원해주는 메소드나 함수 한정이고 native java나 jquery, ajax등에는 반응하지 않는 다는 문제점이 있다. 이를 극복하기 위해서 사용하는 것이 zone.js이다.
system.js - 환경설정을 로딩하기 위해서 사용한다. 예를 들어 위의 코드에서는 main.ts를 로딩하기 위해서 여러가지 모듈이 필요한데 이를 사용하기 위해서 System이 필요하므로 system.js가 필요하다.
typescript - 타입 스크립트는 기본적으로 어떠한 브라우저도 읽는것이 불가능하다. 따라서 이를 문법적으로 이해하고 읽게 도와주려면 필요한 것이 typescript이다.
이제 실행해보자.
위처럼 실행되면 성공이다.
'Programming > TypeScript-Angular' 카테고리의 다른 글
| [Angular-06]if문 (0) | 2018.04.22 |
|---|---|
| [Angular-05]for문 (0) | 2018.04.22 |
| [Angular-04]angular component (0) | 2018.04.22 |
| [Angular-03]Angular cli 프로젝트 사용하기 (1) | 2018.04.22 |
| [Angular-01]Angular와 TypesScript (0) | 2018.04.22 |