release version
0. generate app
- install Angular CLI
npm install -g @angular/cli
- create project
ng new todo
- routing
Enter(key)
- css
Enter(key)
1. Static effect
1）Editing the HTML file
\src\app\app.component.html
Insert the following code:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h3>Adam's To Do List</h3>
<table border="1">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
2) run
ng serve --port 4200 --open
2. Dynamic synthesis
1） data model
Create a new file: model.ts
export class Model {
user; // any type
items; // any type
constructor() {
this.user = "adam";
this.items=[
new TodoItem("Buy Flowers", false),
new TodoItem("Get Shoes", false),
new TodoItem("Collect Tickets", true),
new TodoItem("Call Joe", false)
];
}
}
export class TodoItem {
action;
done;
constructor(action, done) {
this.action = action;
this.done = done;
}
}
Use json data to express:
var model = {
user:"adam",
items:[
{action: "Buy Flowers", done: false},
{action: "Get Shoes", done: false},
{action: "Collect Tickets", done: true},
{action: "Call Joe", done: false}
]
}
2) call them
user
getUser() {
return this.model.user;
}
items
getItems() {
return this.model.items;
}
app.component.ts
import { Component } from '@angular/core';
import { Model } from './model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
model = new Model();
getUser() {
return this.model.user;
}
getItems() {
return this.model.items;
}
}
3）Editing the HTML file
*ngFor="let item of getItems(); index as i">
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h3>{{getUser()}}'s To Do List</h3>
<table border="1">
<thead>
<tr>
<th>sn</th>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of getItems(); index as i">
<td>{{ i + 1 }}</td>
<td>{{item.action}}</td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td>
</tr>
</tbody>
</table>