JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.
이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.
이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.
필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면
https://www.typescriptlang.org/
를 참조하라.
이번에는 angular프로젝트를 만들어 보자. 이번에는 angular-cli를 이용해서 만들것이다.
angular-cli를 설치하는 방법은 1장을 참고하기 바란다.
angular-cli는 angular를 테스트하고, 빌드하고, 프로젝트를 만들게 도와주는 툴이다.
과거에 angular는 2장처럼 사용했으나 이제는 webpack을 이용해서 빌드를 해서 사용하는게 보통이다.
뭔말인지 모르겠으면 쉽게 사용할 수 있다는 이야기이니 2장의 내용을 잊어도 크게 지장 없다는 것이다.
그럼 angular-cli를 사용해서 프로젝트를 만들어 보자.
먼저 폴더를 만들어 준다.
ng new <프로젝트명>
프로젝트를 만들려면 ng new라는 명령어로 만들어준다.
그러면 해당디렉터리로 폴더가 만들어준다.
엄청 많이 설치되는데 아직 다 알 필요없이 가장 중요한 폴더만 알아보도록 하자.
가장 중요한 폴더는 src->app폴더이다.
여기서 해당 폴더내의 파일을 간단히 설명하도록 하겠다.
app.component.html - 기존 web에서의 html코드를 담당한다. 없이 사용해도 되지만 있는게 편하다.
app.component.css - 기존 web에서의 css코드를 담당한다. 없이 사용해도 되지만 있는게 편하다.
app.component.ts - 기존 web에서의 js코드를 담당한다. 없이 사용해서는 안되며 angular단에서의 component를 담당한다.
app.module.ts - angular단에서의 module을 담당한다.
즉 위의 html과 css만 부분적으로 조립해서 사용하고 js는 component와 module로 분리되어 있으며 합쳐서 사용해야 한다.
이제 angular cli를 사용해서 테스트 해보자.
npm install
ng serve
먼저 npm install을 사용해서 nodejs모듈을 설치해준다.
그 다음 ng serve를 해서 테스트용 서버를 열어준다. 아무 설정을 하지 않으면 4200이 열린다.
여기서 ng serve할때 포트 번호를 주고싶다면 ng serve --port <포트번호> 같은 상태로 쓰자.
테스트를 해보면 제대로 동작함을 확인할 수 있다.
이 까지는 테스트용이고 만약 배포를 하거나 실전에서 쓰고싶다면 빌드를 해줘야한다.
빌드 방법은 아래와 같다.
ng build
빌드를 하고 나면 아래와 같이 dist라는 폴더가 생긴다.
dist폴더 내부에 여러가지가 있는데 여기서 js파일들만 프로젝트에 추가로 넣어주면된다.
html코드는 예제코드이다 한번 보도록하자.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</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>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
app-root를 돌리기위해서 총 5개의 js가 사용되는 것을 볼 수 있다.
이제는 빌드된 상태이므로 서버를 돌리지 않아도 동작하는것을 확인할 수 있다.
'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-02]Angular프로젝트 없이 사용하기 (5) | 2018.04.22 |
| [Angular-01]Angular와 TypesScript (0) | 2018.04.22 |