마무리

To Do 응용 프로그램을 실제 프로토 타입으로 확장해 보겠습니다. 우리는 처음 세장에서 필요한 모든 것을 만들어 작동하는 응용 프로그램을 만들었습니다. 우리는 서비스 태스크를 수정하여 추가 및 제거 메소드를 작성한 다음 Bootstrap 테마를 적용하여 이쁘게 만들어 고겠습니다.

/app폴더에 있는 tasks.service.ts 파일을 수정하면서 시작하겠습니다.

import {TASKS} from './sample.tasks';
import {Injectable} from 'angular2/core';

@Injectable()
export class TaskService {
  getTasks() {
    return TASKS;
  };
  addTask(task) {
    TASKS.push(task);
  };
  deleteTask (task) {
    for (var i=0; i<TASKS.length; i++) {
      if (TASKS[i].id === task.id) {
        TASKS.splice(i,1);
        break;
      }
    }    
  };
}

두가지 메소드를 추가 했습니다.

addTask는 task를 매개변수로 허용하고, deleteTask 또한 task를 매개변수로 허용하고 있습니다.
addTask메소드는 새로운 task를 배열에 추가하고, deleteTask는 전송 된 작업 개체의 ID 를 기반으로 배열에서 작업을 제거 합니다.

다음으로 수정할 파일은 index.html은 app폴더 바깥에 위치하고 있습니다.
Bootstrap CDN 을 통해서 Bootstrap CSS 를 추가할 것입니다.

index.html 를 수정합니다.

<html>
  <head>
    <title>Angular 2 - My Todo List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <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>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-component>Loading...</my-component>
  </body>
</html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Bootstrap CDN을 추가했습니다.

/app폴더에 위치하고 있는 app.component.ts파일을 수정합니다.

import {Component} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {TaskService} from './task.service';
import {Task} from './tasks';
import {OnInit} from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective],
  providers: [TaskService]

})
export class MyComponent {
    public name: String;
    public today: Date;
    public task: String;
    public taskList: Task[];

constructor(private _taskService: TaskService) {
        this.name = 'Angular 2 Rocks !';
        this.today = new Date();       
        this.task = '';
        this.taskList = this._taskService.getTasks();

    }
    removeTask(item) {
         this._taskService.deleteTask(item);
    }
    addNewTask() {
        this._taskService.addTask ( { id: Math.floor((Math.random() * 10) + 10), name : this.task });
        this.task = '';
    }
}

sayMyName() 메소드를 제거하고 deleteTask, addNewTask 메소드를 추가했습니다. 이 앱은 데모앱이므로 따로 ID 등 확인은 없습니다.
프로덕션 환경에서는 이러한 방법을 보다 효과적으로 작동시키기 위해 더 많은 데이터 검증이 필요한 것입니다.

/app 폴더에 있는app.component.html파일을 수정 합니다.

<h1>{{today | date:"fullDate"}}</h1>
<div>
    <div class="form-group">
        <label for="usr">New Task:</label>
        <input [(ngModel)]="task"  class="form-control"> 
    </div>
    <button (click)="addNewTask()"  class='btn-default' myHighlight>Add Task</button>
</div>
<div>
    <div class="list-group">
        <a href="#" (click)="removeTask(item)" *ngFor="#item of taskList" class="list-group-item">{{item.name}}</a>
    </div>
</div>

우리는 목록을 제거하고, 추가 할 수 있는 버튼을 부트스트랩 테마와 함께 적용 했습니다.

마치며

반응형

Angular2 를 준비하기

Angular 2 와 Angular 1.x 차이

JavaScript를 기반으로하는 스크립트 언어.

Angular 1.x에 대한 지식이 필요하지 않지만 JavaScript, Node.js 및 npm에 대한 지식이 필요합니다.

Angular 2 는 TypeScriptECMA6 를 포함하고 있습니다.

기존에는 Angular 1.x 를 공부하면 됐지만, 이제는 typescript에 대해서 공부를 해야합니다. 또다른 자바스크립트를 공부하는 느낌입니다.
자나깨나 여러가지 언어를 혼합해서 사용하고 있는데, 이제는 점점 더 정리가 안되고 있습니다.

