Angular 4 - ภาพรวม
Angular มีสามรุ่นหลัก ๆ รุ่นแรกที่เปิดตัวคือ Angular1 ซึ่งเรียกอีกอย่างว่า AngularJS Angular1 ตามด้วย Angular2 ซึ่งมีการเปลี่ยนแปลงมากมายเมื่อเทียบกับ Angular1
โครงสร้างของ Angular ขึ้นอยู่กับสถาปัตยกรรมส่วนประกอบ / บริการ AngularJS ขึ้นอยู่กับตัวควบคุมมุมมองแบบจำลองAngular 4 เปิดตัวในเดือนมีนาคม 2017 พิสูจน์ได้ว่าเป็นการพัฒนาครั้งสำคัญและเป็นรุ่นล่าสุดจากทีม Angular หลังจาก Angular2
Angular 4 เกือบจะเหมือนกับ Angular 2 มันมีความเข้ากันได้แบบย้อนหลังกับ Angular 2 โครงการที่พัฒนาใน Angular 2 จะทำงานได้โดยไม่มีปัญหาใด ๆ กับ Angular 4
ตอนนี้ให้เราดูคุณสมบัติใหม่และการเปลี่ยนแปลงที่เกิดขึ้นใน Angular 4
ทำไม Angular4 และไม่ใช่ Angular3
ทีม Angular ประสบปัญหาการกำหนดเวอร์ชันภายในกับโมดูลของพวกเขาและเนื่องจากความขัดแย้งพวกเขาจึงต้องดำเนินการต่อไปและปล่อย Angular เวอร์ชันถัดไป - Angular4
ตอนนี้ให้เราดูคุณสมบัติใหม่ที่เพิ่มเข้ามาใน Angular 4 -
ngIf
Angular2 รองรับเฉพาะไฟล์ ifเงื่อนไข. อย่างไรก็ตาม Angular 4 รองรับไฟล์if elseสภาพเช่นกัน. ให้เราดูว่ามันทำงานอย่างไรโดยใช้แม่แบบ ng
<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>
เป็นคำหลักในการวนซ้ำ
ด้วยความช่วยเหลือของ as คำสำคัญที่คุณสามารถจัดเก็บค่าดังที่แสดงด้านล่าง -
<div *ngFor="let i of months | slice:0:5 as total">
Months: {{i}} Total: {{total.length}}
</div>
ผลรวมของตัวแปรจะจัดเก็บผลลัพธ์ของชิ้นงานโดยใช้ as คำสำคัญ.
แพ็คเกจแอนิเมชั่น
แอนิเมชั่นใน Angular 4 มีให้เป็นแพ็คเกจแยกต่างหากและต้องนำเข้าจาก @ angular / animations ใน Angular2 สามารถใช้ได้กับ @angular/core. มันยังคงเหมือนเดิมสำหรับด้านความเข้ากันได้แบบย้อนหลัง
เทมเพลต
Angular 4 ใช้ <ng-template> เป็นแท็กแทน <template>;หลังถูกใช้ใน Angular2 เหตุผลที่ Angular 4 เปลี่ยนไป<template> ถึง <ng-template> เป็นเพราะความขัดแย้งของชื่อ <template> แท็กด้วย html <template>แท็กมาตรฐาน จะเลิกใช้งานอย่างสมบูรณ์ในอนาคต นี่คือหนึ่งในการเปลี่ยนแปลงที่สำคัญใน Angular 4
TypeScript 2.2
Angular 4 ได้รับการอัปเดตเป็น TypeScript เวอร์ชันล่าสุดซึ่งก็คือ 2.2 ซึ่งช่วยปรับปรุงความเร็วและให้การตรวจสอบประเภทที่ดีขึ้นในโครงการ
ท่อไตเติ้ลกรณี
Angular 4 ได้เพิ่มกรณีชื่อท่อใหม่ซึ่งจะเปลี่ยนอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่
<div>
<h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>
บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ - Angular 4 Titlecase.
พารามิเตอร์การค้นหา Http
พารามิเตอร์การค้นหาไปยัง http get api ถูกทำให้ง่ายขึ้น เราไม่จำเป็นต้องโทรURLSearchParams เช่นเดียวกับที่ทำใน Angular2
แอพที่เล็กลงและเร็วขึ้น
แอปพลิเคชัน Angular 4 มีขนาดเล็กและเร็วกว่าเมื่อเทียบกับ Angular2 ใช้ TypeScript เวอร์ชัน 2.2 ซึ่งเป็นเวอร์ชันล่าสุดซึ่งทำให้การคอมไพล์ขั้นสุดท้ายมีขนาดเล็ก