Apa yang ada di dalam Angular 8?

Sep 11, 2025
Bagaimana caranya
Angular 8
(Kredit Gambar: Masa Depan)

Angular 8 adalah versi terbaru dari Angular Google - salah satu Kerangka JavaScript Terbaik sekitar. Dalam artikel ini, kami akan menjalankan apa yang istimewa tentang sudut 8, dan menunjukkan kepada Anda bagaimana memulai. Pertama, lihat kembali pada apa yang terjadi dengan kerangka itu sejauh ini.

Pendahuluan Angular menyebabkan pergeseran paradigma dalam pengembangan web: Sementara sebagian besar perpustakaan membatasi diri untuk memberikan dukungan kepada pengembang dengan dampak arsitektur yang relatif terbatas, tim pengembang Angular pergi ke arah lain. Produk mereka memaksa Anda untuk menggunakan arsitektur tertentu, dengan penyimpangan mulai dari yang sulit hingga tidak ada gunanya secara komersial. Bahkan, sebagian besar kode sudut mengalir melalui alat transpilasi yang relatif kompleks sebelum itu pernah mengenai browser.

Karena keberhasilan sudut yang sangat besar, baik di dalam maupun di luar Google Inc, pembangunan memiliki - oleh dan besar - stabil. Ini berarti bahwa perubahan kode putus adalah sedikit, sedangkan upgrade semi-tahunan difokuskan pada mengadaptasi kerangka kerja ke perubahan dalam lanskap penjelajahan web.

Dalam kasus sudut 8, misalnya, kompiler javascript baru dikerahkan (meskipun masih eksperimental). Ini mengoptimalkan kode kompatibilitas yang dihasilkan untuk secara signifikan lebih kecil dan lebih cepat dengan mengorbankan browser yang lebih tua. Selanjutnya, dukungan pekerja web diintegrasikan untuk meningkatkan kemampuan pemrosesan Angular. Singkatnya, ada banyak yang bisa dilihat - jadi mari kita terjun.

Jika Anda lebih suka merancang situs tanpa kode, coba salah satunya mudah Pembangun situs web . Dan untuk membuat segalanya berjalan lebih halus, dapatkan hosting web. Layanan yang tepat.

01. Jalankan pemeriksaan versi

Toolchain Angular hidup di dalam lingkungan nodejs. Pada tulisan ini, node.js 10.9 atau lebih baik diperlukan - jika Anda menemukan diri Anda pada versi yang lebih lama, Kunjungi situs web Node.js dan dapatkan upgrade. Kode di bawah ini menunjukkan status versi pada mesin ini. 

 TAMHAN @ TAMHAN18: ~ $ NODE -V
v12.4.0.
Tamhan @ Tamhan18: ~ $ NPM -V
6.9.0

02. Instal Angular.

Toolchain Angular berada dalam utilitas baris perintah bernama ng. . Ini dapat diinstal melalui NPM yang terkenal. 

 Tamhan @ tamhan18: ~ $ sudo npm install -g @ angular / cli
TAMHAN @ TAMHAN18: ~ $ NG VERSI

Hati-hati untuk menjawab pertanyaan yang ditunjukkan pada gambar di bawah ini.

Click the icon in the top right to enlarge

Klik ikon di kanan atas untuk memperbesar (Kredit Gambar: Tam Hanna)

Mendapatkan info versi dari alat cukup sulit - tidak hanya sintaks yang unik, tetapi outputnya juga verbose (lihat gambar di bawah).

Click the icon in the top right to enlarge

Klik ikon di kanan atas untuk memperbesar (Kredit Gambar: Tam Hanna)

03. Buat Skeleton Proyek

ng. menghasilkan perancah sudut untuk kita. Dalam langkah-langkah berikut, kami ingin menambahkan routing, dan menggunakan SASS untuk transpilasi CSS. Jika penyebaran gagal karena alasan tertentu, kosongkan direktori kerja, dan restart ng. dengan hak superuser. 

 Tamhan @ Tamhan18: ~ $ mkdir Angularspace
Tamhan @ Tamhan18: ~ $ CD Angularspace /
Tamhan @ Tamhan18: ~ / Angularspace $ NG NEW CLEALSTEST

04. Memperbaiki pemuatan diferensial

Versi baru sudut mengoptimalkan kode kompatiblititas mundur untuk dampak berkurang - file yang disebut browserlist. Memungkinkan Anda memutuskan browser mana yang akan didukung. Buka browserlist. dan menghapus kata tidak di depan IE 9 ke IE11. 

. . .
& gt; 0,5%
2 versi terakhir
Firefox ESR.
tidak mati
IE 9-11 # untuk IE 9-11 Dukungan, hapus 'tidak'.

05. ... dan lihat hasilnya

Pesan kompilasi proyek, ubah ke folder distribusi dan bersihkan file peta yang tidak dibutuhkan. 

 TAMHAN @ TAMHAN18: ~ / AngularSpace / WorkerTest $
Sudo Ng Build.
TAMHAN @ TAMHAN18: ~ / AngularSpace / WorkerTest / Dist / WorkerTest $ LS

