ตอนนี้ Angular เวอร์ชัน 5.0.0 ออกมาแล้วนะครับ มาดูกันว่ามีอะไรใหม่บ้าง (ขอรวมๆเลยแล้วกันนะ)
1. ตอนนี้หากใครอัปเดต Angular CLI v.1.5 เวลาสร้างโปรเจคใหม่จะเป็น Angular 5 เลยครับ
2. มี preserveWhitespaces ซึ่งเป็น option สำหรับนำ white space ต่างๆ ออกจากโค้ดของ template
แน่นอนทำให้ขนาดไฟล์ bundle ลดลง โดยจะต้องกำหนดให้เป็น false จะกำหนดที่ tsconfig.json หรือในส่วนของ @Component ก็ได้
3. ในส่วนของฟอร์ม จะมี option ใหม่ คือ updateOn ช่วยให้ระบุ events ที่ต้องการตรวจสอบความถูกต้องข้อมูลว่าจะใช้ event อะไร เช่น จะใช้ event blur หรือ submit ก็ได้ โดยจะแทนการใช้ event change แบบเดิมเพื่อให้ประสิทธิภาพดีขึ้น เช่น
<input type=”text” required [(ngModel)]=”userName” name=”userName” [ngModelOptions]=”{updateOn: ‘blur’}”>
4. ส่วนของ Router มีการเพิ่ม lifecycle events ใหม่ เช่น ActivationStart, GuardsCheckStart เป็นต้น
5. มี package service worker ให้ใช้งาน (@angular/service-worker) แต่ยังเป็น beta อยู่
6. ต้องใช้ TypeScript 2.4.x และ RxJS 5.5.2
7. ใครที่ใช้เคยคำสั่ง <template> อยู่ให้เปลี่ยนไปใช้ <ng-template> แทน
8. ใช้ HttpClient ตัวใหม่ ที่มีมาตั้งแต่ Angular 4.3 ส่วนตัวเดิมจะเลิกใช้แล้ว (แนะนำให้ใช้ตัวใหม่เลย)
ใน Angular 5 เราสามารถที่จะใส่ headers หรือ params เป็น object ได้โดยตรงเลย (ไม่ต้อง new class ก็ได้)
เช่น
เดิม
const headers = new HttpHeaders().set(‘Authorization’, ‘codingthailand’);
const params = new HttpParams().set(‘course_id’, ‘1’);
return this.http.get(‘/api/users’, { headers, params });
เขียนใหม่ได้เป็น
const headers = { ‘Authorization’: ‘codingthailand’ };
const params = { ‘course_id’: ‘1’ };
return this.http.get(‘/api/users’, { headers, params });
9. หากใครที่ใช้ pipes เกี่ยวกับ date, currency หรืออื่นๆ ให้ดูการเปลี่ยนแปลงต่างๆด้วยมีการเปลี่ยนหลายจุด
10. RxJS เวอร์ชันใหม่ แนะนำให้ import แบบใหม่นะครับ เช่น จากเดิม
import ‘rxjs/add/observable/of’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/filter’;
เปลี่ยนเป็น
import { of } from ‘rxjs/observable/of’;
import { map, filter } from ‘rxjs/operators’;
สำหรับคนที่ต้องการอัปเกรด ก็ดูได้ที่นี่ : https://goo.gl/KY1569
อ่านการเปลี่ยนแปลงทั้งหมด ได้ที่นี่ : https://goo.gl/RkZegz
ขอให้สนุกกับการเขียนโค้ดครับ
โค้ชเอก
Coding Mentor
Views: 1900