Angular 7.0 – มีอะไรใหม่ใน Avatar ใหม่

เผยแพร่แล้ว: 2018-12-29

ความแข็งแรงของอาคารอยู่ที่เสาคอนกรีต กรอบงานสำหรับเว็บแอปพลิเคชันก็เช่นกัน เฟรมเวิร์กซอฟต์แวร์เป็นวิธีมาตรฐานในการออกแบบ สร้าง และปรับใช้แอปพลิเคชัน ในโลกของแพลตฟอร์ม Java เฟรมเวิร์ก Javascript เป็นคำศัพท์ที่มีคนใช้มากที่สุด จนกระทั่ง Angular ได้รับความสำคัญ
ตอนนี้ ให้เราดู คุณสมบัติเด่นบางอย่างของ Angular

  • Angular เป็นเฟรมเวิร์ก Javascript แบบโอเพ่นซอร์สซึ่งปรับเปลี่ยนเป็นสิ่งที่เรียกว่า 'Typescript' ในตอนนี้
  • การสร้างและพัฒนาโค้ดทำได้รวดเร็วเมื่อเทียบกับโค้ด JS (Javascript)
  • Command line prompt (CLI) มีคำสั่งให้สร้างแอปพลิเคชันเร็วขึ้น
  • โค้ดได้รับการจัดระเบียบอย่างดีเนื่องจากใช้ส่วนประกอบจึงช่วยปรับปรุงประสิทธิภาพการทำงาน
  • ไดเร็กทีฟเป็นฟังก์ชันไดนามิกที่จัดการตัวแปร if statement และ loops ใน HTML
  • Angular เป็นแพลตฟอร์มข้ามแพลตฟอร์มดังนั้นจึงไม่ขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการ
  • Angular CLI มาพร้อมกับเครื่องมือทดสอบที่เป็นประโยชน์สำหรับการทดสอบหน่วย

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

สารบัญ

AngularJS – สารตั้งต้นของ Angular

AngularJS เป็นผลิตภัณฑ์แรกในซีรี่ส์ Angular ที่ Google เปิดตัวในปี 2009 เป็นเฟรมเวิร์กฝั่งไคลเอ็นต์หรือส่วนหน้า สิ่งนี้หมายความว่าโค้ดทำงานบนเบราว์เซอร์ของผู้ใช้ ไม่ใช่บนเว็บเซิร์ฟเวอร์ AngularJS เขียนด้วย Javascript ล้วนๆ สิ่งนี้ได้รับการพัฒนาเพื่อแยกตรรกะของแอปพลิเคชันออก อย่างไรก็ตาม มันเป็นวิธีเดียวที่ประสบความสำเร็จและปูทางสำหรับ Angular ด้วยอวาตาร์ 7.0 ปัจจุบัน
AngularJS เป็นตัวเลือกที่เหมาะสมสำหรับการพัฒนาแอพมือถือครั้งต่อไปของคุณหรือไม่?

กรอบงานเชิงมุม 7.0

