angular

release version

0. generate app

• install Angular CLI

npm install -g @angular/cli

• create project

ng new todo

1. routing

 Enter(key)

2. css

Enter(key)

1. Static effect

http://localhost:4200/

1）Editing the HTML file

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

foreach(ngFor)

*ngFor="let item of getItems(); index as i">

switch(ngSwitch)

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

Reference

• 02 - Your First Angular App.pdf

• ng模板

• Angular - A JavaScript library for building user interfaces