มีอะไรในเชิงมุม 8?

Sep 17, 2025
วิธีการ
Angular 8
(เครดิตรูปภาพ: ในอนาคต)

Angular 8 เป็นเกมเชิงมุมของ Google รุ่นล่าสุด - หนึ่งใน Frameworks JavaScript ที่ดีที่สุด รอบ ๆ ในบทความนี้เราจะเรียกใช้สิ่งที่พิเศษเกี่ยวกับ Angular 8 และแสดงวิธีเริ่มต้นใช้งาน ครั้งแรกดูสั้น ๆ ที่เกิดขึ้นกับสิ่งที่เกิดขึ้นกับกรอบการทำงาน

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

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

ในกรณีของเชิงมุม 8 ตัวอย่างเช่นคอมไพเลอร์ JavaScript ใหม่ถูกปรับใช้ (แม้ว่าจะยังคงทดลอง) มันปรับรหัสความเข้ากันได้ที่สร้างขึ้นให้น้อยลงอย่างมีนัยสำคัญและเร็วขึ้นที่ค่าใช้จ่ายของเบราว์เซอร์รุ่นเก่า นอกจากนี้การสนับสนุน Web Worker ยังรวมอยู่เพื่อเพิ่มขีดความสามารถในการประมวลผลของเชิงมุม ในระยะสั้นมีจำนวนมากที่เห็น - ให้เราดำดิ่งเข้ามา

หากคุณต้องการออกแบบเว็บไซต์โดยไม่มีรหัสลองหนึ่งในนั้นง่าย ๆ ผู้สร้างเว็บไซต์ . และเพื่อให้สิ่งต่าง ๆ วิ่งเรียบเนียนได้รับของคุณ เว็บโฮสติ้ง บริการที่ถูกต้อง

01. เรียกใช้การตรวจสอบเวอร์ชัน

toolchain ของเชิงมุมอาศัยอยู่ในสภาพแวดล้อมของ Nodejs เช่นเดียวกับการเขียนนี้ node.js 10.9 หรือดีกว่านั้นเป็นสิ่งจำเป็น - หากคุณพบว่าตัวเองเป็นรุ่นเก่า เยี่ยมชมเว็บไซต์ Node.js และรับการอัพเกรด รหัสด้านล่างแสดงสถานะเวอร์ชันบนเครื่องนี้ 

 Tamhan @ Tamhan18: ~ $ node -v
v12.4.0
Tamhan @ tamhan18: ~ $ npm -v
6.9.0

02. ติดตั้งเชิงมุม

toolchain ของเชิงมุมอาศัยอยู่ในยูทิลิตี้บรรทัดคำสั่งชื่อ นวล . สามารถติดตั้งผ่าน NPM ที่รู้จักกันดี 

 Tamhan @ Tamhan18: ~ $ sudo npm ติดตั้ง -g @ angular / cli
Tamhan @ Tamhan18: ~ $ NG รุ่น

ระวังตอบคำถามที่แสดงในภาพด้านล่าง

Click the icon in the top right to enlarge

คลิกที่ไอคอนที่ด้านบนขวาเพื่อดูภาพขยาย (เครดิตรูปภาพ: Tam Hanna)

การรับข้อมูลรุ่นออกจากเครื่องมือค่อนข้างยาก - ไม่เพียง แต่เป็นไวยากรณ์ที่ไม่ซ้ำกัน แต่เอาต์พุตยังเป็น verbose (ดูภาพด้านล่าง)

Click the icon in the top right to enlarge

คลิกที่ไอคอนที่ด้านบนขวาเพื่อดูภาพขยาย (เครดิตรูปภาพ: Tam Hanna)

03. สร้างโครงกระดูกโครงการ

นวล สร้างนั่งร้านเชิงมุมสำหรับเรา ในขั้นตอนต่อไปนี้เราต้องการเพิ่มการกำหนดเส้นทางและใช้ SASS สำหรับการขนถ่าย CSS หากการปรับใช้ล้มเหลวด้วยเหตุผลบางอย่างให้ล้างไดเรกทอรีการทำงานและรีสตาร์ท นวล ด้วยสิทธิ์ Superuser 

 Tamhan @ Tamhan18: ~ $ mkdir Angularspace
Tamhan @ Tamhan18: ~ $ CD Angularspace /
Tamhan @ Tamhan18: ~ / Angularspace $ NG Workertestestest

04. การโหลดที่แตกต่างกัน

เวอร์ชั่นใหม่ของ Angular ให้เหมาะสมกับรหัสที่มีความร่วมกันย้อนหลังเพื่อลดผลกระทบ - ไฟล์ที่เรียกว่า เบราว์เซอร์ลิสต์ ให้คุณตัดสินใจว่าจะได้รับการสนับสนุนเบราว์เซอร์ใด เปิด เบราว์เซอร์ลิสต์ และลบคำ ไม่ ด้านหน้า IE 9 ถึง IE11 

 . .