TypeScript는 JavaScript 확장을 돕기 위해 마이크로소프트에서 개발한 무료 오픈 소스 언어입니다. 고급 자동완성, 탐색 및 리팩터링을 제공합니다. 자세한 내용은 https://www.typescriptlang.org/ 에서 확인 할수 있습니다.

ECMA6는 클래스 및 모듈을 사용할 수있게 해주는 JavaScript 의 표준입니다. http://es6-features.org/ 를 참조하면 됩니다.

개발툴

Microsoft 의 Visual Studio Code 을 추천합니다.

기본적으로 마소에서 만들었기 때문에 TypeScript 언어를 잘 지원하고 있습니다. 개인적으로 Atom.io보다 최적화가 잘되어 있다고 생각합니다.
Atom 은 참여하는 사람들이 많아서 다양한 기능들을 찾을 수 있지만, 어수선합니다. 처음에는 Atom 으로 시작을 했지만, 지금은 Visual Code 에 정착해서 사용하고 있습니다.

폴더세팅

응용 프로그램을 시작하고 실행하기 위한 준비가 되었습니다.

package

package.json을 만들어서 npm 세팅을 하면 되지만, 다음과 같이 하면 기본세팅으로 자동설정이 됩니다.

# npm init --yes

그리고 아래 들어있는 내용은 아래와 같은 내용입니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

새로운 파일 tsconfig.json을 만듭니다.

# touch tsconfig.json

안에 내용을 다른과 같이 작성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

이 파일 대부분은 TypeScript 응용 프로그램의 기본 구성입니다. tsconfig.json파일을 처리하는 방법에 대해서 컴파일러에 알져주는 역할을 합니다.
noImplicitAny 변수는 컴파일러에게 변수 선언을 처리하는 방법을 알려줍니다. false로 설정을하면 기본 유형을 any로 설정할 수 있으므로 Angular 2 를 좀 더 쉽게 학습할 수 있습니다.

tsconfig.json에 대한 문서

새로운 파일 typings.json을 만들고 다음 내용을 추가 합니다.

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

새로운 파일 package.json파일을 만들고 아래 내용을 추가합니다.

{
  "name": "ng2-helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

tsc : 타입스크립트 컴파일러
lite : 실시간으로 파일변경을 감지해서 브라우저에 반영. 앵귤러 앱을 시작하기 위한 위한 파일 서버
typings : typings 툴을 시작
postinstall : npm 설치후에 타이핑 설치 method 실행

여기서 npm install 명령을 실행하셔야 문제가 없습니다.

 # npm install

npm manager 는 진리입니다. 그런데, 최근에는 비슷한 소스 이름으로 올려서 개인정보를 훔쳐가는 일이 발생했다고 하는데, npm install명령을 사용할때 소스 이름을 잘 파악해서 사용해야 되겠습니다.

이제 /app라는 하위폴더를 만들고 다음을 실행합니다.

 # mkdir app
 # cd app

컴포넌트(component) 파일 app.component.ts파일을 생성하고, 아래와 같은 내용을 입력합니다.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Hello World !</h1>'
})
export class AppComponent { }

이파일은 컴포넌트의 루트 컴포넌트(root component) 파일입니다.
이 파일 안에는 angular2/core 모듈을 가져오는 import와 메타 데이터 객체를 가져오는 @Component데코레이터가 있습니다.
export class Appcomponent{}은 메인 어플리케이션을 가져오기 위해서 사용하는 빈 클래스 입니다.

이제 Angular가 방금 생성 한 구성 요소 파일을 로드 할 수 있도록 파일을 만들어야 합니다.

main.ts라는 파일을 만들고, 파일이 /app폴더에 있는 것을 확인하고 다음 코드들을 입력합니다.

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

bootstrap(AppComponent)

bootstrap : 사용하기로 결정한 플랫폼을 기반으로해서 컴포넌트 로딩을 처리합니다.

다시 package.json 이 있는 폴더로 돌아옵니다.

index.html파일을 만들고 다음 코드를 입력합니다.

<html>
  <head>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <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>

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

지금까지 아래와 같은 폴더 구성을 갖고 있을겁니다.

Imgur

다음을 실행해서 제대로 되었는지 확인해 봅닌다.
문제가 없다면 다음과 같은 화면이 나오는 것을 확인 할 수 있습니다.

Imgur

반응형

+ Recent posts