diff --git a/src/app/app-path.const.ts b/src/app/app-path.const.ts new file mode 100644 index 0000000000000000000000000000000000000000..8447907447626ef4a906c5e25ab53e224be24c0b --- /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 d425c6f56b578db1e8d7f8fa2d6c90693ba5d4fb..93e840832e03ea4d1132c382134b43db35f9dcfa 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 0f3d9d8b9f8e1a938befbfea5ac8bc11494ea709..d2f19ee389be2c520309193534d59ebda4069d5e 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 ea3280e5295fe77d6b94fcf47c4ebe0214569c11..57109ac9c45df7b6b05c29e701b5279f44bff0c0 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 0000000000000000000000000000000000000000..d1cd62d6c82470755113b0f7f5426627a9fe5ac8 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000000000000000000000000000000000000..57457944de6c44c7350e59fbb20937182e4eaa2b --- /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 0000000000000000000000000000000000000000..33fd77077e85c8529f9abf3454b8decb6ca81917 --- /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 0000000000000000000000000000000000000000..492bd5c9ad987ebabdbae6278752551d86a926aa --- /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 0000000000000000000000000000000000000000..4f57ac1d67344707357985adb199d738bdc12e17 --- /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 0000000000000000000000000000000000000000..9dfa18c59494b3503bf3001fd7ff7eebe2849dc5 --- /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 0000000000000000000000000000000000000000..a4299bec1790b10319c87c807f556d3b7fc5e821 --- /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 0000000000000000000000000000000000000000..546c0740ed08389d5c1373a40898bfde965913f9 --- /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 0000000000000000000000000000000000000000..aa263ad89a8fb9a615df2ff8d074b6fc77f43226 --- /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 0000000000000000000000000000000000000000..21a5789901a6d871769f2ac9fce5bf4268cdbbd5 --- /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 0000000000000000000000000000000000000000..416970b59fb7106a8a5a4e68507b6eba8d06d9b9 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/p3/p3.component.html b/src/app/p3/p3.component.html new file mode 100644 index 0000000000000000000000000000000000000000..d737df63fef245de127b9743cdee05d791c406eb --- /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 0000000000000000000000000000000000000000..a6d7c3fe03bba17dc1e49cb01e114d218ed94ad4 --- /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 0000000000000000000000000000000000000000..e88418ebc56779aaff530f14f673c85236abb2d2 --- /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 { }