diff --git a/src/app/app.component.html b/src/app/app.component.html
index beecf5f..c1d6fcf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,14 +1,4 @@
-
-
- 單價 |
- 數量 |
-
-
- {{ item.UnitPrice }} |
- {{ item.PurchaseCount }} |
-
-
- 總金額 |
- {{ total }} |
-
-
+
+
+AppComponent
+{{ messageService.message }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 010340b..a73d73c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,23 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { OrderDetail } from './order-detail';
-import { OrderService } from './order.service';
+import { MessageService } from './message.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
+ styleUrls: [ './app.component.css' ]
})
-export class AppComponent implements OnInit {
- total = 0;
-
- constructor(public orderService: OrderService) {}
-
- ngOnInit(): void {
- this.orderService.details = [
- new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }),
- new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }),
- ];
- this.total = this.orderService.computeTotal();
- }
+export class AppComponent {
+ constructor(public messageService: MessageService) {}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index dfd34c1..00866cb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,25 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
-import { OrderService } from './order.service';
-import { OrderAnniversaryService } from './order-anniversary.service';
+import { CustomComponent } from './custom/custom.component';
@NgModule({
- imports: [BrowserModule, FormsModule],
- declarations: [AppComponent],
- providers: [
- {
- provide: OrderService,
- useFactory: () => {
- const today = new Date(2020, 9, 3);
- if (today.getMonth() === 9) {
- return new OrderAnniversaryService();
- } else {
- return new OrderService();
- }
- },
- },
- ],
- bootstrap: [AppComponent],
+ imports: [ BrowserModule, FormsModule ],
+ declarations: [ AppComponent, CustomComponent ],
+ bootstrap: [ AppComponent ]
})
-export class AppModule {}
+export class AppModule { }
diff --git a/src/app/custom/custom.component.css b/src/app/custom/custom.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/custom/custom.component.html b/src/app/custom/custom.component.html
new file mode 100644
index 0000000..7067616
--- /dev/null
+++ b/src/app/custom/custom.component.html
@@ -0,0 +1,2 @@
+CustomComponent
+{{ messageService.message }}
diff --git a/src/app/custom/custom.component.ts b/src/app/custom/custom.component.ts
new file mode 100644
index 0000000..8585f33
--- /dev/null
+++ b/src/app/custom/custom.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+import { MessageService } from '../message.service';
+
+@Component({
+ selector: 'app-custom',
+ templateUrl: './custom.component.html',
+ styleUrls: ['./custom.component.css'],
+ providers: [
+ {
+ provide: MessageService,
+ useValue: { message: '這是已經被替換掉的訊息' },
+ },
+ ],
+})
+export class CustomComponent implements OnInit {
+ constructor(public messageService: MessageService) {}
+
+ ngOnInit() {}
+}
diff --git a/src/app/message.service.ts b/src/app/message.service.ts
new file mode 100644
index 0000000..306aa96
--- /dev/null
+++ b/src/app/message.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MessageService {
+ message = '這是 MessageService 內的訊息'
+
+ constructor() { }
+
+}
diff --git a/src/app/order-anniversary.service.ts b/src/app/order-anniversary.service.ts
deleted file mode 100644
index d6ed08b..0000000
--- a/src/app/order-anniversary.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { OrderDetail } from './order-detail';
-
-@Injectable({
- providedIn: 'root',
-})
-export class OrderAnniversaryService {
- details: OrderDetail[] = [];
-
- constructor() {}
-
- computeTotal(): number {
- return this.details
- .map((d) => d.PurchaseCount * d.UnitPrice * 0.8)
- .reduce((act, curr) => act + curr, 0);
- }
-}
diff --git a/src/app/order-detail.ts b/src/app/order-detail.ts
deleted file mode 100644
index 885abab..0000000
--- a/src/app/order-detail.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export class OrderDetail {
- constructor(initData?: Partial) {
- Object.assign(this, initData);
- }
-
- PurchaseCount!: number;
-
- UnitPrice!: number;
-}
diff --git a/src/app/order-discount.service.ts b/src/app/order-discount.service.ts
deleted file mode 100644
index 221e81f..0000000
--- a/src/app/order-discount.service.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { OrderDetail } from './order-detail';
-
-@Injectable()
-export class OrderDiscountService {
- details: OrderDetail[] = [];
-
- constructor() { }
-
- computeTotal(): number {
- const total = this.details
- .map((d) => d.PurchaseCount * d.UnitPrice)
- .reduce((act, curr) => act + curr, 0);
- return total * 0.9;
- }
-}
diff --git a/src/app/order.service.ts b/src/app/order.service.ts
deleted file mode 100644
index 6ad3401..0000000
--- a/src/app/order.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { OrderDetail } from './order-detail';
-
-@Injectable({
- providedIn: 'root',
-})
-export class OrderService {
- details: OrderDetail[] = [];
-
- constructor() {}
-
- computeTotal(): number {
- return this.details
- .map((d) => d.PurchaseCount * d.UnitPrice)
- .reduce((act, curr) => act + curr, 0);
- }
-}