Angular - part 2

August 22, 2019 Angular

前言

來寫個Todo list的小專案當練習吧

創建新專案

創建 todos component

// todos.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todo = "Coding"

  constructor() { }

  ngOnInit() {
  }

}

<!-- todos.component.html -->
<p></p>

<!-- app.component.html -->
<h1></h1>
<app-todos></app-todos>

Will see:

創建 todos class

建立src/app/todo.ts這個檔案

// todo.ts
export class Todo {
  "title": string;
  "description": string;
}

// todos.component.ts
import { Component, OnInit } from '@angular/core';
import {Todo} from '../todo';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todo: Todo = {
    title: "Coding",
    description: "Write some code.",
  }

  constructor() { }

  ngOnInit() {
  }

}

<h2></h2>
<div><span></span></div>

你會看到畫面變成

創建 todos mock

建立src/app/mock-todos.ts這個檔案

// mock-todos.ts
import {Todo} from './todo';

export const TODOS: Todo[] = [
  {
    title: 'Coding',
    description: 'Write some code.',
  },
  {
    title: 'Eating',
    description: 'Eat some food.',
  },
  {
    title: 'Sleeping',
    description: 'Want some sleep.',
  },
]

顯示 Todo list

// todos.component.ts
import { Component, OnInit } from '@angular/core';
import {TODOS} from '../mock-todos';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todos = TODOS;

  constructor() { }

  ngOnInit() {
  }

}

<!-- todos.component.html -->
<h2>Todo List</h2>
<ul class="todos">
  <li *ngFor="let todo of todos">
    <h4></h4>
    <p></p>
  </li>
</ul>

畫面會變化成:

建立 onSelect 功能

// todos.component.ts
import { Component, OnInit } from '@angular/core';
import {TODOS} from '../mock-todos';
import { Todo } from '../todo';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todos = TODOS;
  selectedTodo: Todo;

  constructor() { }

  ngOnInit() {
  }

  onSelect(todo: Todo): void {
    this.selectedTodo = todo;
  }
}

<!-- todos.component.html -->
<h2>Todo List</h2>
<ul class="todos">
  <li *ngFor="let todo of todos" (click)="onSelect(todo)">
    <h4></h4>
    <p></p>
  </li>
</ul>

<div *ngIf="selectedTodo">
  <h2> Detail</h2>
  <div>
    <label>Description:</label>
    <p></p>
  </div>
</div>

任意點選一個todo後，下方會顯示todo的detail:

創建 todo detail component

執行ng generate component todo-detail

// todo-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import {Todo} from '../todo';

@Component({
  selector: 'app-todo-detail',
  templateUrl: './todo-detail.component.html',
  styleUrls: ['./todo-detail.component.css']
})
export class TodoDetailComponent implements OnInit {
  @Input() todo: Todo;

  constructor() { }

  ngOnInit() {
  }
}

<!-- todo-detail.component.html -->
<div *ngIf="todo">
  <h2> Detail</h2>
  <div>
    <label>Description:</label>
    <p></p>
  </div>
</div>

// todos.component.ts
import { Component, OnInit } from '@angular/core';
import {TODOS} from '../mock-todos';
import { Todo } from '../todo';

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todos = TODOS;
  selectedTodo: Todo;

  constructor() { }

  ngOnInit() {
  }

  onSelect(todo: Todo): void {
    this.selectedTodo = todo;
  }
}

<h2>Todo List</h2>
<ul class="todos">
  <li *ngFor="let todo of todos" (click)="onSelect(todo)">
    <h4></h4>
    <p></p>
  </li>
</ul>

<app-todo-detail [todo]="selectedTodo"></app-todo-detail>

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TodosComponent } from './todos/todos.component';
import { TodoDetailComponent } from './todo-detail/todo-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    TodosComponent,
    TodoDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

part2就先到這囉!