From 8d11df557c8f4cbc536b2efa3e1e050350904d96 Mon Sep 17 00:00:00 2001 From: "YLHEALTH\\jackson.li" Date: Wed, 2 Jan 2019 17:28:57 +0800 Subject: [PATCH] Initial commit --- src/app/app-path.const.ts | 9 ++++++ src/app/app-routing.module.ts | 16 ++++++++++- src/app/app.component.html | 22 ++++----------- src/app/app.component.ts | 3 +- src/app/home/home-routing.module.ts | 16 +++++++++++ src/app/home/home.component.css | 0 src/app/home/home.component.html | 43 ++++++++++++++++++++++++++++ src/app/home/home.component.ts | 15 ++++++++++ src/app/home/home.module.ts | 14 +++++++++ src/app/p2/message.ts | 15 ++++++++++ src/app/p2/p2-routing.module.ts | 16 +++++++++++ src/app/p2/p2.component.css | 3 ++ src/app/p2/p2.component.html | 37 ++++++++++++++++++++++++ src/app/p2/p2.component.ts | 44 +++++++++++++++++++++++++++++ src/app/p2/p2.module.ts | 16 +++++++++++ src/app/p3/p3-routing.module.ts | 16 +++++++++++ src/app/p3/p3.component.css | 0 src/app/p3/p3.component.html | 5 ++++ src/app/p3/p3.component.ts | 15 ++++++++++ src/app/p3/p3.module.ts | 14 +++++++++ 20 files changed, 300 insertions(+), 19 deletions(-) create mode 100644 src/app/app-path.const.ts create mode 100644 src/app/home/home-routing.module.ts create mode 100644 src/app/home/home.component.css create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.ts create mode 100644 src/app/home/home.module.ts create mode 100644 src/app/p2/message.ts create mode 100644 src/app/p2/p2-routing.module.ts create mode 100644 src/app/p2/p2.component.css create mode 100644 src/app/p2/p2.component.html create mode 100644 src/app/p2/p2.component.ts create mode 100644 src/app/p2/p2.module.ts create mode 100644 src/app/p3/p3-routing.module.ts create mode 100644 src/app/p3/p3.component.css create mode 100644 src/app/p3/p3.component.html create mode 100644 src/app/p3/p3.component.ts create mode 100644 src/app/p3/p3.module.ts diff --git a/src/app/app-path.const.ts b/src/app/app-path.const.ts new file mode 100644 index 0000000..8447907 --- /dev/null +++ b/src/app/app-path.const.ts @@ -0,0 +1,9 @@ +export const appPath = { + + home:'', + + p2: 'p2', + + p3: 'p3' + +}; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d425c6f..93e8408 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,21 @@ 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)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..d2f19ee 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1,9 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

+

Angular 練習

+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ea3280e..57109ac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ 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; } diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts new file mode 100644 index 0000000..d1cd62d --- /dev/null +++ b/src/app/home/home-routing.module.ts @@ -0,0 +1,16 @@ +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 { } diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..5745794 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,43 @@ +

題一

+cnt:
+城市資訊;
+ + + + + + + + + + + + +
idnamecoordcountrypopulation
lonlat
+天氣資訊;
+ + + + + + + + + + + + + + + + + + + + + + + + +
時間溫度壓力濕度天氣風速風向雲量rain
當天最低溫最高溫晚上下午早上IDmaindescriptionicon
+
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..33fd770 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,15 @@ +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() { + } + +} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts new file mode 100644 index 0000000..492bd5c --- /dev/null +++ b/src/app/home/home.module.ts @@ -0,0 +1,14 @@ +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 { } diff --git a/src/app/p2/message.ts b/src/app/p2/message.ts new file mode 100644 index 0000000..4f57ac1 --- /dev/null +++ b/src/app/p2/message.ts @@ -0,0 +1,15 @@ +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; + + } + + } diff --git a/src/app/p2/p2-routing.module.ts b/src/app/p2/p2-routing.module.ts new file mode 100644 index 0000000..9dfa18c --- /dev/null +++ b/src/app/p2/p2-routing.module.ts @@ -0,0 +1,16 @@ +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 { } diff --git a/src/app/p2/p2.component.css b/src/app/p2/p2.component.css new file mode 100644 index 0000000..a4299be --- /dev/null +++ b/src/app/p2/p2.component.css @@ -0,0 +1,3 @@ +.btn-space { + margin-right: 5px; +} diff --git a/src/app/p2/p2.component.html b/src/app/p2/p2.component.html new file mode 100644 index 0000000..546c074 --- /dev/null +++ b/src/app/p2/p2.component.html @@ -0,0 +1,37 @@ +

題二

+
+

+ 單品：
+ 單價：
+ 數量：
+ 你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元 +

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + +
動作商品名稱商品價格購買數量小計
{{ message.name }}{{ message.price }}{{ message.quantity }}{{ message.price * message.quantity}}
加總{{total}}
+
+ diff --git a/src/app/p2/p2.component.ts b/src/app/p2/p2.component.ts new file mode 100644 index 0000000..aa263ad --- /dev/null +++ b/src/app/p2/p2.component.ts @@ -0,0 +1,44 @@ +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() { + } + +} diff --git a/src/app/p2/p2.module.ts b/src/app/p2/p2.module.ts new file mode 100644 index 0000000..21a5789 --- /dev/null +++ b/src/app/p2/p2.module.ts @@ -0,0 +1,16 @@ +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 { } diff --git a/src/app/p3/p3-routing.module.ts b/src/app/p3/p3-routing.module.ts new file mode 100644 index 0000000..416970b --- /dev/null +++ b/src/app/p3/p3-routing.module.ts @@ -0,0 +1,16 @@ +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 { } diff --git a/src/app/p3/p3.component.css b/src/app/p3/p3.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/p3/p3.component.html b/src/app/p3/p3.component.html new file mode 100644 index 0000000..d737df6 --- /dev/null +++ b/src/app/p3/p3.component.html @@ -0,0 +1,5 @@ +

題三

+ + 寬度 :
+ 高度 :
+ diff --git a/src/app/p3/p3.component.ts b/src/app/p3/p3.component.ts new file mode 100644 index 0000000..a6d7c3f --- /dev/null +++ b/src/app/p3/p3.component.ts @@ -0,0 +1,15 @@ +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() { + } + +} diff --git a/src/app/p3/p3.module.ts b/src/app/p3/p3.module.ts new file mode 100644 index 0000000..e88418e --- /dev/null +++ b/src/app/p3/p3.module.ts @@ -0,0 +1,14 @@ +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 { } -- 2.26.2