วันพฤหัสบดีที่ 26 ธันวาคม พ.ศ. 2562

Angular 8 - ติดตั้ง Node.js และ Angular กับพื้นฐานโครงสร้าง

การใช้ Angular 8 ต้องติดตั้ง Node.js Version 10 อ้างอิงตาม https://angular.io/guide/setup-local
ติดตั้ง Node.js ไปโหลดตามนี่เลย https://nodejs.org/en/

หลังจากติดตั้ง Node.js เรียบร้อยแล้วให้ทำการติดตั้ง Angular
?
cmd
1
2
3
4
5
6
# npm install -g
 
# In global mode (ie, with -g or --global appended to the command),
# it installs the current package context (ie, the current working directory) as a global package.
 
npm install -g @angular/cli

เมื่อทำการติดตั้งเรียบร้อยแล้วเราจะสามารถใช้คำสั่ง ng ในการสร้าง Project Angular ได้
คำสั่ง ng new สำหรับสร้าง Project และ ng serv เพื่อใช้รัน Angular
?
cmd
1
2
3
4
5
6
# new (n) Creates a new workspace and an initial Angular app.
ng new my-app
 
# serve (s) Builds and serves your app, rebuilding on file changes.
cd my-app
ng serve --open

เมื่อ Run Server เสร็จแล้วเปิด Browser ไปที่ http://localhost:4200 จะเจอหน้า Welcome แนะนำการเขียนเบื้องต้น

โครงสร้าง Project

src
|---app : เก็บ Components และ App Module
|---assets
|---environments

เมื่อดูใน Folder app จะมีไฟล์อยู่แล้ว 6 ไฟล์ เป็น app.module.ts ใช้จัดการ App และ app-routing.module.ts ใช้จัดการ Routing
และไฟล์ app.component.* แต่ละไฟล์เบื้องต้นจะมี .css, .html, .ts และ .spec.ts

"app.module.ts" จัดการ App เป็นตัวหลักในการรวม Component เมื่อมีการสร้าง Component ใหม่ก็จะต้องมาประกาศในนี้ด้วย เช่น app.component
?
src/app/app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
 
export class AppModule { }

"app-routing.module.ts" จัดการ Route
?
src/app/app-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
 
const routes: Routes = [];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
 
export class AppRoutingModule { }

app.component.css : เป็น Style
app.component.html : เป็น Template
app.component.ts : เป็นไฟล์ Type Script
app.component.spec.ts

"app.component.css" เก็บ Style คือส่วนปรับแต่งการแสดงผล
?
src/app/app.component.css
1
// ตอนนี้ว่าง
"app.component.html" เก็บ Template คือส่วนโครงที่จะแสดง
?
src/app/app.component.html
1
2
3
<!-- ข้อมูลหน้า Welcome ที่เราเห็นตอนแรก ให้ลบทั้งหมดแล้วเหลือแต่ <router-outlet></router-outlet> -->
 
<router-outlet></router-outlet>
"app.component.ts" เก็บ Script ของ Component
ประกาศ Template และ Style สำหรับ Component และใช้ Selector ชื่อ "app-root" จะเรียกใช้ที่ไฟล์ index.html ใน Root Project
?
src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  title = 'my-app';
}

ส่วนนี้ดูไว้เฉย ๆ ว่ามันมาเรียกใช้ตรงนี้ เรายังไม่จำเป็นต้องมาแก้อะไรในส่วนนี้ ตอนนี้
?
src/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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">
</head>
<body>
  <app-root></app-root>
</body>
</html>

พยายามทำความเข้าใจสำหรับ My App ของเราในตอนนี้

เมื่อสร้าง Project เราจะได้โครงสร้างมาแล้ว เราต้องเข้าใจก่อนว่าใน Folder src/app/ นั้นใช้เก็บ Component และ Module อยู่
2 Module แรกคือ App Module (เป็นตัวหลักทำการโหลด Module และ Component) และ Route Module (เป็นตัวจัดการ Routing)
และอีก 1 Component มี 4 ไฟล์ ได้แก่ app.component.html, app.component.css, app.component.ts และ app.component.spec.ts
โดยตัว app.component.ts จะทำการโหลด app.component.html (Template) และ app.component.css (Style) มาแล้วทำการประการ Selector ชื่อ "app-root"
เมื่อเราทำการสร้าง Component ได ๆ แล้วเราก็จะต้องมาแก้ไขไฟล์พวกนี้ด้วย เช่น เพิ่ม Component ใน app.module.ts และเพิ่ม Tag Selector ใน app.component.html
on
ป้ายกำกับ: , ,
ตำแหน่ง: Thailand

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

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

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