Angular2 준비 #05 마무리

마무리

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

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

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 < meta name = "viewport" content = "width=device-width, initial-scale=1" > < script src = "node_modules/es6-shim/es6-shim.min.js" > < script src = "node_modules/systemjs/dist/system-polyfills.js" > < script src = "node_modules/angular2/es6/dev/src/testing/shims_for_IE.js" > < script src = "node_modules/angular2/bundles/angular2-polyfills.js" > < script src = "node_modules/systemjs/dist/system.src.js" > < script src = "node_modules/rxjs/bundles/Rx.js" > < script src = "node_modules/angular2/bundles/angular2.dev.js" > < 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)); < body > < my-component > Loading...

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

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

마치며

간략한 설명들 … https://angular.io/docs/ts/latest/

from http://forteleaf.tistory.com/102 by ccl(A) rewrite - 2020-03-07 14:55:41