Angular2 퀵스타트

1 개요[ | ]

Angular 2 tutorial
앵귤러2 튜토리얼

실습 디렉토리: /angular2-quickstart
파일 구조

/angular2-quickstart
├ app
│ ├ app.component.ts
│ └ boot.ts
├ index.html
├ tsconfig.json
└ packeage.json

2 사전 작업[ | ]

리눅스 npm 설치

3 packeage.json 작성[ | ]

root@zetawiki:~# mkdir /angular2-quickstart
root@zetawiki:~# cd /angular2-quickstart/
root@zetawiki:/angular2-quickstart# vi package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

4 npm로 설치[ | ]

root@zetawiki:/angular2-quickstart# npm install
... (생략)
lite-server@1.3.1 node_modules/lite-server
├── connect-history-api-fallback@1.1.0
├── yargs@3.31.0 (decamelize@1.1.1, camelcase@2.0.1, window-size@0.1.4, y18n@3.2.0, os-locale@1.4.0, string-width@1.0.1, cliui@3.1.0)
├── connect-logger@0.0.1 (moment@2.10.6)
└── browser-sync@2.10.1 (ucfirst@1.0.0, async-each-series@0.1.1, longest@1.0.1, emitter-steward@1.0.0, easy-extender@2.3.2, dev-ip@1.0.1, query-string@2.4.2, opn@3.0.3, browser-sync-client@2.4.1, ua-parser-js@0.7.10, serve-static@1.10.0, portscanner@1.0.0, meow@3.3.0, eazy-logger@2.1.2, resp-modifier@5.0.2, immutable@3.7.6, foxy@11.1.4, micromatch@2.3.5, connect@3.4.0, chokidar@1.4.1, bs-recipes@1.0.5, fs-extra@0.26.3, serve-index@1.7.2, localtunnel@1.8.0, lodash@3.10.1, socket.io@1.3.7, browser-sync-ui@0.5.16)

angular2@2.0.0-beta.0 node_modules/angular2
root@zetawiki:/angular2-quickstart#

5 tsconfig.json 작성[ | ]

root@zetawiki:/angular2-quickstart# vi tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

6 app.component.ts 파일 작성[ | ]

root@zetawiki:/angular2-quickstart# mkdir app
root@zetawiki:/angular2-quickstart# cd app
root@zetawiki:/angular2-quickstart/app# vi app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

7 boot.ts 파일 작성[ | ]

root@zetawiki:/angular2-quickstart/app# vi boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

8 index.html 파일 작성[ | ]

root@zetawiki:/angular2-quickstart/app# cd ..
root@zetawiki:/angular2-quickstart# vi index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

9 npm 시작[ | ]

root@zetawiki:/angular2-quickstart# npm start
 
> angular2-quickstart@1.0.0 start /angular2-quickstart
> concurrent "npm run tsc:w" "npm run lite" 
 
[0] 
[0] > angular2-quickstart@1.0.0 tsc:w /angular2-quickstart
[0] > tsc -w
[0] 
[1] 
[1] > angular2-quickstart@1.0.0 lite /angular2-quickstart
[1] > lite-server
[1] 
[1] [BS] Access URLs:
[1]  ----------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://135.79.246.80:3000
[1]  ----------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://135.79.246.80:3001
[1]  ----------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 15.12.20 18:46:51 200 GET /./index.html (Unknown - 1308ms)
[0] 18:46:56 - Compilation complete. Watching for file changes.

→ 포어그라운드 실행이므로 쉘 프롬프트가 나오지 않는다.

→ 종료하려면 Ctrl+C를 누르면 되는데, 일단 그냥 두자.

10 확인[ | ]

추가로 SSH 접속하여 포트를 살펴보자.

root@zetawiki:~# netstat -anpt | grep node
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      5472/node       
tcp        0      0 0.0.0.0:3001            0.0.0.0:*               LISTEN      5472/node

→ node 프로세스가 3000, 3001 포트를 LISTEN 중

root@zetawiki:~# ll /angular2-quickstart
total 28
drwxr-xr-x  4 root root 4096 Dec 20 18:45 ./
drwxr-xr-x 25 root root 4096 Dec 20 18:30 ../
drwxr-xr-x  2 root root 4096 Dec 20 18:46 app/
-rw-r--r--  1 root root  798 Dec 20 18:45 index.html
drwxr-xr-x 13 root root 4096 Dec 20 18:32 node_modules/
-rw-r--r--  1 root root  567 Dec 20 18:30 package.json
-rw-r--r--  1 root root  298 Dec 20 18:33 tsconfig.json

root@zetawiki:~# ll /angular2-quickstart/app
total 32
drwxr-xr-x 2 root root 4096 Dec 20 18:46 ./
drwxr-xr-x 4 root root 4096 Dec 20 18:45 ../
-rw-r--r-- 1 root root 1607 Dec 20 18:59 app.component.js
-rw-r--r-- 1 root root  355 Dec 20 18:59 app.component.js.map
-rw-r--r-- 1 root root  162 Dec 20 18:38 app.component.ts
-rw-r--r-- 1 root root  505 Dec 20 18:59 boot.js
-rw-r--r-- 1 root root  135 Dec 20 18:59 boot.js.map
-rw-r--r-- 1 root root  127 Dec 20 18:42 boot.ts

11 웹브라우저 접속[ | ]

다른 컴퓨터에서 웹브라우저로 접속해보자.
http://서버주소:3000/ 로 접속하면...

My First Angular 2 App

http://서버주소:3001/ 로 접속하면... Browsersync라는 관리콘솔이 나온다.

12 같이 보기[ | ]

13 참고[ | ]

https://angular.io/docs/ts/latest/quickstart.html