Memohon pohon untuk melihat hasilnya - ng. Membuat beberapa versi berbagai file kode (lihat gambar di bawah).

Click the icon in the top right to enlarge

Klik ikon di kanan atas untuk memperbesar (Kredit Gambar: Tam Hanna)

06. Membumbui pekerja web

Web pekerja biarkan Javascript memasuki perbatasan terakhir aplikasi asli: pemrosesan tugas yang paralel secara besar-besaran. Dengan Angular 8, seorang pekerja web dapat dibuat langsung dari kenyamanan ng. Utilitas baris perintah. 

 TAMHAN @ TAMHAN18: ~ / AngularSpace / WorkerTest $
sudo ng menghasilkan pekerja web myworker
Buat tsconfig.worker.json (212 byte)
Buat SRC / App / MyWorker.worker.ts (157 byte)
Perbarui tsconfig.app.json (236 byte)
Perbarui Angular.json (3640 bytes)

07. Jelajahi kode

ng. Output kemungkinan terlihat intimidasi pada pandangan pertama. Membuka file src / app / myworker.worker.ts di sebuah Editor Kode pilihan mengungkapkan kode yang harus Anda ketahui dengan baik dari Webworker. spesifikasi. Pada prinsipnya, pekerja menerima pesan dan memprosesnya sesuai kebutuhan. 

 /// & lt; referensi lib = "webworker" / & gt;
AddeviveListener ('pesan', ({data}) = & gt; {
 Const Response = `Respons pekerja untuk
$ {data} `;
 postmessage (respons);
});

08. SET UP SCAFFOLDING

Aplikasi sudut terdiri dari komponen. Menembakkan pekerja web kami paling baik dilakukan di dalam AppComponent. , yang diperluas untuk memasukkan pendengar untuk Oninit. peristiwa. Untuk saat ini, itu hanya akan memancarkan informasi status. 

 Impor {komponen, oninit} dari '@ angular / core';
@Komponen({
. . .
})
Kelas Ekspor AppComponent mengimplementasikan oninit {
 title = 'workerest';
 ngoninit () {
   konsol.log ("appComponent: oninit ()");
 }
}

09. Jangan khawatir tentang kurangnya konstruktor

Pengembang naskah yang berpengalaman bertanya pada diri sendiri mengapa kode kami tidak menggunakan konstruktor yang disediakan oleh bahasa pemrograman. Alasan untuk itu adalah itu ngoninit. adalah peristiwa siklus hidup yang dipecat setiap kali acara inisialisasi terjadi - ini tidak perlu dikorelasikan dengan doa kelas.

10. Jalankan Kompilasi Kecil

Pada saat ini, program ini siap untuk dijalankan. Kami akan mengeksekusi dari server di dalam ng. , yang dapat dipanggil melalui perintah Sajikan. Aspek yang rapi dari pendekatan ini adalah bahwa program mendeteksi perubahan dan mengkompilasi ulang proyek dengan cepat. 

 TAMHAN @ TAMHAN18: ~ / AngularSpace / WorkerTest $
sudo ng melayani

Lihatlah angka untuk melihat ini beraksi dalam gambar di bawah ini.

Hit the icon in the top right to enlarge the image

Tekan ikon di kanan atas untuk memperbesar gambar (Kredit Gambar: Tam Hanna)

11. ... dan temukan output

Ng Sajikan Putputs alamat server web lokalnya, yang biasanya http: // localhost: 4200 / . Buka halaman web dan buka alat pengembang untuk melihat output status. Perlu diingat itu konsol.log. Menghasilkan data ke konsol browser dan meninggalkan konsol instance nodejs tidak tersentuh.

12. Mulai bekerja

Pada titik ini, kami membuat instance dari pekerja dan menyediakannya dengan pesan. Hasilnya kemudian ditampilkan di konsol browser. 

 Jika (Pekerja Type! == 'tidak terdefinisi') {
 // Buat yang baru
 const worker = pekerja baru ('./ myworker.worker', {tipe: 'modul'});
 pekerja.onmessage = ({data}) = & gt; {
   konsol.log ('halaman mendapat pesan: $ \
{data\}');
 };
 pekerja.postmessage ('halo');
} lain {
     konsol.log ("tidak ada dukungan pekerja");
}

13. Jelajahi Ivy.

Versi Angular Masa Depan akan menggunakan kompiler yang lebih maju, yang mengarah ke pandangan yang lebih kecil. Sementara produk belum selesai, kerangka yang diaktifkan ivy dapat ditelurkan melalui NG New Ivy-Project - Enable-Ivy . Atau, ubah pengaturan kompiler seperti yang ditunjukkan pada cuplikan. 

 "AngularCompileroptions": {
       "Aktifkan": Benar
}

Sepatah kata peringatan: ivy mengarah pada pengurangan ukuran yang luar biasa, tetapi tidak gratis. Produk belum stabil, jadi menggunakannya di lingkungan yang produktif tidak dianjurkan.

14. Coba pemrosesan NG yang dimodifikasi

