Angular Get Started

Angular Get Started(angular/cli)

Angular.js는 이름 그대로 javascript전용 framework이다. version 2로 업그레이드 하면서 이름을 Angular로 명명했다. js를 떼어냈다는 의미는 javascript전용은 아니라는 의미로 받아들이면 되며, typescript를 사용 할 것을 권장한다.

typescript 를 사용해서 결국은 javascript로 tranpiling 한다.

angular/cli

Angular에서는 angular/cli 라는 CLI Tool을 지원하고 있다.
요즘 대부분의 웹 관련 모듈들이 그러하듯 npm( 참조)을 통해서 설치할 수 있다.

우선 typescript를 설치한다.

npm i -g typescript

그 후 angular/cli를 설치한다.

Old version
angular/cli 가 @angular/cli package로 통합되었다.
npm list -g angular-cli 통해 구버전 angular-cli가 설치되어 있을 경우, 업데이트 가이드를 따르기 바란다.

> npm i -g @angular/cli

angular/cli가 설치되며, CLI에서 ng 명령어를 통해 여러가지 코드를 자동으로 생성 해 준다.

Command

간단한 ng command 몇가지를 소개하고, 그 아래에 hello world를 띄우기 위한 설명을 적겠다.

help menu

ng --help

다른 CLI 명령어들에 비해 비교적 상세한 설명이 나온다.

New Project

ng new {project name}

Server

ng serve

Component

ng generate component {Component-Name}

보통은 http://localhost:4200으로 접속 할 수 있다.

Hello World

오늘의 개발환경은 MAC OS 되겠다.

Let’s just Follow me.

$ ng new HelloWorld
installing ng
...
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'HelloWorld' successfully created.

Installing packages for tooling via npm. 이 작업에 시간이 꽤 걸린다.

$ cd HelloWorld/
$ code .

한동안 Javascript Editor로는 Visual Studio Code(VS Code)를 사용할 예정이다.
Bracket을 거쳐서 결국은 VS Code의 여러가지 장점(node.js Debugging, CLI, Extentions 등)에 힘입어 정착했다.

code .을 입력하게 되면 해당 path를 기준으로 VS Code를 실행시킨다.

우하단에 terminal이 위치하며 단축키는 ctrl+` (backtick)이다.

$ ng serve
Your global Angular CLI version (1.3.2) is greater than your local
version (1.3.1). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2017-08-27T12:52:26.771Z
Hash: 2a33cad17c6b721c814b
Time: 16822ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.44 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 209 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.27 MB [initial] [rendered]

webpack: Compiled successfully.

위의 초록색 warning은 npm i -g typescript명령을 통해 global로 설치한 typescript가 ng tool의 dependency에 의해 설치된 typescript보다 버전이 높아서 그렇다.
나중에 살포시 ng set --global warnings.versionMismatch=false를 입력 해 주면 된다.

짜잔. 현 버전의 angular/cli를 통해서 타이핑 몇개만 하고 만들어진 화면.
하지만.. 이건 내가 Hello world 조차 입력한적이 없으므로 최소한 Hello World 정도는 입력 해 보자.

src/app/app.module.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Rober\'s app';   // <- HERE
}

ng new HelloWorld를 통해 skefolding 했을 때 우리 앱에 최초로 포함된 Component인 app.component.ts파일의 title을 수정한다.

그리고, templateUrl: './app.component.html'을 보면 알 수 있듯, 연관된 HTML파일인 app.component.html파일을 수정한다.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,.......">
</div>
<h2>This is my first App</h2>    <!-- HERE -->

(<img> tag 안의 src 부분은 너무 길어서 짜름)
</div>아래에 원래 내용을 지우고, 원하는 문구를 넣고, browser를 refresh하면..

어떻게 돌아가는지 자세한건 다음에 기회가 된다면(음음…..?! 요청하는 분들이 있으시다면..) 하도록 하고, 오늘은 이만.

대략적인 포인트는 아래와 같다.

• .angular-cli.json 에 main prop에 entry file이 있음
• (default) main.ts 이 앱을 bootstrap
• bootstrap process가 Angular module 을 활성화(boost) 함
• AppModule을 사용해서 앱을 활성화 시킬거고, src/app/app.module.ts 가 AppModule.
• AppModule이 어떤 컴포넌트가 top level component가 될지를 정함. (default: AppComponent)
• AppComponent는 app-root tag를 사용함