ให้เราเข้าใจสั้น ๆ เกี่ยวกับการสร้างของ Angular:

  1. โมดูล : โดยทั่วไปจะแบ่งหน้าจอหลักของแอปพลิเคชันตามหลักเหตุผล ตัวอย่างเช่น หากมีหน้าตะกร้าสินค้า อาจมีคนต้องการมีโมดูลตะกร้าสินค้า
  2. คอมโพเนนต์ : นี่คือส่วนหนึ่งของ UI และเป็น 'คลาส' เช่นเดียวกับในการเขียนโปรแกรมเชิงวัตถุ นี่คือส่วนประกอบพื้นฐานของส่วนต่อประสานผู้ใช้ (UI) คลาสคอมโพเนนต์ประกอบด้วยตรรกะหลักสำหรับเพจ
     ส่วนประกอบประกอบด้วย:

    1. เทมเพลต : เทมเพลตเขียนด้วย HTML หรืออาจเป็นไฟล์ HTML มันสามารถมีคุณสมบัติไดนามิกเช่นตัวแปรและการใช้ 'ถ้าเงื่อนไข' เป็นไปได้ด้วยคำสั่ง
    2. คลาส : เป็นรหัสสำหรับการสมัคร รหัสถูกเขียนใน typescript typescript เป็น superset ของ Javascript typescript เป็นภาษาประเภท 'คงที่' ที่ประกาศตัวแปรด้วยประเภทที่กำหนดไว้ ดังนั้นข้อผิดพลาดจึงถูกจับในการรวบรวมโปรแกรมแทนที่จะถูกจับที่รันไทม์ คลาสเชิงมุมสามารถเขียนด้วย Javascript ได้เช่นกัน ส่วนประกอบมีคุณสมบัติและข้อมูลเมธอด
    3. ข้อมูลเมตา : เพื่อระบุว่าคลาสเป็นองค์ประกอบเชิงมุมหนึ่งใช้ข้อมูลเมตา สามารถแนบข้อมูลเมตากับ typescript โดยใช้การประกาศมัณฑนากร
       ให้เราอธิบายองค์ประกอบอย่างง่ายใน Angular

       นำเข้า {component} จาก ''@angular/core'' ; ที่นี่แพ็คเกจส่วนประกอบนำเข้าจากไลบรารีแกนเชิงมุม
@component ({ (นี่คือการประกาศมัณฑนากร)
Selector : 'myapplication' …(.นี่คือแท็ก HTML ที่กำหนดเองที่เราใช้เพื่อแทรกองค์ประกอบ )
แม่แบบ: '<h1> สวัสดี {(name)}</h1> (ชื่อเป็นตัวแปร)
})
ส่งออกคลาส AppComponent{ (นี่คือคลาสคอมโพเนนต์และ 'ชื่อ' เป็นคุณสมบัติในคลาส)
name = ' กรอบเชิงมุม ';
}
<body>
<myapplication>กำลังโหลดตัวอย่างส่วนประกอบแอปที่นี่..</myapplication>
</body>
    4. การผูกข้อมูล : กระบวนการที่อนุญาตให้มีการสื่อสารระหว่างส่วนประกอบและมุมมอง ดังนั้นข้อมูลจะถูกส่งต่อจากส่วนประกอบไปยังมุมมองและในทางกลับกัน การผูกข้อมูลมีสี่ประเภท ในการ Interpolation และการรวมคุณสมบัติ ข้อมูลจะถูกส่งจากส่วนประกอบไปยังมุมมอง และในการผูกเหตุการณ์ ข้อมูลจะถูกส่งไปยังส่วนประกอบจากมุมมองหรือเทมเพลต ในการผูกสองทาง ข้อมูลเดินทางทั้งสองทาง
    5. บริการ : นี่คือคลาสที่เขียนขึ้นสำหรับโค้ดที่ใช้ซ้ำได้ เช่น รหัสที่สามารถเข้าถึงได้จากหลายองค์ประกอบ คลาสเหล่านี้ส่งข้อมูลและการทำงานข้ามส่วนประกอบ คลาสบริการยังสามารถรับข้อมูลจากฐานข้อมูลหรือไฟล์ js/JSON เมื่อใช้คลาส Service โค้ดจะดูเป็นระเบียบและมีการแยกส่วน
    6. คำสั่ง : การปรับแต่งแอตทริบิวต์ HTML เพื่อเพิ่มประสิทธิภาพของ HTML เป็นคำสั่ง ngIf, ngFor, ngModel เป็นคำสั่ง ngModel มีหน้าที่รับผิดชอบ ผูกมุมมองเข้ากับโมเดล ซึ่งคำสั่งอื่นๆ เช่น input, textarea หรือ Select ต้องการ
       นี่คือโค้ดบางส่วนที่แสดงให้เห็นว่า ngmodel ทำงานอย่างไร

       <div ng-app="" ng-init="firstName='John'">
