마무리
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>우리는 목록을 제거하고, 추가 할 수 있는 버튼을 부트스트랩 테마와 함께 적용 했습니다.
마치며
- 간략한 설명들 … https://angular.io/docs/ts/latest/
'개발 > Angular' 카테고리의 다른 글
| Angular 라우팅 적용하기 (0) | 2017.11.16 |
|---|---|
| 웹스톰 중에 쌍따옴표를 따옴표로 (0) | 2017.11.15 |
| Angular2 준비 #04 의존성 주입 (0) | 2017.08.23 |
| Angular2 준비 #03 메타데이터, 바인딩, 서비스 (0) | 2017.08.20 |
| Angular2 준비 #02 컴포넌트, 디렉티브, 템플릿 (0) | 2017.08.17 |