Kandungan
- 01. Jalankan pemeriksaan versi
- 02. Pasang Angular
- 03. Buat rangka projek
- 04. Beban pembezaan memanfaatkan
- 05. ... dan lihat hasilnya
- 06. Menelurkan pekerja web
- 07. Terokai kodnya
- 08. Siapkan perancah
- 09. Jangan risau tentang kekurangan konstruktor
- 10. Jalankan larian kompilasi kecil
- 11. ... dan cari outputnya
- 12. Sampai di tempat kerja
- 13. Terokai Ivy
- 14. Cuba pemprosesan ng yang diubah suai
- 15. Nikmati penghijrahan yang lebih baik
- 16. Terokai kawalan ruang kerja
- 17. Mempercepat proses
- 18. Elakkan berjalan kaki mati
- 19. Lihat log perubahan
Angular 8 adalah versi terbaru Google Angular - salah satu kerangka kerja JavaScript terbaik. Dalam artikel ini, kami akan membahas apa yang istimewa mengenai Angular 8, dan menunjukkan kepada anda cara memulakannya. Pertama, melihat kembali apa yang berlaku dengan rangka kerja setakat ini.
Pengenalan Angular membawa kepada perubahan paradigma dalam pembangunan web: sementara kebanyakan perpustakaan mengehadkan diri untuk memberikan sokongan kepada pembangun dengan kesan seni bina yang agak terhad, pasukan pemaju Angular menuju ke arah lain. Produk mereka memaksa anda untuk menggunakan seni bina tertentu, dengan penyimpangan dari yang sukar hingga yang tidak berguna secara komersial. Sebenarnya, kebanyakan kod Angular berjalan melalui rantai alat transpilasi yang agak rumit sebelum menyentuh pelayar.
Oleh kerana kejayaan besar Angular, baik di dalam maupun di luar Google Inc, pembangunan telah - secara umum - stabil. Ini bermaksud bahawa perubahan kod pemecahan adalah sedikit, sementara peningkatan separuh tahunan difokuskan pada penyesuaian kerangka kerja untuk perubahan dalam landskap pelayaran web.
Dalam kes Angular 8, misalnya, penyusun JavaScript baru digunakan (walaupun masih eksperimen). Ia mengoptimumkan kod keserasian yang dihasilkan menjadi lebih kecil dan lebih cepat dengan mengorbankan penyemak imbas yang lebih lama. Tambahan pula, sokongan Web Worker disatukan untuk meningkatkan kemampuan pemprosesan Angular. Ringkasnya, ada banyak yang dapat dilihat - jadi mari kita selami.
Sekiranya anda lebih suka merancang laman web tanpa kod, cubalah salah satu pembangun laman web yang mudah ini. Dan untuk menjadikan semuanya berjalan dengan lebih lancar, dapatkan perkhidmatan hosting web anda dengan betul.
01. Jalankan pemeriksaan versi
Rantai alat Angular hidup di dalam persekitaran NodeJS. Pada penulisan ini, Node.js 10.9 atau lebih baik diperlukan - jika anda berada di versi yang lebih lama, lawati laman web Node.js dan dapatkan peningkatan. Kod di bawah menunjukkan status versi pada mesin ini.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Pasang Angular
Rantai alat Angular berada dalam utiliti baris perintah bernama ng. Ia boleh dipasang melalui NPM yang terkenal.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versi
Berhati-hati untuk menjawab soalan yang ditunjukkan dalam gambar di bawah.
Mendapatkan maklumat versi dari alat ini agak sukar - bukan hanya sintaksnya unik, tetapi outputnya juga verbose (lihat gambar di bawah).
03. Buat rangka projek
ng menghasilkan perancah sudut untuk kita. Pada langkah-langkah berikut, kami ingin menambahkan routing, dan menggunakan Sass untuk transpilasi CSS. Sekiranya penyebaran gagal untuk beberapa sebab, kosongkan direktori yang berfungsi, dan mulakan semula ng dengan hak superuser.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng pekerja baru
04. Beban pembezaan memanfaatkan
Versi baru Angular mengoptimumkan kod kesesuaian belakang untuk mengurangkan kesan - fail yang dipanggil senarai penyemak imbas membolehkan anda memutuskan penyemak imbas mana yang akan disokong. Buka senarai penyemak imbas dan membuang perkataan tidak di hadapan IE 9 hingga IE11.
. . . > 0.5% 2 versi terakhir Firefox ESR tidak mati IE 9-11 # Untuk sokongan IE 9-11, alih keluar 'tidak'.
05. ... dan lihat hasilnya
Perintahkan kompilasi projek, ubah ke folder pengedaran dan bersihkan fail peta yang tidak diperlukan.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Memohon pokok untuk melihat hasilnya - ng mencipta pelbagai versi dari pelbagai fail kod (lihat gambar di bawah).
06. Menelurkan pekerja web
Pekerja web membiarkan JavaScript memasuki sempadan terakhir aplikasi asli: pemprosesan tugas selari secara besar-besaran. Dengan Angular 8, pekerja web dapat dibuat terus dari keselesaan ng utiliti baris arahan.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng menghasilkan myworker pekerja web CREATE tsconfig.worker.json (212 byte) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bait ) KEMASKINI angular.json (3640 bait)
07. Terokai kodnya
ngHasilnya nampaknya kelihatan menakutkan pada pandangan pertama. Membuka fail src / app / myworker.worker.ts dalam penyunting kod pilihan menunjukkan kod yang anda harus tahu dengan baik dari Pekerja Web spesifikasi. Pada prinsipnya, pekerja menerima mesej dan memprosesnya mengikut keperluan.
/// referensi lib = "webworker" /> addEventListener ('message', ({data}) => {const respon = `respons pekerja terhadap $ {data}`; postMessage (respons);});
08. Siapkan perancah
Aplikasi sudut terdiri daripada komponen. Pemecatan pekerja web kami adalah yang terbaik dilakukan di dalam Komponen Aplikasi, yang diperluas untuk memasukkan pendengar untuk OnInit peristiwa. Buat masa ini, ia hanya akan memancarkan maklumat status.
import {Component, OnInit} dari '@ angular / core'; @Component ({...}) Kelas eksport AppComponent menerapkan OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Jangan risau tentang kekurangan konstruktor
Pembangun TypeScript yang berpengalaman bertanya kepada diri sendiri mengapa kod kami tidak menggunakan konstruktor yang disediakan oleh bahasa pengaturcaraan. Sebabnya ialah ngOnInit adalah peristiwa kitaran hidup yang dipecat setiap kali peristiwa inisialisasi berlaku - ini tidak perlu dihubungkan dengan pemanggilan kelas.
10. Jalankan larian kompilasi kecil
Pada masa ini, program siap dijalankan. Kami akan melaksanakannya dari pelayan di dalam ng, yang boleh dipanggil melalui perintah servis. Aspek yang rapi dari pendekatan ini adalah bahawa program ini mengesan perubahan dan menyusun semula projek dengan cepat.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng lay
Lihatlah gambar untuk melihat tindakan ini dalam gambar di bawah.
11. ... dan cari outputnya
ng berkhidmat meletakkan alamat pelayan web tempatannya, yang biasanya http: // localhost: 4200 /. Buka laman web dan buka alat pembangun untuk melihat output status. Perlu diingat bahawa konsol.log mengeluarkan data ke konsol penyemak imbas dan membiarkan konsol instance NodeJS tidak disentuh.
12. Sampai di tempat kerja
Pada masa ini, kami membuat contoh pekerja dan memberikannya mesej. Hasilnya kemudian ditunjukkan di konsol penyemak imbas.
if (typeof Worker! == 'undefined') {// Buat pekerja tetap = Pekerja baru ('./ myworker.worker', {type: 'module'}); pekerja.onmessage = ({data}) => {console.log (halaman mendapat mesej: $ {data } '); }; pekerja.postMessage ('hello'); } lain {console.log ("Tiada sokongan pekerja"); }
13. Terokai Ivy
Versi Angular masa depan akan menggunakan penyusun yang lebih maju, yang membawa kepada pandangan yang lebih kecil. Walaupun produknya belum selesai, kerangka ivy dapat dilahirkan melalui ng projek ivy baru - aktifkan-ivy. Sebagai alternatif, ubah tetapan penyusun seperti yang ditunjukkan dalam coretan.
"angularCompilerOptions": {"allowIvy": true}
Kata peringatan: Ivy membawa kepada pengurangan saiz yang luar biasa, tetapi ia tidak percuma. Produk belum stabil, jadi tidak digalakkan menggunakannya di persekitaran yang produktif.
14. Cuba pemprosesan ng yang diubah suai
Sudut ng alat baris arahan digunakan skrip kanak-kanak secara dalaman untuk beberapa waktu. Angular 8 menaikkan ante di mana anda sekarang juga dapat menggunakan kemudahan ini untuk menjalankan tugas anda sendiri semasa aplikasi anda dipasang dan disusun.
"arkitek": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Satu aplikasi kemas ng skrip melibatkan memuat naik aplikasi secara langsung ke perkhidmatan cloud. Repositori Git menyediakan skrip berguna yang memuat naik karya anda ke akaun Firebase.
15. Nikmati penghijrahan yang lebih baik
Pembangun yang berhijrah dari Angular 1.x, juga dikenali sebagai AngularJS, mempunyai banyak masalah yang menjadikan navigator berfungsi dengan betul dalam aplikasi 'gabungan'. Perkhidmatan Lokasi Bersatu yang baru bertujuan untuk menjadikan proses ini lebih lancar.
16. Terokai kawalan ruang kerja
Projek besar mendapat keuntungan dari kemampuan mengubah struktur ruang kerja secara dinamik. Ini dilakukan melalui API Ruang Kerja baru yang diperkenalkan di Angular 8.0 - coretan yang menyertakan langkah ini memberikan gambaran ringkas mengenai tingkah laku.
fungsi async menunjukkan () {const host = ruang kerja. createWorkspaceHost (NodeJsSyncHost baru ()); const ruang kerja = tunggu ruang kerja. readWorkspace ('jalan / ke / ruang kerja / direktori /', hos); projek const = ruang kerja.projek. dapatkan ('aplikasi saya'); const buildTarget = projek.targets. dapatkan ('bina'); buildTarget.options.optimization = true; tunggu ruang kerja.writeWorkspace (ruang kerja, hos); }
17. Mempercepat proses
Membina pangkalan kod JavaScript yang besar akan membosankan. Versi masa depan AngularJS akan menggunakan sistem bazel Google untuk mempercepat proses - sayangnya, pada masa penulisannya tidak siap untuk permulaan.
18. Elakkan berjalan kaki mati
Walaupun Google sangat berhati-hati untuk tidak memecahkan kod, beberapa ciri hanya perlu dikeluarkan kerana tidak lagi diperlukan. Lihat senarai susut nilai ini untuk mengetahui lebih lanjut mengenai ciri-ciri yang harus dielakkan.
19. Lihat log perubahan
Seperti biasa, satu artikel tidak boleh berlaku adil untuk keseluruhan siaran. Nasib baik, log perubahan ini memberikan senarai terperinci semua perubahan - sekiranya anda merasa ingin memeriksa nadi ciri yang sangat anda sayangi.
Ada banyak fail yang siap dimuat naik ke laman web anda? Sandarkan mereka di storan awan yang paling dipercayai.
Artikel ini pada mulanya diterbitkan dalam majalah reka bentuk web kreatif Pereka web.