& gt; 0.5%
2 เวอร์ชั่นล่าสุด
Firefox ESR
ไม่ตาย
IE 9-11 # สำหรับ IE 9-11 รองรับลบ 'ไม่'

05. ... และดูผลลัพธ์

สั่งคอมไพล์ของโครงการเปลี่ยนเป็นโฟลเดอร์การกระจายและล้างไฟล์แผนที่ที่ไม่จำเป็น 

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng สร้าง
Tamhan @ Tamhan18: ~ / Angularspace / Workertsest / Dist / Workertest $ ls

เรียกต้นไม้เพื่อดูผลลัพธ์ - นวล สร้างไฟล์โค้ดต่าง ๆ หลายรุ่น (ดูภาพด้านล่าง)

Click the icon in the top right to enlarge

คลิกที่ไอคอนที่ด้านบนขวาเพื่อดูภาพขยาย (เครดิตรูปภาพ: Tam Hanna)

06. วางไข่ผู้ปฏิบัติงานเว็บ

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

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng สร้างเว็บงาน myworker
สร้าง tsconfig.worker.json (212 ไบต์)
สร้าง SRC / APP / MYWARKER.WARKER.TS (157 ไบต์)
อัปเดต tsconfig.app.json (236 ไบต์)
อัปเดต Angular.json (3640 Bytes)

07. สำรวจรหัส

นวล เอาต์พุตของ 'มีแนวโน้มที่จะดูน่ากลัวได้อย่างรวดเร็วก่อน เปิดไฟล์ src / app / myworker.worker.ts ใน ตัวแก้ไขโค้ด ทางเลือกเปิดเผยรหัสที่คุณควรรู้ดีจาก webworker ข้อมูลจำเพาะ โดยหลักการแล้วคนงานได้รับข้อความและดำเนินการตามต้องการ 

 /// & lt; lib อ้างอิง = "webworker" / & gt;
AddEventListener ('ข้อความ', ({data}) = & gt; {
 Const ตอบสนอง = `การตอบสนองของคนงานต่อ
$ {data} `;
 postmessage (ตอบกลับ);
});

08. ตั้งค่านั่งร้าน

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

 นำเข้า {คอมโพเนนต์, oninit} จาก '@ angular / core';
@component ({
. . .
})
ส่งออกคลาส AppComponent ดำเนินการ oninit {
 ชื่อ = 'Workertsest';
 ngoninit () {
   console.log ("appcomponent: oninit ()");
 }
}

09. ไม่ต้องกังวลเกี่ยวกับการขาดตัวสร้าง

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

10. รันการวิ่งขนาดเล็ก

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

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng ให้บริการ

ลองดูที่รูปเพื่อดูสิ่งนี้ในการดำเนินการในภาพด้านล่าง

Hit the icon in the top right to enlarge the image

กดไอคอนที่ด้านบนขวาเพื่อขยายภาพ (เครดิตรูปภาพ: Tam Hanna)

11. ... และค้นหาผลลัพธ์

รับใช้ NG ใส่ที่อยู่ของเว็บเซิร์ฟเวอร์ท้องถิ่นซึ่งมักจะ http: // localhost: 4200 / . เปิดเว็บเพจและเปิดเครื่องมือสำหรับนักพัฒนาเพื่อดูเอาต์พุตสถานะ โปรดจำไว้ว่า console.log เอาต์พุตข้อมูลไปยังคอนโซลเบราว์เซอร์และออกจากคอนโซลของอินสแตนซ์ของ Nodejs ที่ไม่มีใครแตะต้อง

12. ไปทำงาน

ณ เวลานี้เราสร้างตัวอย่างของผู้ปฏิบัติงานและให้ข้อความ ผลลัพธ์ของมันจะแสดงในคอนโซลเบราว์เซอร์ 

 ถ้า (ประเภทของคนงาน! == 'ไม่ได้กำหนด') {
 // สร้างใหม่
 Const Worker = คนงานใหม่ ('./ myworker.worker', {ประเภท: 'โมดูล'});
 Worker.onMessage = ({data}) = & gt; {
   ข้อความ Console.log ('มีข้อความ: $ \
{ข้อมูล\}');
 };
 worker.postmessage ('สวัสดี');
} อื่น {
     console.log ("ไม่สนับสนุนผู้ปฏิบัติงาน");
}

13. สำรวจไม้เลื้อย

Angular รุ่นในอนาคตจะใช้คอมไพเลอร์ขั้นสูงมากขึ้นนำไปสู่การมองที่ยิ่งใหญ่กว่า ในขณะที่ผลิตภัณฑ์ยังไม่เสร็จสิ้นโครงกระดูกที่เปิดใช้งานไม้เลื้อยสามารถกลับกลายเป็นทางผ่าน NG New Ivy-Project - เปิดใช้งาน Ivy . หรือเปลี่ยนการตั้งค่าคอมไพเลอร์ตามที่แสดงในตัวอย่าง 

 "angularcompileroptions": {
       "Enableivy": จริง
}

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

