วันเสาร์ที่ 28 ธันวาคม พ.ศ. 2562

Angular 8 - Tutorial Your First App กับการสร้าง Component

ตัวอย่าง App แรกของ Tutorial อ่านได้จาก https://angular.io/start
เราจะเริ่มสร้าง Component โดยใช้ Tutorial Your First App เป็น Guide

โดยขั้นแรกเราจะทำ Title แล้วก็ปุ่ม Cart พร้อมกับ Product 1 บรรทัดตามรูป

เริ่มโดยใช้คำสั่ง ng generate component [component-name]
?
cmd
1
2
ng generate component top-bar
ng generate component product-list

เราจะได้ Folder ที่เก็บ Component 2 ตัวตามชื่อที่เรากำหนดไป และตัวคำสั่ง ng ก็ได้ทำการเพิ่มข้อมูล Component ให้เราแล้วใน "app.module.ts"
?
/src/app/app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
 
 
@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
 
export class AppModule { }

เสร็จแล้วไปดู Selector ในไฟล์ Type Script ทั้ง top-bar และ product-list
เราจะได้ชื่อ Selector ใช้เป็น Tag ชื่อ app-top-bar และ app-product-list
?
/src/app/top-bar/top-bar.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})
 
export class TopBarComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}
?
/src/app/product-list/product-list.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

ก็ทำการเพิ่ม HTML ใน top-bar.component.html และ product-list.component.html เสร็จแล้วไปใส่ใน app.component.html เพื่อแสดง
ใช้คำสั่ง ng serve --watch ในการสั่ง Sever ทำงาน
?
src/app/tom-bar/top-bar.component.html
1
<h1>Top Bar</h1>
?
src/app/product-list/product-list.component.html
1
<h1>Product List</h1>
?
src/app/app.component.html
1
2
3
4
<app-top-bar></app-top-bar>
<app-product-list></app-product-list>
 
<router-outlet></router-outlet>

ถ้าหน้าออกมาเป็นแบบนี้ก็แสดงว่าใช้งานได้


Style และ Template

ให้เราทำการเพิ่ม Style ไป 2 ที่โดย Copy จากตรงนี้ไปเลย โดยไฟล์ "index.html" เพิ่มส่วนทีเป็น icon และไฟล์ "style.css" จะเป็นกรอบสีน้ำเงิน
?
src/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
</head>
<body>
  <app-root></app-root>
</body>
</html>
?
src/style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/* Global Styles */
 
* {
  font-family: 'Roboto', Arial, sans-serif;
  color: #616161;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
body {
  margin: 0;
}
 
.container {
  display: flex;
  flex-direction: row;
}
 
router-outlet + *  {
  padding: 0 16px;
}
 
/* Text */
 
h1 {
  font-size: 32px;
}
 
h2 {
  font-size: 20px;
}
 
h1, h2 {
  font-weight: lighter;
}
 
p {
  font-size: 14px;
}
 
/* Hyperlink */
 
a {
  cursor: pointer;
  color: #1976d2;
  text-decoration: none;
}
 
a:hover {
  opacity: 0.8;
}
 
/* Input */
 
input {
  font-size: 14px;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #BDBDBD;
}
 
label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
  text-transform: uppercase;
}
 
/* Button */
.button, button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  background-color: #1976d2;
  color: white;
  border: none;
}
 
.button:hover, button:hover {
  opacity: 0.8;
  font-weight: normal;
}
 
.button:disabled, button:disabled {
  opacity: 0.5;
  cursor: auto;
}
 
/* Fancy Button */
 
.fancy-button {
  background-color: white;
  color: #1976d2;
}
 
.fancy-button i.material-icons {
  color: #1976d2;
  padding-right: 4px;
}
 
/* Top Bar */
 
app-top-bar {
  width: 100%;
  height: 68px;
  background-color: #1976d2;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
 
app-top-bar h1 {
  color: white;
  margin: 0;
}
 
/* Checkout Cart, Shipping Prices */
 
.cart-item, .shipping-item {
  width: 100%;
  min-width: 400px;
  max-width: 450px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 32px;
  margin-bottom: 8px;
  border-radius: 2px;
  background-color: #EEEEEE;
}
 
 
/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

ส่วนของ Template ให้เราทำการเพิ่ม Code ส่วนของ top-bar.component.html, product-list.component.html และ app.component.html
?
src/app/top-bar/top-bar.component.html
1
2
3
4
5
6
7
<a href="#">
    <h1>My Store</h1>
</a>
 
<a href="#" class="button fancy-button">
    <i class="material-icons">shopping_cart</i>Checkout
</a>
?
src/app/product-list/product-list.component.html
1
<h1>Product List</h1>
?
src/app/app.component.html
1
2
3
4
<app-top-bar></app-top-bar>
<app-product-list></app-product-list>
 
<router-outlet></router-outlet>

เมื่อทำการ Save ไฟล์ทั้งหมดแล้วกลับไปดูหน้า App ของเราจะได้แบบที่ต้องการแล้ว

สรุปสำหรับเราเองในพาทนี้

เราสามารถเพิ่ม Style ในไฟล์ "index.html" และ "style.css" ได้เพื่อให้ทำงานเป็น Global Style ให้ Component ได้รับผลทั้งหมด
on
ป้ายกำกับ: , ,
ตำแหน่ง: Thailand

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)