Penulis materi, terjemahan yang kami terbitkan, menyarankan untuk berbicara tentang Angular 8. Di sini kita akan membahas beberapa topik hangat yang diangkat di acara NgConf dan Google I / O 2019. Karena itu, jika Anda tertarik pada Angular, tetapi karena alasan tertentu belum melihat laporan dari dari acara ini, kami yakin Anda akan penasaran untuk mengetahui apa yang dapat Anda harapkan dari Angular 8.
Poin-Poin Utama
Saya yakin bahwa Anda sekarang menantikan Angular 8 dan merasakan perasaan yang sama yang saya alami setelah NgConf 2019. Laporan Igor Minar menyentuh banyak inovasi yang diharapkan - dari alat hingga teknologi seperti pemuatan diferensial dan banyak hal indah lainnya.
Mari kita bahas bagaimana semua ini dapat mempengaruhi proyek Anda. Yaitu, kami akan mempertimbangkan peluang baru dan berbicara tentang apakah penampilan mereka akan mengarah pada pengakuan mekanisme yang ada sebagai usang, atau fakta bahwa yang baru akan tidak sesuai dengan yang lama.
Fitur baru
Loading Pemuatan diferensial
Saat menerapkan teknologi pemuatan diferensial, Angular, selama proses perakitan proyek, dapat membuat bundel terpisah untuk polyfill. Itu tergantung pada file daftar
browserlist . Beginilah tampilannya secara umum.
Di atas adalah cara baru untuk mengemas proyek ( sumber )Menggunakan fitur ini akan mengurangi ukuran bundel.
Menghemat melalui pemuatan diferensial ( sumber )Bagaimana cara kerjanya?
Angular akan mengumpulkan file polyfill tambahan dan mereka akan disematkan dalam kode menggunakan atribut
nomodule :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
Atribut
nomodule , boolean, mencegah skrip dari memuat dan mengeksekusi di browser yang mendukung modul ES6. Browser seperti itu mengabaikan skrip tersebut. Browser yang lebih lama mengunduh dan menjalankannya.
▍SVG Templates
Sekarang file SVG dapat digunakan sebagai templat. Sampai sekarang, HTML yang disematkan atau eksternal dapat digunakan sebagai templat.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
Saya Ivy mesin rendering eksperimental
Mesin Ivy masih dalam tahap percobaan. Setelah merilis Angular 8, Anda dapat mengujinya dengan menggunakan flag
--enable-ivy saat membuat aplikasi baru. Kode yang sesuai ditunjukkan di bawah ini. Ingat bahwa Ivy belum siap (masih dalam status "opt-in preview"), dan, seperti yang dikatakan Igor Minar di NgConf 2019, masih disarankan untuk menggunakan View Engine ketika membuat aplikasi baru.
Untuk mengaktifkan penggunaan Ivy dalam proyek yang ada, Anda perlu mengatur parameter
enableIvy option angularCompilerOptions di
angularCompilerOptions menjadi
true dalam
angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
Anda dapat membuat aplikasi baru di mana Ivy akan digunakan:
$ ng new my-app --enable-ivy
Ivy menawarkan fitur-fitur berguna berikut, tiga yang pertama diharapkan dalam Angular 9:
- Kompilasi lebih cepat.
- Tipe yang ditingkatkan memeriksa templat.
- Mengurangi ukuran bundel. Sekarang , jika Anda belum melihatnya, demonstrasi aplikasi 4,3 Kb dengan Google I / O 19.
- Kompatibilitas mundur.
- Dan fitur favorit saya adalah template debugging. Saya yakin, seperti saya, banyak pengembang membutuhkan ini.
▍Dukungan Bazel
Bazel adalah alat lain yang Google telah pindah ke pasar open source. Igor Minar mengatakan bahwa Bazel telah lama digunakan untuk kebutuhan internal perusahaan, dan sekarang tersedia untuk semua orang. Untuk mengetahui lebih lanjut tentang pembuat proyek ini, periksa
dokumentasi dan baca cara menggunakan Bazel dengan
Angular .
Mungkin Anda sekarang bertanya-tanya apakah Bazel siap untuk penggunaan praktis. Jawablah pertanyaan ini dengan singkat - belum siap. Sekarang dia dalam status "opt-in preview". Izinkan saya mengutip Alex Eagle, yang memimpin tim pengembangan alat Angular di Google: "Jika Anda telah memasuki perairan Bazel sebelumnya, Anda tidak dapat tidak memperhatikan bahwa ada banyak hiu ... Sekarang kami sudah mengelola hiu, tetapi air masih bisa dingin. "
Bazel masih sedang dikerjakan, diharapkan akan dimasukkan dalam
@angular/cli dalam versi 9.
Berikut adalah beberapa fitur bermanfaat yang Bazel dapat berikan kepada kami:
- Mempercepat waktu pembangunan proyek. Build pertama membutuhkan waktu, tetapi build paralel jauh lebih cepat. Angular sudah menggunakan Bazel, dan sekarang rutin CI selesai dalam 7,5 menit, bukan satu jam, seperti sebelum Bazel.
- Majelis proyek tambahan. Dimungkinkan untuk mengumpulkan dan menggunakan bukan seluruh aplikasi, tetapi hanya apa yang telah berubah di dalamnya.
- Kemampuan untuk bekerja dengan file Bazel, yang, secara default, disembunyikan.
Anda dapat menambahkan dukungan Bazel ke proyek yang ada sebagai berikut:
ng add @angular/bazel
Anda dapat membuat aplikasi baru menggunakan Bazel:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
Pembuat ▍API
Versi baru Angular memungkinkan Anda untuk menggunakan Pembuat API, juga dikenal sebagai Arsitek. Angular menggunakan pembangun untuk melakukan operasi dasar:
serve ,
build ,
test ,
lint dan
e2e . Berikut adalah contoh menggunakan assembler dari file
angular.json :
... "projects": { "app-name": { ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", ... }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", ... }, "test": { "builder": "@angular-devkit/build-angular:karma", ... }, "lint": { "builder": "@angular-devkit/build-angular:tslint", ... }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", ... } } } }
Sekarang Anda dapat membuat kolektor Anda sendiri. Saya melihatnya mirip dengan perintah gulp / grunt yang digunakan di masa lalu.
Secara umum, collector hanyalah sebuah fungsi dengan serangkaian perintah yang diteruskan ke metode
createBuilder() dari paket
@angular-devkit/architect :
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
Anda dapat melihat pembangun Angular bawaan di
sini .
Berikut adalah hal-hal hebat tentang mereka di blog Angular.
▍Perubahan dalam pemuatan yang malas
Versi baru Angular juga akan memiliki versi baru dari sistem pemuatan modul malas, yang tampilannya mengarah pada fakta bahwa sintaks yang ada
loadChildren:string akan ditinggalkan.
Sebelumnya, terlihat seperti ini:
loadChildren: './lazy/lazy.module#LazyModule';
Dengan rilis Angular 8 - seperti ini:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Jika Anda memiliki banyak modul saat bekerja dengan mana mekanisme pemuatan malas digunakan, dan Anda ingin mengotomatiskan terjemahannya ke mode operasi baru, lihat materi
ini .
▍Mendukung API $ location AngularJS
Tim pengembang Angular berkomitmen untuk mendukung mereka yang menggunakan AngularJS dan membantu mereka beralih ke Angular. Akibatnya, dukungan untuk layanan
$location telah ditambahkan ke sistem, dalam paket
angular/common/upgrade . Kami berbicara tentang fitur-fitur berikut:
- Mendapatkan status dari layanan
$location . - Pelacakan perubahan alamat.
- Mendapatkan informasi yang sama tentang komponen alamat yang bisa diperoleh di AngularJS (
hostname , protocol , port , search ). - Menguji layanan menggunakan MockPlatformLocation API.
▍ Pekerja Web
Angular 8 menambahkan dukungan untuk pekerja web. Dengan bantuan mereka, Anda dapat mengatur pelaksanaan latar belakang kode sumber daya intensif. Untuk membuat pekerja web baru, Anda dapat menggunakan perintah antarmuka baris perintah Angular berikut:
ng g webWorker <name>
▍ Pekerja Layanan
Sejak baru-baru ini telah ada peningkatan serius dalam popularitas aplikasi web progresif, banyak perbaikan pekerja layanan telah dilakukan. Secara khusus, salah satu perbaikan ini adalah penambahan parameter
SwRegistrationOptions . Peningkatan lainnya adalah dukungan beberapa aplikasi pada domain yang sama.
Baca lebih lanjut tentang pekerja layanan di bagian dokumentasi Angular ini.
▍ Perbaikan Formulir
Metode
markAllAsTouched telah
markAllAsTouched , yang memungkinkan Anda untuk menandai semua elemen di dalam
FormGroup sebagai
touched . Ini sangat berguna dalam kasus di mana Anda perlu menjalankan validasi semua kontrol di dalam
FormGroup . Sebelum itu, hal yang sama dilakukan seperti ini:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
Di Sudut baru, Anda bisa menggunakan metode yang
clear untuk
clear FormArray , yang menghapus semua elemen dari itu. Sebelumnya, perlu menggunakan konstruksi berikut, menghapus elemen pertama di setiap iterasi loop:
while (formArray.length) { formArray.removeAt(0); }
Anda tidak perlu melakukan ini lagi. Sekarang cukup memanggil satu metode:
formArray.clear()
▍Menyiapkan saat menerima respons saat menggunakan arahan ViewChild dan ContentChild
Fitur baru ini menyiratkan penggunaan bendera
static , yang memungkinkan Anda menentukan kapan permintaan diselesaikan, ditentukan oleh arahan
ViewChild atau
ContentChild .
Anda mungkin menemukan contoh perilaku sistem yang tidak konsisten berikut. Kadang-kadang hasil pencarian tersedia dalam metode siklus hidup
ngOnInit , dan kadang-kadang tidak ada sebelum memanggil
ngAfterContentInit atau
ngAfterViewInit . Berikut cara menggunakan flag
static :
Perlu dicatat bahwa fitur-fitur ini tidak tersedia untuk arahan
ViewChildren dan
ContentChildren . Kueri pencarian item yang sesuai dijalankan setelah deteksi perubahan dilakukan.
Saat menggunakan
static: true harus berhati-hati karena menggunakan flag ini tidak akan memungkinkan Anda untuk mendapatkan hasil dari template dinamis (mis. * NgIf). Aturan Skema telah ditambahkan ke sistem, memungkinkan Anda menerjemahkan kode yang ada untuk menggunakan sintaks baru. Sintaks ini akan digunakan dengan Ivy.
→ Detail tentang fitur ini dapat ditemukan di
sini .
▍Mendukung Skrip 3.4.x
Angular sekarang menggunakan TypeScript 3.4 (versi ketujuh Angular menggunakan TypeScript 3.2.x). Tidak ada begitu banyak perubahan besar dalam versi baru TS. Mereka mungkin tidak akan mengarah pada konsekuensi yang tidak menyenangkan.
→ Detail tentang inovasi TS 3.4 dapat ditemukan di
sini .
▍ Peningkatan Kinerja
Dalam kondisi saat ini,
ServerRendererFactory2 membuat instance baru
DomElementSchemaRegistry untuk setiap permintaan, yang cukup mahal dalam hal sumber daya. Sekarang berbagi instance global
DomElementSchemaRegistry akan diselenggarakan.
▍ Menyebarkan aplikasi Angular di hosting Firebase
Jika Anda menggunakan hosting Firebase untuk menggunakan aplikasi Angular, maka Anda pasti akan menyukai inovasi ini. Intinya adalah bahwa sekarang di CLI Angular ada perintah khusus untuk melakukan operasi ini:
ng run [PROJECT_NAME]:deploy
→
Di sini Anda dapat mengetahui lebih lanjut tentang fitur ini.
API yang kedaluwarsa
▍Gunakan jenis apa pun saat bekerja dengan TesBed.get
Metode
TesBed.get memiliki dua tanda tangan. Satu diketik, yang kedua adalah jenis menerima dan mengembalikan
any . Sekarang tanda tangan metode, yang menyediakan untuk penggunaan tipe
any , sudah usang. Anda dapat menggunakan metode ini hanya dengan indikasi jenis tertentu. Ini, misalnya, akan memengaruhi kasus bekerja dengan token string (yang tidak didukung) dan dengan beberapa token lainnya.
Desain yang sebelumnya digunakan:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
Sekarang pendekatan berikut diterapkan:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
▍Menghapus DOKUMEN dari sudut / platform-browser
DOCUMENT dihapus dari paket
@angular/platform-browser . Jika Anda menggunakan
DOCUMENT dari paket ini, Anda harus mulai mengimpornya dari
@angular/common .
▍ Hapus paket angular / http
Paket
@angular/http sudah tidak digunakan lagi di Angular 5, tetapi masih tersedia karena
@angular/platform-server bergantung padanya. Sekarang paket ini dihapus dari daftar paket.
Perubahan kritis
▍ Perbaikan kode otomatis
Sedikit yang tahu bahwa Angular secara otomatis memperbaiki kesalahan ketika menggunakan elemen HTML
tr dan
col .
Dalam kasus
tr koreksi dilakukan jika elemen yang sesuai tidak ada di dalam
thead tbody ,
tfoot atau
thead . Koreksi terdiri dari penempatan otomatis suatu elemen dalam tubuh.
Dalam kasus
col koreksi dilakukan pada kode di mana elemen ini tidak ada di dalam tag
colgroup .
Angular sekarang membiarkan koreksi kesalahan ini pada kebijaksanaan pengembang. Ini dilakukan untuk menghindari konflik dan kesalahan. Akibatnya, mereka yang terbiasa dengan fitur ini perlu menjaga kebenaran kode itu sendiri.
→ Detail tentang ini dapat ditemukan di
sini .
▍ Ganti nama Bahan Sudut
Proyek Material Angular telah berganti nama menjadi Komponen Angular. Nama paket tidak berubah.
Ringkasan
Angular 8 akan segera dirilis. Tim pengembang Angular melakukan pekerjaan dengan baik. Hasil dari upaya mereka memfasilitasi pekerjaan dan kehidupan mereka yang menggunakan Angular. Khususnya, misalnya, dengan setiap versi baru kerangka kerja itu semakin mudah dan lebih mudah untuk beralih dari versi sebelumnya. Di sini, misalnya, seperti apa rasanya dengan Air France.
Waktu yang diperlukan untuk meningkatkan ke versi baru Angular ( sumber )Sebagai hasilnya, kita dapat berharap bahwa transisi dari Angular 7 ke Angular 8 tidak memakan banyak waktu dan tidak memerlukan upaya serius.
Di sini Anda dapat menemukan tutorial langkah demi langkah tentang peningkatan ke versi baru Angular.
Sekitar sebulan yang lalu, Igor Minar
mengatakan bahwa semuanya menunjukkan bahwa 8.0.0 Angular mungkin keluar pada akhir Mei.
Angular 8.0.0-rc.5 dirilis pada
24 Mei.
Masa depan Angular terlihat cukup optimis. Yang lainnya terserah kita.
Pembaca yang budiman! Apa yang Anda harapkan dari Angular 8?
