วิธีการสร้างเว็บไซต์เต็มหน้าในเชิงมุม

Feb 2, 2026

วิธีการ

หน้า 1 จาก 4:

หน้า 1

หน้า 1
หน้า 2
หน้า 3
หน้า 4

Angular เวอร์ชั่นล่าสุดมักจะคิดว่าเป็นกรอบที่มาจากด้านองค์กรของแทร็กและโดยทั่วไปจะสนุกกับ บริษัท ของสายงานแอปพลิเคชันธุรกิจ ในขณะที่มันเป็นความจริงที่ว่าเชิงมุมมีวิวัฒนาการมาจากกรอบไปยังแพลตฟอร์มที่รองรับแอปพลิเคชันทุกประเภทมีคุณสมบัติที่น่าทึ่งมากมายที่มีอยู่สำหรับนักพัฒนาเพื่อสร้างประสบการณ์ที่ดื่มด่ำสำหรับผู้ใช้

นี่เป็นส่วนแรกในซีรีส์เกี่ยวกับวิธีการสร้างเว็บไซต์เคลื่อนไหวแบบเต็มหน้าในเชิงมุม เราจะเริ่มต้นด้วยการสร้างเว็บไซต์เต็มหน้าแล้วเคลื่อนไหวในงวดต่อไปนี้

ในบทช่วยสอนนี้เราจะมุ่งเน้นไปที่ชิ้นส่วนเชิงมุมและการพูดคุยเกี่ยวกับชิ้นส่วน HTML และ CSS ที่ไม่เกี่ยวข้องกับการก่อสร้างแอปพลิเคชันโดยตรง โปรดดาวน์โหลด รหัสแหล่งที่มา เพื่อติดตาม ไม่ได้ขายในเชิงมุม? ค้นหาที่สมบูรณ์แบบ สร้างเว็บไซต์ ที่นี่ (และราคาที่ดีที่สุดด้านล่าง)

01. สร้างโครงการ

มีชิ้นส่วนที่เคลื่อนไหวจำนวนมากที่เข้าสู่เว็บแอปพลิเคชันที่ไม่ใช่เรื่องไร้สาระ ใบสมัครของคุณมีการพึ่งพาอะไร คุณจะรันมันได้อย่างไร คุณจะทดสอบอย่างไร คุณจะไปมัดสินทรัพย์ของคุณอย่างไร

โชคดีที่กระบวนการที่ซับซ้อนของการผสมผสานขององค์ประกอบเหล่านี้ได้รับการจัดการโดยไม่เห็นใน @ Angular / CLI . ในคำสั่งเพียงไม่กี่จากเทอร์มินัลของเราเราสามารถมีแอปพลิเคชันเชิงมุมที่ทำงานได้อย่างสมบูรณ์พร้อมให้เราทำงานกับ

ขั้นตอนแรกในการทำงานกับ CLI คือการติดตั้ง สำหรับสิ่งนี้ใช้คำสั่งด้านล่าง:

npm install -g @angular/cli

เมื่อติดตั้ง CLI แล้วจากบรรทัดคำสั่งเราสามารถนำทางไปยังโฟลเดอร์ที่เราต้องการติดตั้งโครงการของเราจากที่นั่นเราจะทำงาน ng ใหม่ ด้วยชื่อของโครงการของเรา สิ่งนี้จะสร้างโฟลเดอร์ที่มีชื่อเดียวกันนี้ซึ่งเราจะนำทางไปยังเมื่อโครงการเสร็จสมบูรณ์

 CD & LT; โครงการของคุณ - โฟลเดอร์ & GT;
เว็บไซต์ภาพเคลื่อนไหวเชิงมุมใหม่ของ NG
ซีดีภาพเคลื่อนไหวเชิงมุม - ไซต์

และนั่นคือมัน! แอปพลิเคชันเชิงมุมของเราพร้อมที่จะทำงาน คุณสามารถเริ่มแอปพลิเคชันของคุณด้วย การเริ่มต้น NPM หรือ รับใช้ NG . ฉันชอบใช้ การเริ่มต้น NPM เพราะมันเป็นเรื่องธรรมดามากขึ้นและช่วยให้ฉันสามารถเพิ่มคำสั่งเพิ่มเติมได้ คุณสามารถนำทางไปยัง http: // localhost: 4200 เพื่อดูแอปพลิเคชันที่ทำงานอยู่

The stock Angular CLI application running — แอปพลิเคชั่นเชิงมุมเชิงมุมที่ทำงานอยู่

02. รวมภาพเคลื่อนไหวและวัสดุเชิงมุม

เพราะเราชอบสิ่งที่สวยงามเราจะทำให้การเพิ่มเล็กน้อยไปยังแอปพลิเคชันของเราโดยการเพิ่มและติดตั้ง @ Angular / Animations และ @ เชิงมุม / วัสดุ แพ็คเกจ:

 NPM I - Save @ เชิงมุม / วัสดุ @ Angular / Animations

