Angular.js

[conchincradle]

Angular(FE)- REST API - Spring Boot(BE) - Database Angular is a framework for building modern single-page applications (Traditional full HTML Page Loads, SPA use REST API for data to update partially, MAPs, EMails) REST stands for representational state transfer React.js Angular.js, Vue.js

install node.js, npm, tsc

[conchincradle]

node --version npm --version tsc --version

[conchincradle]

// install angular npm install -g @angular/cli ng version ng help

ng new my-project cd my-project ng serve // (default port 4200, start server) ng serve --open //(open browser) np serve --port 5100 --open // change port

(ng -> next generation of HTML)

[conchincradle]

[conchincradle]

Workspace and project file structure

[conchincradle]

src/index.html

-------------> src/app/app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] } ) export class AppComponent{ title = 'my-first-angular-project'; }

---------------------------->

src/app/app.component.html

{{title}}

[conchincradle]

//update main template page // src/app/app.component.html <h1>Sales Team</h1> // remove all of the placeholder

ng generate component sales-person-list

[conchincradle]

[conchincradle]

new component will be automatically added into the /app/app.module.ts

// and the name will be SalesPersonListComponent

[conchincradle]

then we could add to the main html <app-sales-person-list></app-sales-person-list>

[conchincradle]

ng generate class sales-person-list/SalesPerson

then export class SalesPerson{ constructor( public firstName: string, public lastName: string, public email: string, public salesVolume: number){ } } // In Angular world , public is always used

/sales-person-list.component.ts

export class SalesPersonListComponent implements OnInit{

// create an array of objects salesPersonList: SalesPerson[] = [ new SalesPerson("Mike","Levi","123@abc.com",1000), new SalesPerson("Ashley","George","123@xyz.com",2000) ]

[conchincradle]

HTML

<table border="1">
 <thead>
   <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Sales Volume</th>
   </tr>
 </thead>
 <tbody>
   <tr *ngFor="let tempSalesPerson of salesPersonList">
     <td>{{ tempSalesPerson.firstName}}</td>
     <td>{{ -- }}</td>
     <td>{{ -- }}</td>
     <td>{{ -- }}</td>

   <tr>
 </tbody>
</table>

First Name	Last Name	Email	Sales Volume
{{ tempSalesPerson.firstName}}	{{ -- }}	{{ -- }}	{{ -- }}

[conchincradle]

HTML Tables td stands for table data. ngFor is a structural directive (指令) 循环条件等等