มีอะไรใหม่ใน Angular เวอร์ชัน 9

ถือเป็นการอัปเดตใหญ่ของ framework ตัวนี้เลยครับ โดยเฉพาะเรื่องของประสิทธิภาพ และเครื่องมือต่างๆ มาดูกันว่ามีอะไรใหม่บ้าง

.
1. มาพร้อมกับ Ivy compiler และ Ivy runtime ตัวใหม่และกำหนดเป็น default มาให้เลย แน่นอนทำให้ app ของเรา build ได้เร็วขึ้น มีขนาดเล็กลง และรันได้เร็วขึ้นกว่าเดิม

(สำหรับ app เล็กๆ ขนาดลดลงราว 30% ส่วน app ขนาดใหญ่ ขนาดลดลงราว 25-40% เลยทีเดียว)

.
2. สำหรับคนที่เขียน unit tests ด้วย TestBed ในเวอร์ชันนี้ปรับปรุงการเขียน test ให้เร็วขึ้นกว่าเดิมราว 40% โดยที่ TestBed จะไม่ recomplie components ใหม่ทั้งหมดเหมือนเวอร์ชันเดิมครับ

.
3. ต้องใช้ TypeScript เวอร์ชัน 3.6 ขึ้นไป (ถ้าอัปเดตจะได้ 3.7 มาอยู่แล้วครับ)

.
4. เอาคลาส Renderer ออกแล้วให้ใช้ Renderer2 แทน
คลาส RenderComponentType แก้เป็น RendererType2
ส่วน RootRenderer แก้เป็น RendererFactory2

.
5. เอาคำสั่ง <ngForm></ngForm> ออกแล้วนะครับ ให้ใช้ <ng-form></ng-form> แทนได้เลย

.
6. การอัปเดต แนะนำให้อัปเดตเป็นเวอร์ชัน 8 ก่อนนะครับ ค่อยมาเป็นเวอร์ชัน 9 ดูการอัปเดตได้ที่นี่ => https://update.angular.io/

.
ส่วนใหญ่ในเวอร์ชันนี้จะเน้นปรับปรุงที่ตัว compiler และ runtime ครับ แต่ก็มีอีกหลายอย่าง ตามไปอ่านได้ที่ blog ของ Angular ได้ที่นี่ครับ => http://bit.ly/372zyw3

.
โค้ชเอก

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

1. ใช้ TypeScript เวอร์ชัน 3.4 ล่าสุด

.
2. เปลี่ยนวิธีเขียน lazy-loading แบบใหม่ (Routing) เพื่อรองรับการใช้งาน Ivy จะแก้โค้ดเองก็ได้ครับ แต่แนะนำให้ใช้คำสั่งอัปเดตจะดีกว่า (ดูข้อ 10) เพราะว่าตัว Angular CLI จะอัปเดตโค้ดส่วนนี้ให้อัตโนมัติเลย

เดิม

{ path: ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’ }

แบบใหม่ แก้เป็น

{ path, ‘admin , loadChildren: () => import(‘./admin/admin.module’).then(m => m.AdminModule) }

.
3. Angular CLI 8 เปลี่ยนมาใช้ dart-sass แทน node-sass ทำให้การ build ไฟล์ Sass เร็วขึ้นอีกมาก ๆ

.
4. Angular CLI 8 จะ default build target เป็น es2015 แทน es5 เดิมแล้วนะครับ (ดูได้ที่ไฟล์ tsconfig.json)
ทำให้ต่อไปเวลาสั่ง ng build จะมีไฟล์ build เพิ่มมาอีก 2 เวอร์ชัน ครับ คือ es2015 และ es5 ถ้าโปรเจคเราเปิดด้วย Browsers สมัยใหม่ ก็จะเรียกไฟล์ build ที่่เป็น es2015 ครับ (ตอน runtime) แต่ถ้าเปิดด้วย IE 9-11 ก็จะเปลี่ยนมาใช้ไฟล์ build ที่เป็น es5 แทน (แน่นอนไฟล์ที่ build ด้วย es5 จะมีขนาดใหญ่กว่า es2015 ครับผม)

อีกประเด็นที่สำคัญคือเรื่องของ CSS ถ้าหากใครที่ใช้ IE 9-11 อยู่ ก่อนที่จะ build โปรเจค อย่าลืมไปเปิดใช้งาน autoprefixer ด้วยโดยลบคำว่า not ออกจากบรรทัด not IE 9-11 ที่ไฟล์ browserslist ครับผม

.
5. ใน Angular 8 รองรับการใช้งาน compiler (และ runtime) ตัวใหม่ที่ชื่อว่า Ivy ทำให้ประสิทธิภาพของโปรเจค Angular เราดีขึ้นมาก แนะนำให้ใช้ได้เลยนะครับ
สามารถทำได้ตอนสร้างโปรเจคใหม่ ด้วยคำสั่ง ดังนี้