เราสามารถปล่อยให้เชิงมุมรู้เกี่ยวกับการพึ่งพาเหล่านี้โดยการเพิ่มพวกเขาให้กับเรา app.module.ts ไฟล์. เรากำลังจะใช้ปุ่มวัสดุเชิงมุมการ์ดและแถบเครื่องมือดังนั้นเราจะนำเข้าโมดูลที่เกี่ยวข้องเช่นเดียวกับ BrowserRanceMitationSmodule .

 // แอป / app.module.ts
...
นำเข้า {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} จาก '@ angular / วัสดุ';
นำเข้า {BrowserAnimationSModule} จาก '@ angular / แพลตฟอร์มเบราว์เซอร์ / ภาพเคลื่อนไหว';

จากนั้นเราสามารถเพิ่มพวกเขาไปยัง การนำเข้า อาร์เรย์กับเรา ngmodule ประกาศ

 // แอป / app.module.ts
...
นำเข้า {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} จาก '@ angular / วัสดุ';
นำเข้า {BrowserAnimationSModule} จาก '@ angular / แพลตฟอร์ม - เบราว์เซอร์ / ภาพเคลื่อนไหว';

@ngmodule ({
  ...
  การนำเข้า: [
    ...
    BrowserRanceMitationSmodule,
    mdtoolbarmodule,
    mdbuttonmodule,
    mdcardmodule
  ],
  ...
})

และสำหรับการเพิ่มรอบชิงชนะเลิศหนึ่งครั้งเราจะนำเข้าธีมสีชมพูของ Indigo เป็นของเรา สไตล์. css ไฟล์.

 / * สไตล์. css * /
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

จนถึงจุดนี้เราได้มุ่งเน้นไปที่การตั้งค่าแอปพลิเคชันเพื่อให้เราสามารถเริ่มพัฒนาได้ คำสั่งเหล่านี้อาจรู้สึกคลานในตอนแรก แต่เมื่อคุณคุ้นเคยกับพวกเขาแล้วคุณจะพบว่าใช้เวลาเพียงไม่กี่นาทีในการมีสภาพแวดล้อมในการสร้างออกอย่างสมบูรณ์พร้อมระฆังและนกหวีดทั้งหมดที่เราต้องสร้างเว็บไซต์ที่แสนหวาน

03. แนะนำส่วนประกอบของหน้า

เพราะเรากำลังสร้างเว็บไซต์ด้วยเชิงมุมเราจะต้องแนะนำกลไกในการแสดงหน้าเว็บของเรา ในเชิงมุมบล็อกอาคารอะตอมของแอปพลิเคชันเป็นส่วนประกอบ โดยสถาปัตยกรรมแอปพลิเคชันของเราด้วยส่วนประกอบที่มีการกำหนดอย่างดีเราสามารถนำฟังก์ชั่นการทำงานได้ง่ายเช่นเดียวกับการเขียนฟังก์ชั่นใหม่โดยการแนะนำส่วนประกอบใหม่