Angular's. ng. Alat baris perintah menggunakan skrip anak secara internal untuk beberapa waktu. Angular 8 UPS Taruhan yang Anda bisa sekarang, juga, gunakan fasilitas ini untuk menjalankan tugas Anda sendiri karena aplikasi Anda dirakit dan dikompilasi. 

 "Arsitek": {
       "Build": {
         "Builder": "@ angular-devkit /
Build-Angular: Browser ",

Satu aplikasi rapi ng. Script melibatkan langsung mengunggah aplikasi ke layanan cloud. Itu Git repositori Memberikan skrip yang bermanfaat yang mengunggah pekerjaan Anda ke akun Firebase.

15. Nikmati peningkatan migrasi

Pengembang bermigrasi jauh dari sudut 1.x, juga dikenal sebagai AngularJs, telah memiliki bagian yang adil dari masalah yang membuat Navigator bekerja tepat di aplikasi 'gabungan'. Layanan lokasi terpadu baru bertujuan untuk membuat proses ini lebih lancar.

16. Jelajahi Kontrol Ruang Kerja

Proyek besar mendapat manfaat dari kemampuan untuk mengubah struktur ruang kerja secara dinamis. Ini dilakukan melalui API Workspace baru yang diperkenalkan dalam Angular 8.0 - Cuplikan yang menyertai langkah ini memberikan gambaran singkat tentang perilaku tersebut. 

 fungsi async menunjukkan () {
   const host = ruang kerja.
CreateWorkspacehost (nodejssynchost ());
   Conspace Conspace = menunggu ruang kerja.
Readworkspace ('path / to / workspace / direktori /',
tuan rumah);
   Const Project = Workspace.Projects.
Dapatkan ('My-App');
   constttarget = proyek.targets.
dapatkan ('membangun');
   buildtarget.Options.Optimisasi = Benar;
   menunggu workspaces.writeworkspace (ruang kerja,
tuan rumah);
}

17. Mempercepat prosesnya

Membangun basis kode JavaScript besar menjadi membosankan. Versi masa depan AngularJS akan menggunakan sistem Bazel Build Google untuk mempercepat proses - sayangnya, pada saat penulisan itu tidak siap untuk primetime.

18. Hindari orang mati berjalan

Meskipun Google terlalu berhati-hati untuk tidak merusak kode, beberapa fitur hanya perlu dihapus karena tidak lagi diperlukan. Memeriksa Daftar Penyusutan Ini Untuk mempelajari lebih lanjut tentang fitur yang harus dihindari.

19. Lihatlah log perubahan

Seperti biasa, satu artikel tidak pernah bisa melakukan keadilan untuk seluruh rilis. Untung, log perubahan ini Memberikan daftar terperinci dari semua perubahan - kalau-kalau Anda merasa ingin memeriksa denyut nadi fitur terutama bagi Anda.

Punya banyak file yang siap diunggah ke situs Anda? Mendukung mereka di paling dapat diandalkan penyimpanan awan .

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web .

Baca lebih lajut:

  • Tambahkan dukungan multi-bahasa ke sudut
  • API JavaScript terbaik
  • Cara kode lebih cepat, lebih ringan JavaScript

Bagaimana caranya - Artikel Terpopuler

Lembar Karakter untuk Modeller 3D: 15 Tips Top

Bagaimana caranya Sep 11, 2025

(Kredit Gambar: Dahlia Khodur) Lembar Karakter adalah urutan hari dalam tutorial ini, yang mencakup cara membuat satu..

Bangun UI yang dikendalikan suara

Bagaimana caranya Sep 11, 2025

Kami telah melihat banyak API baru yang ditambahkan ke web selama beberapa tahun terakhir yang benar-benar mengaktifkan konten web untuk memiliki fungsi yang sama dengan banyak aplikasi untuk..

Buat efek teks goyah dengan JavaScript

Bagaimana caranya Sep 11, 2025

Memperkenalkan efek pada teks dan tipografi dapat menambah perspektif yang sama sekali baru pengalaman pengguna di..

Buat karakter Anda muncul dengan warna dan cahaya

Bagaimana caranya Sep 11, 2025

Saya sangat suka bekerja dalam warna, apakah itu masuk Photoshop CC. atau melukis secara tradisional dengan cat ai..

Bagaimana cara melukis kehidupan bunga yang dinamis

Bagaimana caranya Sep 11, 2025

Warna dan tekstur menawarkan cara yang sempurna untuk memberikan semangat bagi kehidupan bunga. Demonstrasi ini menunjukkan bagai..

Kembangkan keterampilan karikatur Anda

Bagaimana caranya Sep 11, 2025

Ketika saya memutuskan untuk menjadi ilustrator freelance paruh waktu dan caricaturis beberapa tahun yang lalu, saya punya banyak..

mempercepat pemodelan 3D Anda

Bagaimana caranya Sep 11, 2025

Tutorial ini mencakup proses membangun aset - dalam hal ini a Desain Spaceship - Dengan tingkat kompleksitas yang ..

Cara menggabungkan peta perpindahan yang dipahat dan dilukis

Bagaimana caranya Sep 11, 2025

Kadang-kadang lebih efisien untuk menggabungkan berbagai peta perpindahan pada waktu render, daripada memahat semuanya. Contoh um..

Kategori