เนื้อหา
- 01. ทำการตรวจสอบเวอร์ชัน
- 02. ติดตั้ง Angular
- 03. สร้างโครงกระดูกโครงการ
- 04. โหลดส่วนต่างของสายรัด
- 05. ... แล้วดูผล
- 06. เรียกคนทำงานเว็บ
- 07. สำรวจรหัส
- 08. ตั้งนั่งร้าน
- 09. อย่ากังวลกับการขาดตัวสร้าง
- 10. ดำเนินการคอมไพล์รันขนาดเล็ก
- 11. ... และค้นหาผลลัพธ์
- 12. ไปทำงาน
- 13. สำรวจไอวี่
- 14. ลองแก้ไขการประมวลผล ng
- 15. เพลิดเพลินกับการย้ายข้อมูลที่ดีขึ้น
- 16. สำรวจการควบคุมพื้นที่ทำงาน
- 17. เร่งดำเนินการ
- 18. หลีกเลี่ยงการเดินตาย
- 19. ดูบันทึกการเปลี่ยนแปลง
Angular 8 เป็น Angular เวอร์ชันล่าสุดของ Google ซึ่งเป็นหนึ่งในเฟรมเวิร์ก JavaScript ที่ดีที่สุด ในบทความนี้เราจะอธิบายถึงสิ่งที่พิเศษเกี่ยวกับ Angular 8 และแสดงวิธีเริ่มต้นใช้งาน ขั้นแรกให้ย้อนกลับไปดูสิ่งที่เกิดขึ้นกับกรอบงานจนถึงตอนนี้
การแนะนำของ Angular นำไปสู่การเปลี่ยนกระบวนทัศน์ในการพัฒนาเว็บ: ในขณะที่ห้องสมุดส่วนใหญ่ จำกัด ตัวเองในการให้การสนับสนุนแก่นักพัฒนาที่มีผลกระทบทางสถาปัตยกรรมค่อนข้าง จำกัด แต่ทีมนักพัฒนาของ Angular ก็ไปในทิศทางอื่น ผลิตภัณฑ์ของพวกเขาบังคับให้คุณใช้สถาปัตยกรรมเฉพาะโดยมีความเบี่ยงเบนตั้งแต่ยากไปจนถึงไม่มีจุดหมายในเชิงพาณิชย์ ในความเป็นจริงโค้ด Angular ส่วนใหญ่ทำงานผ่านระบบเครื่องมือการถ่ายเทที่ค่อนข้างซับซ้อนก่อนที่จะเข้าสู่เบราว์เซอร์
เนื่องจากความสำเร็จอันยิ่งใหญ่ของ Angular ทั้งภายในและภายนอกของ Google Inc การพัฒนาจึงมีเสถียรภาพและมีขนาดใหญ่ ซึ่งหมายความว่าการเปลี่ยนแปลงโค้ดที่ไม่สมบูรณ์มีเพียงเล็กน้อยในขณะที่การอัปเกรดรายครึ่งปีมุ่งเน้นไปที่การปรับกรอบการทำงานให้เข้ากับการเปลี่ยนแปลงในแนวการท่องเว็บ
ตัวอย่างเช่นในกรณีของ Angular 8 จะมีการปรับใช้คอมไพเลอร์ JavaScript ใหม่ (แม้ว่าจะยังทดลองอยู่ก็ตาม) เพิ่มประสิทธิภาพโค้ดความเข้ากันได้ที่สร้างขึ้นให้มีขนาดเล็กลงอย่างมากและเร็วขึ้นโดยใช้เบราว์เซอร์รุ่นเก่า นอกจากนี้การสนับสนุน Web Worker ยังรวมเข้าด้วยกันเพื่อเพิ่มความสามารถในการประมวลผลของ Angular ในระยะสั้นมีอะไรให้ดูมากมาย - ให้เราดำดิ่งลงไป
หากคุณต้องการออกแบบเว็บไซต์โดยไม่ใช้โค้ดลองใช้เครื่องมือสร้างเว็บไซต์ง่ายๆเหล่านี้ และเพื่อให้การทำงานราบรื่นยิ่งขึ้นให้ใช้บริการเว็บโฮสติ้งของคุณอย่างถูกต้อง
01. ทำการตรวจสอบเวอร์ชัน
Toolchain ของ Angular อาศัยอยู่ในสภาพแวดล้อม NodeJS จากการเขียนนี้จำเป็นต้องมี Node.js 10.9 หรือดีกว่า - หากคุณพบว่าตัวเองใช้เวอร์ชันเก่ากว่าโปรดไปที่เว็บไซต์ Node.js และรับการอัปเกรด รหัสด้านล่างแสดงสถานะเวอร์ชันบนเครื่องนี้
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. ติดตั้ง Angular
Toolchain ของ Angular อยู่ในยูทิลิตี้บรรทัดคำสั่งที่ชื่อ ng. สามารถติดตั้งผ่าน NPM ที่รู้จักกันดี
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng version
ระมัดระวังในการตอบคำถามที่แสดงในภาพด้านล่าง
การรับข้อมูลเวอร์ชันจากเครื่องมือนั้นค่อนข้างยาก - ไม่เพียง แต่ไวยากรณ์จะไม่ซ้ำกันเท่านั้น แต่ผลลัพธ์ยังเป็นแบบละเอียดด้วย (ดูภาพด้านล่าง)
03. สร้างโครงกระดูกโครงการ
ng สร้างนั่งร้านเชิงมุมสำหรับเรา ในขั้นตอนต่อไปนี้เราต้องการเพิ่มการกำหนดเส้นทางและใช้ Sass สำหรับการถ่ายทอด CSS หากการปรับใช้ล้มเหลวด้วยเหตุผลบางประการให้ล้างไดเร็กทอรีการทำงานและรีสตาร์ท ng ด้วยสิทธิ์ superuser
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. โหลดส่วนต่างของสายรัด
Angular เวอร์ชันใหม่เพิ่มประสิทธิภาพโค้ดความเข้ากันได้ย้อนหลังเพื่อลดผลกระทบ - ไฟล์ที่เรียกว่า รายการเบราว์เซอร์ ช่วยให้คุณตัดสินใจได้ว่าจะรองรับเบราว์เซอร์ใด เปิด รายการเบราว์เซอร์ และลบคำ ไม่ หน้า IE 9 ถึง IE11
. . . > 0.5% 2 เวอร์ชันล่าสุด Firefox ESR ยังไม่ตาย IE 9-11 # สำหรับการรองรับ IE 9-11 ให้ลบ "not"
05. ... แล้วดูผล
สั่งซื้อคอมไพล์ของโปรเจ็กต์เปลี่ยนลงในโฟลเดอร์การแจกจ่ายและล้างไฟล์แผนที่ที่ไม่จำเป็น
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
วิงวอนต้นไม้เพื่อดูผลลัพธ์ - ng สร้างไฟล์โค้ดหลายเวอร์ชัน (ดูภาพด้านล่าง)
06. เรียกคนทำงานเว็บ
ผู้ปฏิบัติงานบนเว็บให้ JavaScript เข้าสู่พรมแดนสุดท้ายของแอปพลิเคชันเนทีฟ: การประมวลผลงานแบบขนาน ด้วย Angular 8 คุณสามารถสร้างผู้ปฏิบัติงานบนเว็บได้จากความสะดวกสบายของไฟล์ ng ยูทิลิตี้บรรทัดคำสั่ง
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng สร้าง web-worker myworker สร้าง tsconfig.worker.json (212 ไบต์) สร้าง src / app / myworker.worker.ts (157 ไบต์) UPDATE tsconfig.app.json (236 ไบต์) ) อัปเดต angular.json (3640 ไบต์)
07. สำรวจรหัส
ngผลลัพธ์ของมันน่าจะดูน่ากลัวเมื่อแวบแรก กำลังเปิดไฟล์ src / app / myworker.worker.ts ในโปรแกรมแก้ไขโค้ดที่เลือกจะเปิดเผยรหัสที่คุณควรรู้ดีจากไฟล์ WebWorker สเปค. โดยหลักการแล้วผู้ปฏิบัติงานจะได้รับข้อความและประมวลผลตามความจำเป็น
/// อ้างอิง lib = "webworker" /> addEventListener ('ข้อความ', ({data}) => {const response = `การตอบสนองของผู้ปฏิบัติงานต่อ $ {data}`; postMessage (response);});
08. ตั้งนั่งร้าน
แอปพลิเคชันเชิงมุมประกอบด้วยส่วนประกอบ การไล่ออกจากผู้ปฏิบัติงานเว็บของเราทำได้ดีที่สุดภายในไฟล์ AppComponentซึ่งขยายเพื่อรวมผู้ฟังสำหรับไฟล์ OnInit เหตุการณ์. สำหรับตอนนี้จะแสดงข้อมูลสถานะเท่านั้น
นำเข้า {Component, OnInit} จาก "@ angular / core"; @Component ({..}) ส่งออกคลาส AppComponent ใช้ OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. อย่ากังวลกับการขาดตัวสร้าง
นักพัฒนา TypeScript ที่มีประสบการณ์ถามตัวเองว่าทำไมโค้ดของเราไม่ใช้ตัวสร้างที่มาจากภาษาโปรแกรม เหตุผลที่เป็นเช่นนั้น ngOnInit เป็นเหตุการณ์วงจรชีวิตซึ่งจะเริ่มทำงานเมื่อใดก็ตามที่มีเหตุการณ์เริ่มต้นเกิดขึ้นซึ่งไม่จำเป็นต้องมีความสัมพันธ์กับการเรียกคลาส
10. ดำเนินการคอมไพล์รันขนาดเล็ก
ณ เวลานี้โปรแกรมพร้อมที่จะทำงาน เราจะดำเนินการจากเซิร์ฟเวอร์ภายใน ngซึ่งสามารถเรียกใช้ผ่านคำสั่ง serve แง่มุมที่เป็นระเบียบของแนวทางนี้คือโปรแกรมจะตรวจจับการเปลี่ยนแปลงและคอมไพล์โครงการใหม่ได้ทันที
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng ให้บริการ
ดูรูปเพื่อดูการทำงานนี้ในภาพด้านล่าง
11. ... และค้นหาผลลัพธ์
ng ให้บริการ ใส่ที่อยู่ของเว็บเซิร์ฟเวอร์ภายในซึ่งโดยปกติจะเป็น http: // localhost: 4200 /. เปิดหน้าเว็บและเปิดเครื่องมือสำหรับนักพัฒนาเพื่อดูผลลัพธ์สถานะ โปรดทราบว่า console.log ส่งออกข้อมูลไปยังคอนโซลของเบราว์เซอร์และปล่อยให้คอนโซลของอินสแตนซ์ NodeJS ไม่ถูกแตะต้อง
12. ไปทำงาน
ในเวลานี้เราได้สร้างตัวอย่างของผู้ปฏิบัติงานและส่งข้อความมาให้ ผลลัพธ์จะปรากฏในคอนโซลของเบราว์เซอร์
if (typeof Worker! == 'undefined') {// Create a const worker ใหม่ = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’เพจมีข้อความ: $ {data }’); }; worker.postMessage ("สวัสดี"); } else {console.log ("ไม่มีการสนับสนุนผู้ปฏิบัติงาน"); }
13. สำรวจไอวี่
Angular เวอร์ชันต่อ ๆ ไปจะใช้คอมไพเลอร์ขั้นสูงซึ่งนำไปสู่มุมมองที่เล็กลง ในขณะที่ผลิตภัณฑ์ยังไม่เสร็จสมบูรณ์สามารถสร้างโครงกระดูกที่ใช้ไม้เลื้อยได้ผ่านทาง ng โครงการ ivy ใหม่ - enable-ivy. หรือเปลี่ยนการตั้งค่าคอมไพเลอร์ตามที่แสดงในข้อมูลโค้ด
"angularCompilerOptions": {"enableIvy": true}
คำเตือน: ไอวี่นำไปสู่การลดขนาดที่น่าทึ่ง แต่ก็ไม่ฟรี ผลิตภัณฑ์ยังไม่คงที่ดังนั้นจึงไม่แนะนำให้ใช้ในสภาพแวดล้อมที่มีประสิทธิผล
14. ลองแก้ไขการประมวลผล ng
Angular’s ng เครื่องมือบรรทัดคำสั่งใช้สคริปต์ลูกภายในเป็นระยะเวลาหนึ่ง Angular 8 จะเพิ่ม ante ในตอนนี้ที่คุณสามารถใช้สิ่งอำนวยความสะดวกนี้เพื่อเรียกใช้งานของคุณเองเมื่อแอปพลิเคชันของคุณถูกประกอบและรวบรวม
"สถาปนิก": {"build": {"builder": "@ angular-devkit / build-angular: browser",
โปรแกรมหนึ่งที่เรียบร้อยของ ng สคริปต์เกี่ยวข้องกับการอัปโหลดแอปพลิเคชันไปยังบริการคลาวด์โดยตรง ที่เก็บ Git มีสคริปต์ที่มีประโยชน์ซึ่งจะอัปโหลดงานของคุณไปยังบัญชี Firebase
15. เพลิดเพลินกับการย้ายข้อมูลที่ดีขึ้น
นักพัฒนาที่ย้ายข้อมูลจาก Angular 1.x หรือที่เรียกว่า AngularJS มีปัญหาในการทำให้ตัวนำทางทำงานได้ดีในแอปพลิเคชันแบบ "รวม" Unified Location Service ใหม่มีจุดมุ่งหมายเพื่อทำให้กระบวนการนี้ราบรื่นขึ้น
16. สำรวจการควบคุมพื้นที่ทำงาน
โครงการขนาดใหญ่ได้รับประโยชน์จากความสามารถในการเปลี่ยนแปลงโครงสร้างพื้นที่ทำงานแบบไดนามิก สิ่งนี้ทำได้ผ่าน Workspace API ใหม่ที่นำมาใช้ใน Angular 8.0 - ตัวอย่างข้อมูลที่มาพร้อมกับขั้นตอนนี้จะให้ภาพรวมโดยย่อของลักษณะการทำงาน
ฟังก์ชัน async แสดงให้เห็นถึง () {const host = พื้นที่ทำงาน createWorkspaceHost (NodeJsSyncHost ใหม่ ()); const workspace = รอพื้นที่ทำงาน readWorkspace ('path / to / workspace / directory /', โฮสต์); const project = workspace.projects รับ ('แอปของฉัน'); const buildTarget = project.targets รับ ('สร้าง'); buildTarget.options.optimization = จริง; รอ workspaces.writeWorkspace (พื้นที่ทำงานโฮสต์); }
17. เร่งดำเนินการ
การสร้างฐานรหัส JavaScript ขนาดใหญ่เป็นเรื่องที่น่าเบื่อ AngularJS เวอร์ชันต่อ ๆ ไปจะใช้ระบบบิวด์ Bazel ของ Google เพื่อเร่งกระบวนการ - น่าเศร้าที่ตอนที่เขียนมันยังไม่พร้อมสำหรับไพรม์ไทม์
18. หลีกเลี่ยงการเดินตาย
แม้ว่า Google จะใช้ความระมัดระวังอย่างยิ่งที่จะไม่ทำลายโค้ด แต่คุณลักษณะบางอย่างก็จำเป็นต้องถูกลบออกเนื่องจากไม่จำเป็นอีกต่อไป ตรวจสอบรายการการเลิกใช้งานนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติที่ควรหลีกเลี่ยง
19. ดูบันทึกการเปลี่ยนแปลง
เช่นเคยบทความหนึ่งบทความไม่สามารถให้ความยุติธรรมได้ตลอดทั้งฉบับ โชคดีที่บันทึกการเปลี่ยนแปลงนี้แสดงรายการการเปลี่ยนแปลงทั้งหมดโดยละเอียด - ในกรณีที่คุณรู้สึกอยากตรวจสอบชีพจรของคุณลักษณะที่คุณรักเป็นพิเศษ
มีไฟล์จำนวนมากที่พร้อมสำหรับการอัปโหลดไปยังไซต์ของคุณหรือไม่? สำรองข้อมูลไว้ในที่เก็บข้อมูลบนคลาวด์ที่น่าเชื่อถือที่สุด
บทความนี้ตีพิมพ์ครั้งแรกในนิตยสารการออกแบบเว็บเชิงสร้างสรรค์ นักออกแบบเว็บไซต์.