เรือ CLI ที่มีการสนับสนุนเครื่องกำเนิดไฟฟ้าออกจากกล่องและนี่คือสิ่งที่เราใช้เพื่อสร้างองค์ประกอบของหน้าของเรา เราสามารถสร้างองค์ประกอบหน้าของเราโดยการเรียกใช้คำสั่งด้านล่าง ( g คำสั่งเป็นชวเลขสำหรับ สร้าง .

 หน้าองค์ประกอบ NG G

หมายเหตุ: ฉันขอแนะนำให้ใช้เวลาในการเรียนรู้วิธีการสร้างชิ้นส่วนเชิงมุมที่สำคัญด้วยมือจนกว่าคุณจะสร้างหน่วยความจำกล้ามเนื้อของคุณ มันเป็นเพียงเมื่อคุณเข้าใจสิ่งที่เกิดขึ้นที่คุณควรเพิ่มประสิทธิภาพเวิร์กโฟลว์ของคุณด้วยเครื่องกำเนิดไฟฟ้า

CLI จะสร้างโฟลเดอร์ใน src ไดเรกทอรีชื่อ หน้า ด้วยไฟล์ HTML, CSS และ Typescript รวมถึงไฟล์ข้อมูลจำเพาะ ในของเรา หน้า .ponent.ts ไฟล์เรามีโครงสร้างพื้นฐานของส่วนประกอบ องค์ประกอบของเราอ้างอิงเทมเพลตและไฟล์สไตล์ของเราใน @component ข้อมูลเมตาและมีของเรา ผู้สร้าง และ ngonit วิธีการยื่นออกมา

 // แอป / หน้า / หน้า .ponent.ts

นำเข้า {component, oninit} จาก '@ angular / core';

@component ({
  ตัวเลือก: 'App-page'
  templateurl: './page.component.html',
  styleurls: ['./page.component.css']})
ส่งออกคลาส PageComponent ดำเนินการ oninit {

  Constructor () {}

  ngoninit () {}
}

พร้อมกับการสร้างส่วนประกอบของเราแล้ว CLI จะปรับเปลี่ยนของเราด้วย app.module.ts เพื่อรวม PageComponent รายการในของเรา การประกาศ อาร์เรย์ ซึ่งหมายความว่าองค์ประกอบของหน้าของเราพร้อมใช้งานตลอดทั้งโมดูล

 // แอป / app.module.ts

@ngmodule ({
  ประกาศ: [
    AppComponent
    PageComponent
  ],
  ...
})

เป็นการตรวจสอบความมีสติเราสามารถกระโดดเข้าสู่เรา app.component.html ไฟล์และเพิ่ม & lt; app-page & gt; & lt; / app-page & gt; ไปที่ด้านล่าง ขอให้สังเกตว่าแท็กองค์ประกอบที่เราใช้สอดคล้องกับ ตัวเลือก อสังหาริมทรัพย์ที่กำหนดไว้ในของเรา @component ข้อมูลเมตา

 & lt; - app / app.component.html - & gt;

& lt; h1 & gt;
  {{หัวข้อ}}
& lt; / h1 & gt;

& lt; app-page & gt; & lt; / app-page & gt;

The page component rendering in our main application component — ส่วนประกอบของหน้าการแสดงผลในส่วนประกอบของแอปพลิเคชันหลักของเรา

04. สร้างองค์ประกอบของหน้าของคุณ

ด้วยส่วนประกอบของหน้าเพจของเรามีชีวิตอยู่และดีเราสามารถสร้างมันออกมาได้ดังนั้นจึงเริ่มมีลักษณะเหมือนหน้าเว็บจริง เราจะแนะนำ หน้า วัตถุที่มี หัวข้อ , คำบรรยาย , เนื้อหา และ ภาพ คุณสมบัติ.

 // แอป / หน้า / หน้า .ponent.ts

ส่งออกคลาส PageComponent ดำเนินการ Oninit {
  หน้า = {
    ชื่อเรื่อง: 'บ้าน',
    คำบรรยาย: 'ยินดีต้อนรับกลับบ้าน!',
    เนื้อหา: 'เนื้อหาบ้านบางส่วน',
    ภาพ: 'สินทรัพย์ / BG00.jpg'
  };

  Constructor () {}

  ngoninit () {}
}

The styled page component with Angular Material — ส่วนประกอบของหน้าสไตล์ที่มีวัสดุเชิงมุม

เราจะอัปเดตเทมเพลตของเราเพื่อผูกกับ หน้า วัตถุ. มีองค์ประกอบภาพที่ในที่สุดจะเติมเพื่อเติมเต็มหน้าต่างเบราว์เซอร์ทั้งหมด เรากำลังจะเพิ่มองค์ประกอบการ์ดวัสดุเชิงมุมที่เราจะผูกส่วนที่เหลือของเรา หน้า วัตถุประสงค์.

 & lt; - แอป / หน้า / page.component.html - & gt;
& lt; img class = "fullbg" [src] = "หน้า .image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt; md-card-title & gt; & lt; h1 & gt; {{page.title}} & lt; / h1 & gt; & lt; / md-card-title & gt;
& lt; md-card-subtitle & gt; {{page.subtitle}} & lt; / md-card-subtitle & gt;
& lt; / md-card-header & gt;
& lt; MD-card-content & gt;
{{page.content}}
& lt; / md-card-content & gt;
& lt; / md-card & gt;

ส่วนประกอบของหน้าของเราเริ่มดูดีขึ้นมาก! ขั้นตอนต่อไปของเราคือการเพิ่มความสามารถในการมีหลายหน้าและนำทางระหว่างพวกเขา

หน้า 2: วิธีการสร้างหลายหน้า

หน้าปัจจุบัน: หน้า 1

หน้าต่อไป หน้า 2

วิธีการสร้างเว็บไซต์เต็มหน้าในเชิงมุม

01. สร้างโครงการ

02. รวมภาพเคลื่อนไหวและวัสดุเชิงมุม

03. แนะนำส่วนประกอบของหน้า

04. สร้างองค์ประกอบของหน้าของคุณ

วิธีการ - บทความยอดนิยม

สำรวจการสร้างภาพข้อมูลด้วย P5.js

วิธีการสร้างการตกแต่งภายในด้วย Eevee ของ Blender

วิธีสร้างไอคอนแอพใน Illustrator

ทำให้ผลการพิมพ์ 3 มิติแบบโต้ตอบ

วิธีใช้ Adobe Capture CC

เริ่มต้นใช้งาน webgl โดยใช้ three.js

13 เคล็ดลับในการสร้างโลกเกม VR

สร้างสำเนาดิจิทัลที่มีคุณภาพของศิลปะของคุณ

หมวดหมู่