ng new project –enable-ivy

ถ้าใครอัปเกรดมาจากเวอร์ชันก่อนหน้า ก็ไปตั้งค่าที่ไฟล์ tsconfig.app.json ได้ครับ ในส่วนของ compilerOptions เพิ่มคำสั่งดังนี้

“angularCompilerOptions”: {
“enableIvy”: true
}

*อนาคตตัวนี้จะถูกเปิดโดย default ใน Angular เวอร์ชัน 9 เลย

.
6. เพิ่ม method ชื่อว่า clear() ให้กับ FormArray คือ ไม่ต้อง loop ลบ controls เองเหมือนแต่ก่อน ตัวอย่าง

const products = fb.array([product1, product22]);
products.clear();

.
7. รองรับการเขียน Web Worker ซึ่งเป็นอีกทางที่จะทำให้โปรเจคเราเร็วขึ้นได้ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/web-worker

.
8. จะมีเลิกใช้ @angular/platform-webworker เร็วๆนี้ครับ และเอา package @angular/http ออกเป็นที่เรียบร้อยแล้ว (ใช้ @angular/common/http แทน)

ใครอยากดูว่า Angular จะเอาอะไรออกบ้างในอนาคต ดูได้ตามลิงก์นี้ได้ครับจะเตรียมตัวไว้ => https://angular.io/guide/deprecations

.
9. มี CLI Builders เพิ่มเข้ามาใหม่ เผื่อใครอยาก custom คำสั่ง command line ต่างๆ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/cli-builder

.
10. สำหรับคนที่เรียนคอร์สเรียนออนไลน์ไปแล้ว (ถ้าใช้ Angular เวอร์ชัน 7) สามารถอัปเดตเป็น Angular 8 ได้เลยนะครับ (อย่าลืม backup โปรเจคเดิมด้วยนะ) ด้วยคำสั่ง

ng update @angular/cli @angular/core

รันเลย! ยินดีด้วยโปรเจคของเราอัปเกรดเป็น Angular 8 เรียบร้อย ฮ่าๆ ง่ายมาก

.
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก

Angular 6 ตัวจริงออกมาให้ใช้ และอัปเดตกันแล้วครับ!

Angular 6 ตัวจริงออกมาให้ใช้ และอัปเดตกันแล้วครับ! รวมถึงเครื่องมือต่างๆด้วย ในเวอร์ชันนี้จะเป็น Long Term Support (LTS) ให้ใช้กันได้ยาวๆ มาดูกันว่ามีอะไรน่าสนใจบ้าง…

.
1. เราสามารถสร้าง Custom elements ด้วย Angular Elements ได้ ดูรายละเอียดเพิ่มที่นี่ => http://bit.ly/2HPsn2M

.
2. Ivy Renderer เป็น view renderer ตัวใหม่ ทำให้โปรเจคที่ build มีขนาดเล็กลง และแน่นอนทำให้เร็วมากขึ้น (ตอนนี้ ivy กำลังพัฒนาอยู่ น่าจะตัวจริงมาให้ใช้เร็วๆนี้ แต่ถ้าใครอยากลองทดสอบดูก่อน ก็สามารถเปิดใช้งาน ivy ได้นะครับ)

.
3. เราสามารถสร้าง UI components ของเราเองได้โดยใช้ Component Dev Kit หรือ CDK

.
4. เราสามารถสร้าง Library ของเราเองได้ โดยตัว Angular CLI จะมีคำสั่ง ng generate library <ชื่อ lib> มาให้ครับ
เวลาเรา build เสร็จแล้วจะใช้ในโปรเจคของเราก็ได้ หรือจะ publish ไปให้คนอื่นใช้ก็ได้เช่นเดียวกัน
=> http://bit.ly/2rkgtn2

.
5. Angular CLI เพิ่มคำสั่ง ng update เข้ามาครับทำให้โปรเจคของเราใหม่อยู่เสมอ ดูเพิ่มเติมได้ที่ => http://bit.ly/2HKpC2y

.
6. Angular CLI เพิ่มคำสั่ง ng add ทำให้เราสามารถติดตั้งไลบรารี หรือ package ของ Angular ได้ง่ายขึ้น และลดขั้นตอนการ setup package ต่างๆ พูดง่ายๆ คือ เวลาติดตั้งเสร็จเราก็สามารถใช้งานได้เลยโดยไม่ต้องตั้งค่าให้ยุ่งยาก

ยกตัวอย่างเช่น ถ้าเราอยากใช้ package Bootstrap 4 components ก็รันคำสั่ง ng add @ng-bootstrap/schematics เป็นต้น

