Initial commit

src/app/app-path.const.ts

+export const appPath = {
+
+  home:'',
+
+  p2: 'p2',
+
+  p3: 'p3'
+
+};

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { appPath } from 'src/app/app-path.const';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: appPath.home,
+    loadChildren: './home/home.module#HomeModule'
+  },
+  {
+    path: appPath.p2,
+    loadChildren: './p2/p2.module#P2Module'
+  },
+  {
+    path: appPath.p3,
+    loadChildren: './p3/p3.module#P3Module'
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
+<h3>Angular 練習</h3>
+
 <ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
+  <li><a [routerLink]="path.home">練習一</a></li>
+  <li><a [routerLink]="path.p2">練習二</a></li>
+  <li><a [routerLink]="path.p3">練習三</a></li>
 </ul>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { appPath } from './app-path.const';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +7,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'PPP';
+  path = appPath;
 }

src/app/home/home-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }

src/app/home/home.component.html

+<p style="color:green">題一</p>
+cnt:<input type="number" min="1" max="7"><br>
+城市資訊;<br>
+<table border="1">
+    <tr>
+        <th rowspan="2">id</th>
+        <th rowspan="2">name</th>
+        <th colspan="2">coord</th>
+        <th rowspan="2">country</th>
+        <th rowspan="2">population</th>
+      </tr>
+      <tr>
+        <th>lon</th>
+        <th>lat</th>
+      </tr>
+</table>
+天氣資訊;<br>
+<table border="1">
+		<tr>
+			<th rowspan="2">時間</th>
+			<th colspan="6">溫度</th>
+			<th rowspan="2">壓力</th>
+			<th rowspan="2">濕度</th>
+			<th colspan="4">天氣</th>
+			<th rowspan="2">風速</th>
+			<th rowspan="2">風向</th>
+			<th rowspan="2">雲量</th>
+			<th rowspan="2">rain</th>
+		</tr>
+		<tr>
+			<th>當天</th>
+			<th>最低溫</th>
+			<th>最高溫</th>
+			<th>晚上</th>
+			<th>下午</th>
+			<th>早上</th>
+			<th>ID</th>
+			<th>main</th>
+			<th>description</th>
+      <th>icon</th>
+  </tr>
+</table>
+<br>

src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomeRoutingModule } from './home-routing.module';
+import { HomeComponent } from './home.component';
+
+@NgModule({
+  declarations: [HomeComponent],
+  imports: [
+    CommonModule,
+    HomeRoutingModule
+  ]
+})
+export class HomeModule { }

src/app/p2/message.ts

+export class Message {
+
+    name: string;
+    price: string;
+    quantity: string;
+
+    constructor(name: string, price: string, quantity: string) {
+
+        this.name = name;
+        this.price = price;
+        this.quantity = quantity;
+
+      }
+
+  }

src/app/p2/p2-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { P2Component } from 'src/app/p2/p2.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: P2Component
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class P2RoutingModule { }

src/app/p2/p2.component.css

+.btn-space {
+  margin-right: 5px;
+}

src/app/p2/p2.component.html

+<p style="color:green">題二</p>
+<form (ngSubmit)="addMessage()">
+<p>
+  單品：<input type="text" name="name" [(ngModel)]="name"><br>
+  單價：<input type="number" name="price" min="1" [(ngModel)]="price"><br>
+  數量：<input type="number" name="quantity" min="1" [(ngModel)]="quantity"><br>
+  你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
+</p>
+  <button type="submit" class="btn btn-space">新增項目</button>
+  <button type="reset">清空所有項目</button>
+</form>
+
+<table border="1" >
+  <tr>
+    <th>動作</th>
+    <th>商品名稱</th>
+    <th>商品價格</th>
+    <th>購買數量</th>
+    <th>小計</th>
+  </tr>
+  <!-- 清單 -->
+  <ng-container *ngFor="let message of messages; let i = index">
+  <tr>
+    <td><button (click)="deleteItem(item)">刪除</button></td>
+    <td>{{ message.name }}</td>
+    <td>{{ message.price }}</td>
+    <td>{{ message.quantity }}</td>
+    <td>{{ message.price * message.quantity}}</td>
+  </tr>
+</ng-container>
+  <tr>
+    <td colspan="4" align="right">加總</td>
+    <td>{{total}}</td>
+  </tr>
+</table>
+<br>
+<router-outlet></router-outlet>

src/app/p2/p2.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Message } from './message';
+
+@Component({
+  selector: 'app-p2',
+  templateUrl: './p2.component.html',
+  styleUrls: ['./p2.component.css']
+})
+export class P2Component implements OnInit {
+
+    name = '';
+
+    price = '';
+
+    quantity = '';
+
+    messages: Message[] = [];
+
+    result = 0;
+
+    addMessage(): void {
+
+   // 防呆，避免名稱或內容是空值時也可以留言
+    if (
+      !this.name.trim() && !this.price.trim() && !this.quantity.trim()
+    ) {
+      return;
+    }
+    // 用名稱跟內容產生一個留言的資料物件
+    const message = new Message(this.name, this.price, this.quantity);
+    // 將留言的資料物件放進容器裡
+    this.messages.push(message);
+
+  }
+    deleteItem(): void {
+      alert('清空啦');
+    }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/p2/p2.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { P2RoutingModule } from './p2-routing.module';
+import { P2Component } from './p2.component';
+
+@NgModule({
+  declarations: [P2Component],
+  imports: [
+    CommonModule,
+    P2RoutingModule,
+    FormsModule
+  ]
+})
+export class P2Module { }

src/app/p3/p3-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { P3Component } from 'src/app/p3/p3.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: P3Component
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class P3RoutingModule { }

src/app/p3/p3.component.html

+<p style="color:green">題三</p>
+
+  寬度 : <input type="number" min="1"><br>
+  高度 : <input type="number" min="1"><br>
+<router-outlet></router-outlet>

src/app/p3/p3.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-p3',
+  templateUrl: './p3.component.html',
+  styleUrls: ['./p3.component.css']
+})
+export class P3Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/p3/p3.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { P3RoutingModule } from './p3-routing.module';
+import { P3Component } from './p3.component';
+
+@NgModule({
+  declarations: [P3Component],
+  imports: [
+    CommonModule,
+    P3RoutingModule
+  ]
+})
+export class P3Module { }