<p>ป้อนชื่อในช่องป้อนข้อมูล:</p>
<p>ชื่อ: <input type="text" ng-model="firstName"></p>
<p>คุณเขียน: {{ firstName }}</p>
</div>

      ดังนั้น firstName ถูกกำหนดค่าเริ่มต้นเป็น 'John' และเมื่อมีคนป้อนค่าใหม่ในกล่องข้อความ firstName จะเก็บชื่อใหม่ที่ป้อนไว้

    7. การพึ่งพาการฉีด (DI) : คลาสต้องการอ็อบเจ็กต์เพื่อทำหน้าที่เฉพาะ แทนที่จะสร้างอ็อบเจ็กต์ในแต่ละครั้งในคลาส คลาสจะได้รับอ็อบเจกต์ (การพึ่งพา) จากแหล่งภายนอก ในกรอบงาน DI มีขั้นตอนที่ต้องปฏิบัติตาม:
      1. สร้างคลาสบริการเช่น ข้อมูลพนักงาน
      2. ลงทะเบียนคลาสบริการนี้กับ Injector Injector เป็นคอนเทนเนอร์ที่เก็บคลาสการพึ่งพาทั้งหมด
      3. ประกาศคลาส Employeedata เป็นการพึ่งพาในคลาสที่ต้องการเช่น คลาสรายชื่อพนักงาน
นักพัฒนาซอฟต์แวร์ทำอะไร?

รุ่นของ Angular

หลังจาก AngularJS นั้น Angular 2 ได้รับการปล่อยตัวซึ่งเป็นการเขียนใหม่ของ AngularJS เพิ่มส่วนประกอบจาก Angular 2 Angular 2 ไม่เข้ากันแบบย้อนกลับ Angular ประกอบด้วยแพ็คเกจจำนวนมากและแพ็คเกจเราเตอร์ใน Angular 3 ไม่ซิงค์กัน ดังนั้นทีม Angular จึงย้ายไปที่ Angular 4 ซึ่งได้รับการเผยแพร่พร้อมกับการแก้ไขและคุณลักษณะทั้งหมดที่มีความเข้ากันได้แบบย้อนหลังกับ Angular 2 ต่อจากนั้น Angular 5 Angular 6 ได้รับการเผยแพร่และเวอร์ชันล่าสุดคือ Angular 7