.
7. Angular CLI ทำให้โปรเจคของเราเป็น PWA ได้ง่ายขึ้นครับ แทบไม่ต้องตั้งค่าอะไรเลย เพียงใช้คำสั่ง ng add @angular/pwa ก็เรียบร้อย (ตอน build อย่าลืมใส่ –prod ด้วยนะ)

.
8. สำหรับคนที่ใช้ Angular Material จะมี Starter Components มาให้ใช้สำเร็จรูปเลย เช่น ถ้าสั่งรัน ng generate @angular/material:material-nav
ก็จะได้เมนูด้านข้างมาในทันที

.
9. มาพร้อมกับ RxJS ^6.0.0 ครับ

.
สำหรับคนที่่อยากอัปเดต จะใช้คำสั่ง ng update ก็ได้ หรือจะไปดูรายละเอียดการอัปเดตได้ที่เว็บนี้ครับ => https://update.angular.io/

.
อ่านละเอียดต่างๆ อ่านเพิ่มเติมได้ที่นี่ => http://bit.ly/2rkmBuL

.
หากดูกันจริงๆแล้ว ส่วนใหญ่ในเวอร์ชันนี้จะเป็นการเปลี่ยนแปลงภายใน และเครื่องมือต่างๆ ครับ ไม่ได้มีการเปลี่ยนแปลงใหญ่ๆ ในส่วนของการ coding มากนัก

มีอะไรใหม่ใน Angular เวอร์ชัน 5

ng5

ตอนนี้ 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

สรุป 13 คำสั่ง การใช้งาน Angular CLI ที่ใช้บ่อยๆ ครับ

Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่าย และยังช่วยจัดโครงสร้างและโค้ดให้ถูกต้องตามหลักของ Best Practices อีกด้วย ถ้าใครจะเริ่มเขียน Angular ก็แนะนำให้ใช้ และศึกษาได้เลยครับ 🙂

.
1. ติดตั้ง Angular CLI (แบบ global) ด้วยคำสั่ง
npm install -g @angular/cli

.
2. ดู help ทั้งหมดของ Angular CLI ด้วยคำสั่ง
ng help

.
3. ดูเวอร์ชัน Angular CLI ด้วยคำสั่ง
ng -v

.
4. เปิดดู doc และค้น keyword ในเว็บ angular.io ด้วยคำสั่ง
ng doc [คำที่ต้องการค้น]

.
5. สร้างโปรเจคใหม่ ด้วยคำสั่ง
ng new [ชื่อโปรเจค]
Options ที่น่าสนใจ
5.1 –skip-install หากยังไม่ต้องการติดตั้ง packages ต่างๆ
5.2 –skip-tests หากไม่ต้องการให้สร้างไฟล์ test (spec files)
5.3 –routing หากต้องการให้สร้าง routing module แยกต่างหาก
5.4 –prefix [ข้อความ prefix] ตั้ง default selector prefix ของทุก components
5.5 –skip-git หากไม่ต้องการเพิ่มโปรเจคเข้าไปใน git
ตัวอย่างการใช้
ng new MyProject –routing –style sass prefix hello –skip-git

.
6. หากต้องการ set ค่า config ต่างๆ ในภายหลัง (ในไฟล์ .angular-cli.json) ใช้คำสั่ง
ng set เช่น ng set defaults.styleExt sass
* ใช้ -g ต่อท้าย สำหรับ global set

.
7. ตรวจสอบความถูกต้อง และจัดการโค้ด typescript ที่เราเขียน ด้วยคำสั่ง
ng lint

.
8. สร้าง หรือ gen ไฟล์ blueprint ด้วยคำสั่ง
ng generate หรือ ng g
เช่น หากต้องการสร้าง component ก็ให้ใช้คำสั่ง ng generate component <ชื่อ component> หรือ ng g c <ชื่อ component>
หรือถ้าต้องการสร้าง module และ routing module ด้วย ก็ให้ใช้คำสั่ง ng g m <ชื่อ module> –routing
หรือต้องการสร้าง Routing Guard ก็ใช้คำสั่ง ng generate guard <ชื่อ guard>

.
9. Serve โปรเจค ด้วยคำสั่ง
ng serve
Options ที่น่าสนใจของ ng serve
9.1 –open หรือ -o ไว้เปิด default browser เช่น ng serve -o
9.2 –port หรือ -p ระบุ port ที่ต้องการ เช่น ng serve -p 8626

.
10. Build โปรเจค (Development Build) ด้วยคำสั่ง
ng build

.
11. Build โปรเจค (Production Build) ด้วยคำสั่ง
ng build –prod

.
12. Unit Tests (Karma) ด้วยคำสั่ง
ng test

.
13. End to End Tests (Protractor) ด้วยคำสั่ง
ng e2e