ติดตั้ง Node.js ไปโหลดตามนี่เลย https://nodejs.org/en/
หลังจากติดตั้ง Node.js เรียบร้อยแล้วให้ทำการติดตั้ง Angular
# 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
# 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
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
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 คือส่วนปรับแต่งการแสดงผล
// ตอนนี้ว่าง"app.component.html" เก็บ Template คือส่วนโครงที่จะแสดง
<!-- ข้อมูลหน้า Welcome ที่เราเห็นตอนแรก ให้ลบทั้งหมดแล้วเหลือแต่ <router-outlet></router-outlet> --> <router-outlet></router-outlet>"app.component.ts" เก็บ Script ของ Component ประกาศ Template และ Style สำหรับ Component และใช้ Selector ชื่อ "app-root" จะเรียกใช้ที่ไฟล์ index.html ใน Root Project
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-app';
}
ส่วนนี้ดูไว้เฉย ๆ ว่ามันมาเรียกใช้ตรงนี้ เรายังไม่จำเป็นต้องมาแก้อะไรในส่วนนี้ ตอนนี้
<!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
ไม่มีความคิดเห็น:
แสดงความคิดเห็น