มีอะไรใหม่ใน Angular 7.0

  1. พร้อมท์ CLI : การเปลี่ยนแปลงในพรอมต์บรรทัดคำสั่งเชิงมุมคือ CLI พร้อมต์ให้ผู้ใช้เลือกคุณสมบัติในขณะที่รันคำสั่งทั่วไป คุณลักษณะเช่นการกำหนดเส้นทางเชิงมุมหรือรูปแบบของสไตล์ชีตและอื่น ๆ อีกมากมายสามารถเลือกได้โดยผู้ใช้ ในเวอร์ชันก่อนหน้าของ Angular คุณต้องจำและพิมพ์ตัวเลือกที่พรอมต์
  2. ประสิทธิภาพของแอพพลิเคชั่น :
    1. ข้อผิดพลาดทั่วไป:
       ในเวอร์ชันนี้ ทีมเชิงมุมได้วิเคราะห์และขจัดข้อผิดพลาดทั่วไปบางอย่างที่ทำโดยนักพัฒนา เช่น polyfill 'reflect-metadata' ซึ่งรวมอยู่ในการผลิตซึ่งจำเป็นจริงๆ เท่านั้นในการพัฒนา
    2. Bundle-งบประมาณ:
       เพื่อปรับปรุงประสิทธิภาพของแอปพลิเคชัน Bundle Budget เริ่มต้นถูกกำหนดใน angular.JSON นักพัฒนาจะได้รับคำเตือนหากขนาดบันเดิลแอปพลิเคชันเกินขีดจำกัด 5MB และเมื่อบันเดิลเริ่มต้นเกิน 2MB ค่าเหล่านี้สามารถแก้ไขได้ในไฟล์ JSON ตามต้องการ
  3. วัสดุเชิงมุมและ CDK: ชุดพัฒนาองค์ประกอบเชิงมุม (CDK) ถูกสร้างขึ้นจากวัสดุเชิงมุม (UI สำหรับไลบรารี) คุณลักษณะใหม่สองรายการที่เพิ่มเข้ามาใน CDK ได้แก่
    1. การเลื่อนเสมือน:
       ในการโหลดเฉพาะส่วนที่มองเห็นได้บนหน้าจอ แพ็คเกจ <cdk-virtual-scroll-viewport> จะมีตัวช่วยสำหรับคำสั่งที่ตอบสนองต่อเหตุการณ์การเลื่อน ดังนั้นจะแสดงเฉพาะรายการที่พอดีกับหน้าจอเท่านั้น เมื่อผู้ใช้เลื่อนดูรายการ DOM จะโหลดและยกเลิกการโหลดองค์ประกอบแบบไดนามิกตามขนาดที่แสดง
    2. รองรับการลากและวาง:
       โมดูล @angular/cdk/drag-drop ช่วยให้คุณสมบัติการลากและวางฟรีขององค์ประกอบ การเรียงลำดับรายการใหม่ในรายการ การย้ายรายการในรายการ และอื่นๆ สิ่งนี้ทำได้ด้วยความช่วยเหลือของคำสั่ง cdkDropList และ cdkDrag
  4. Angular 7.0 ได้อัปเดตการพึ่งพาเพื่อรองรับ Typescript 3.1, RxJS 6.3 และ Node 10
  5. ปรับปรุงการเข้าถึงของ Selects: 'select' ดั้งเดิมมีข้อดีด้านประสิทธิภาพ การเข้าถึงและการใช้งาน ดังนั้นการใช้องค์ประกอบการเลือกดั้งเดิมภายใน 'mat-form-field' เป็นคุณลักษณะใหม่ใน Angular 7.0
  6. องค์ประกอบเชิงมุม: การเปลี่ยนแปลงเล็กน้อยแต่ใหม่ใน Angular 7
     “ ขณะนี้องค์ประกอบเชิงมุมรองรับการฉายเนื้อหาโดยใช้มาตรฐานเว็บสำหรับองค์ประกอบที่กำหนดเอง ” — นี่คือสิ่งที่ Stephen Fluin, Angular กล่าว
  7. การทำงานกับพันธมิตร: ทีมงานของ Angular ได้ทำงานร่วมกับโครงการชุมชนที่เพิ่งเปิดตัวไปเมื่อไม่นานมานี้ หนึ่งในนั้นคือ Angular Console Angular Console เป็นอินเทอร์เฟซผู้ใช้สำหรับ Angular CLI เป็นสิ่งที่ดีสำหรับผู้เริ่มต้นและผู้เชี่ยวชาญเนื่องจากง่ายกว่าการแจ้ง มี UI เวอร์ชันต่างๆ สำหรับ Windows และ Mac OS
คู่มือสำหรับผู้เริ่มต้นใช้งานสถาปัตยกรรม MVC ใน Java

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาซอฟต์แวร์แบบฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์ – ความเชี่ยวชาญพิเศษด้านการพัฒนาแบบเต็มสแต็ก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง 9+ โครงการและการมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักในทางปฏิบัติและความช่วยเหลือด้านงานกับบริษัทชั้นนำ

มาเป็นนักพัฒนาเต็มรูปแบบ

สมัครใบรับรอง PG ที่เชื่อมโยงกับงานของ upGrad ในสาขาวิศวกรรมซอฟต์แวร์