14. ลองแก้ไขการประมวลผล NG

เชิงมุม นวล เครื่องมือบรรทัดคำสั่งใช้สคริปต์เด็กภายในบางครั้ง Angular 8 Ups Ante ในตอนนี้คุณสามารถใช้สิ่งอำนวยความสะดวกนี้เพื่อเรียกใช้งานของคุณเองเนื่องจากแอปพลิเคชันของคุณประกอบและรวบรวม 

 "สถาปนิก": {
       "สร้าง": {
         "Builder": "@ Angular-devkit /
Build-Angular: เบราว์เซอร์ ",

หนึ่งแอปพลิเคชั่นเรียบร้อยของ นวล สคริปต์เกี่ยวข้องกับการอัปโหลดแอปพลิเคชันโดยตรงไปยังบริการคลาวด์ ที่ ที่เก็บ git ให้สคริปต์ที่มีประโยชน์ที่อัปโหลดงานของคุณไปยังบัญชี Firebase

15. เพลิดเพลินกับการย้ายถิ่นฐานที่ดีขึ้น

นักพัฒนาอพยพออกไปจากเชิงมุม 1.x หรือที่เรียกว่า Angularjs มีส่วนแบ่งที่ยุติธรรมของปัญหาที่ได้รับ Navigator เพื่อทำงานในแอปพลิเคชัน 'รวม' บริการตำแหน่งใหม่แบบครบวงจรมีวัตถุประสงค์เพื่อให้กระบวนการนี้ราบรื่นขึ้น

16. สำรวจการควบคุมพื้นที่ทำงาน

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

 ฟังก์ชั่น Async สาธิต () {
   Const Host = พื้นที่ทำงาน
Creatorkspacehost (Nodejssynchost ใหม่ ());
   Const Workspace = รอพื้นที่ทำงาน
readworkspace ('พา ธ / ไปยัง / เวิร์กสเปซ / ไดเรกทอรี /'
โฮสต์);
   Const Project = Workspace.Projects
รับ ('My-app');
   Const BuildTarget = Project.Targets
รับ ('สร้าง');
   BuildTarget.Options.Optimization = TRUE;
   รอพื้นที่ทำงาน.writorkspace (พื้นที่ทำงาน,
โฮสต์);
}

17. เร่งกระบวนการ

การสร้างฐานรหัส JavaScript ขนาดใหญ่ได้รับน่าเบื่อ Angularjs รุ่นในอนาคตจะใช้ระบบการสร้าง Bazel ของ Google เพื่อเร่งกระบวนการ - น่าเศร้าที่เวลาในการเขียนมันยังไม่พร้อมสำหรับ Primetime

18. หลีกเลี่ยงการเดินตาย

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

19. ดูบันทึกการเปลี่ยนแปลง

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

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

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ .

อ่านเพิ่มเติม:

  • เพิ่มการสนับสนุนหลายภาษาให้กับเชิงมุม
  • apis JavaScript ที่ดีที่สุด
  • วิธีการโค้ดได้เร็วขึ้นจาวาสคริปต์ที่เบากว่า

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

วิธีเพิ่มฟอนต์ใน Photoshop

วิธีการ Sep 17, 2025

(เครดิตรูปภาพ: Adobe) แบบอักษรใน Photoshop: ลิงค์ด่ว..

วิธีเปลี่ยนการถ่ายภาพเป็นภาพประกอบ

วิธีการ Sep 17, 2025

(เครดิตภาพ: ซินดี้คัง) การทำความเข้าใจวิธี�..

สร้างเค้าโครงแบบปรับตัวโดยไม่มีการสืบค้นของสื่อ

วิธีการ Sep 17, 2025

เป็นเวลานานฉันพยายามที่จะบรรลุองค์ประกอบภาพที่สมบูรณ์แบบบนหน้าเ�..

สร้างภูมิทัศน์ 3 มิติใน 6 ขั้นตอนง่ายๆ

วิธีการ Sep 17, 2025

สร้างชิ้นส่วนของ ศิลปะ 3 มิติ ด้วยภูมิทัศ�..

Speed ​​Sculpt Creature ใน ZBrush

วิธีการ Sep 17, 2025

เมื่อแนวทางการคิดสร้างสิ่งมีชีวิตใน ZBrush นำเสน�..

เริ่มต้นด้วยสนิม

วิธีการ Sep 17, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

วาดตัวเลขภายในห้านาที

วิธีการ Sep 17, 2025

การวาดภาพท่าทางห้านาทีเป็นเรื่องสนุกมากเพราะมีเวลาเพียงพอที่จะจ�..

รูปทรงเรขาคณิตที่ซับซ้อน: 5 เคล็ดลับยอดนิยม

วิธีการ Sep 17, 2025

ตลอดปีของประสบการณ์การทำงานในการตั้งค่าสตูด..

หมวดหมู่