Tarkib
- 01. Versiya tekshiruvini o'tkazing
- 02. Burchakni o'rnating
- 03. Loyiha skeletini yarating
- 04. Jabduqlarni differentsial yuklash
- 05. ... va natijalarini ko'ring
- 06. Veb-ishchini tug'diring
- 07. Kodni o'rganing
- 08. Iskala o'rnatish
- 09. Konstruktor etishmasligi haqida tashvishlanmang
- 10. Kichik kompilyatsiya ishini bajaring
- 11. ... va chiqishini toping
- 12. Ishga kiring
- 13. Ayvni o'rganing
- 14. O'zgartirilgan ishlov berishni sinab ko'ring
- 15. Yaxshilangan migratsiyadan zavqlaning
- 16. Ish joyini boshqarishni o'rganing
- 17. Jarayonni tezlashtiring
- 18. Yuradigan o'liklardan saqlaning
- 19. O'zgarishlar jurnaliga qarang
Angular 8 - bu Google-ning Angular-ning eng so'nggi versiyasi - atrofdagi eng yaxshi JavaScript-ramkalardan biri. Ushbu maqolada biz Angular 8-ning o'ziga xos xususiyatlarini ko'rib chiqamiz va sizga qanday boshlashni ko'rsatamiz. Birinchidan, hozirgi kunga qadar ramka bilan nima sodir bo'lganligini qisqacha ko'rib chiqish.
Angularning kiritilishi veb-ishlab chiqishda paradigma o'zgarishiga olib keldi: aksariyat kutubxonalar me'morchilik ta'siriga nisbatan cheklangan ishlab chiquvchilarni qo'llab-quvvatlash bilan cheklanib qolishgan bo'lsa, Angular-ning ishlab chiquvchilari jamoasi boshqa tomonga o'tdilar. Ularning mahsuloti sizni o'ziga xos arxitekturadan foydalanishga majbur qiladi, og'ishlar qiyin bo'lganidan tijorat nuqtai nazariga qadar. Darhaqiqat, burchakli kodlarning aksariyati brauzerga tushmasidan oldin nisbatan murakkab transpilatsiya asboblari zanjiri orqali ishlaydi.
Google Inc-ning ichida ham, tashqarisida ham Angular-ning ulkan muvaffaqiyati tufayli rivojlanish umuman barqarorlashdi. Bu shuni anglatadiki, buzilish kodlari o'zgarishi kam, yarim yillik yangilanishlar ramkalarni veb-brauzer landshaftidagi o'zgarishlarga moslashtirishga qaratilgan.
Masalan, burchakli 8-da, yangi JavaScript kompilyatori joylashtirilgan (eksperimental ravishda bo'lsa ham). Qadimgi brauzerlar hisobiga sezilarli darajada kichikroq va tezroq yaratilgan moslik kodini optimallashtiradi. Bundan tashqari, Veb Worker qo'llab-quvvatlashi Angularning ishlash qobiliyatini oshirish uchun birlashtirilgan. Qisqasi, ko'rish uchun juda ko'p narsa bor - shuning uchun biz darhol sho'ng'iymiz.
Agar siz kodsiz saytni loyihalashni xohlasangiz, ushbu oson veb-sayt ishlab chiqaruvchilardan birini sinab ko'ring. Ishlarni yanada yumshoqroq qilish uchun veb-xosting xizmatini to'g'ri yo'lga qo'ying.
01. Versiya tekshiruvini o'tkazing
Burchakning asboblar zanjiri NodeJS muhitida yashaydi. Ushbu yozuvdan boshlab Node.js 10.9 yoki undan yaxshisi kerak bo'ladi - agar siz o'zingizni eski versiyada topsangiz, Node.js veb-saytiga tashrif buyuring va yangilang. Quyidagi kod ushbu mashinadagi versiya holatini ko'rsatadi.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Burchakni o'rnating
Angular's toolchain nomlangan buyruq qatori yordam dasturida joylashgan ng. U taniqli NPM orqali o'rnatilishi mumkin.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versiya
Quyidagi rasmda ko'rsatilgan savolga javob berishda ehtiyot bo'ling.
Asbobdan versiya ma'lumotlarini olish juda qiyin - nafaqat sintaksis noyob, balki natijasi ham tushunarli (quyidagi rasmga qarang).
03. Loyiha skeletini yarating
ng biz uchun burchakli iskala hosil qiladi. Keyingi bosqichlarda biz marshrutizatsiyani qo'shmoqchimiz va CSS transplantatsiyasi uchun Sass-dan foydalanmoqchimiz. Agar tarqatish muvaffaqiyatsiz tugasa, ishchi katalogni bo'shating va qaytadan ishga tushiring ng superuser huquqlari bilan.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng yangi ish stoli
04. Jabduqlarni differentsial yuklash
Burchakning yangi versiyasi ta'sirning kamayishi uchun orqaga qarab moslik kodini optimallashtiradi - fayl deb nomlangan brauzerlar ro'yxati qaysi brauzerlarni qo'llab-quvvatlash kerakligini hal qilishga imkon beradi. Ochiq brauzerlar ro'yxati va so'zni olib tashlang emas IE 9 dan IE11gacha.
. . . > 0,5% so'nggi 2 ta versiya Firefox ESR o'lik emas IE 9-11 # IE 9-11-ni qo'llab-quvvatlash uchun "not" ni olib tashlang.
05. ... va natijalarini ko'ring
Loyiha kompilyatsiyasiga buyurtma bering, tarqatish papkasini o'zgartiring va keraksiz xarita fayllarini tozalang.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Natijalarni ko'rish uchun daraxtni chaqiring - ng turli xil kod fayllarining bir nechta versiyasini yaratadi (quyidagi rasmga qarang).
06. Veb-ishchini tug'diring
Veb-xodimlar JavaScript-ga mahalliy dasturlarning so'nggi chegaralariga kirishga ruxsat berishadi: vazifalarni massiv ravishda parallel ishlash. Angular 8 yordamida veb-ishchi qulay sharoitda yaratilishi mumkin ng buyruq satri yordam dasturi.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng veb-ishchi yaratish myworker CREATE tsconfig.worker.json (212 bayt) CREATE src / app / myworker.worker.ts (157 bayt) UPDATE tsconfig.app.json (236 bayt) Yangilash angular.json (3640 bayt)
07. Kodni o'rganing
ngChiqishi birinchi qarashda qo'rqinchli ko'rinishga ega bo'lishi mumkin. Faylni ochish src / app / myworker.worker.ts tanlagan kod muharriri siz yaxshi bilishingiz kerak bo'lgan kodni ochib beradi WebWorker spetsifikatsiya. Printsipial jihatdan ishchi xabarlarni qabul qiladi va kerak bo'lganda ularni qayta ishlaydi.
/// reference lib = "webworker" /> addEventListener (’xabar’, ({data}) => {const response = `ishchining $ {data} ga javobi ''; postMessage (response);});
08. Iskala o'rnatish
Burchakli dasturlar tarkibiy qismlardan iborat. Veb-xodimimizni ishdan bo'shatish eng yaxshi ichkarida amalga oshiriladi AppComponentuchun tinglovchini o'z ichiga olgan kengaytirilgan OnInit tadbir. Hozircha u faqat holat haqida ma'lumot chiqaradi.
"@ angular / core" dan {Component, OnInit} import qilish; @Component ({..}) AppComponent eksport klassi OnInit {title = ’workertest 'ni amalga oshiradi; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Konstruktor etishmasligi haqida tashvishlanmang
Tajribali TypeScript ishlab chiquvchilari o'zlaridan nima uchun bizning kodimiz dasturlash tili tomonidan taqdim etilgan konstruktordan foydalanmaydi deb so'rashadi. Buning sababi shu ngOnInit bu boshlang'ich hodisasi sodir bo'lganida ishdan bo'shatiladigan hayot tsikli hodisasidir - bu sinf chaqiruvi bilan bog'liq bo'lishi shart emas.
10. Kichik kompilyatsiya ishini bajaring
Ayni paytda, dastur ishlashga tayyor. Biz uni server ichidan bajaramiz ng, bu xizmat buyrug'i orqali chaqirilishi mumkin. Ushbu yondashuvning aniq jihati shundaki, dastur o'zgarishlarni aniqlaydi va darhol loyihani qayta kompilyatsiya qiladi.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng service
Buni quyidagi rasmda amalda ko'rish uchun rasmga qarang.
11. ... va chiqishini toping
xizmat qilish odatda mahalliy veb-server manzilini qo'yadi http: // localhost: 4200 /. Vaziyatni ko'rish uchun veb-sahifani oching va ishlab chiquvchi vositalarini oching. Shuni yodda tuting console.log ma'lumotlarni brauzer konsoliga chiqaradi va NodeJS misoli konsolini daxlsiz qoldiradi.
12. Ishga kiring
Ayni paytda, biz ishchining nusxasini yaratamiz va uni xabar bilan ta'minlaymiz. Keyinchalik uning natijalari brauzer konsolida ko'rsatiladi.
if (typeof Worker! == 'undefined') {// Create new const worker = new Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log ('sahifa xabar oldi: $ {data }'); }; worker.postMessage ('salom'); } else {console.log ("Ishchilarga yordam yo'q"); }
13. Ayvni o'rganing
Angular-ning kelajakdagi versiyalari yanada takomillashtirilgan kompilyatordan foydalanadi va bu hatto kichik ko'rinishga olib keladi. Mahsulot hali tugallanmagan bo'lsa-da, pechak yordamida ishlangan skelet orqali tug'ilishi mumkin ny new ivy-project - activ-ivy. Shu bilan bir qatorda, kompilyator parametrlarini parchada ko'rsatilgandek o'zgartiring.
"angularCompilerOptions": {"enableIvy": rost}
Ogohlantirish so'zi: Ivy hayratlanarli darajada kichraytirishga olib keladi, ammo bu bepul emas. Mahsulot hali barqarorlashmagan, shuning uchun uni samarali muhitda ishlatish tavsiya etilmaydi.
14. O'zgartirilgan ishlov berishni sinab ko'ring
Burchakli ng buyruq qatori vositasi bir muncha vaqt ichki skriptlardan foydalangan. Angular 8 antitani yuqoriga ko'taradi, endi siz o'zingizning vazifalaringizni bajarish uchun ushbu imkoniyatdan foydalanishingiz mumkin, chunki sizning dasturingiz yig'ilib va tuziladi.
"Architect": {"build": {"builder": "@ angular-devkit / build-angular: brauzer",
Bitta toza dastur ng skriptlar to'g'ridan-to'g'ri bulutli xizmatlarga dasturlarni yuklashni o'z ichiga oladi. Git ombori sizning ishingizni Firebase hisobiga yuklaydigan foydali skriptni taqdim etadi.
15. Yaxshilangan migratsiyadan zavqlaning
AngularJ.x deb nomlanuvchi Angular 1.x-dan uzoqlashib ketayotgan ishlab chiquvchilar navigatorni "birlashtirilgan" dasturlarda ishlashiga to'g'ri keladigan muammolarga duch kelishdi. Yangi Birlashgan Joylashuv Xizmati ushbu jarayonni yanada yumshoq qilishga qaratilgan.
16. Ish joyini boshqarishni o'rganing
Katta loyihalar ish maydoni tuzilishini dinamik ravishda o'zgartirish qobiliyatidan foydalanadi. Bu Angular 8.0-da kiritilgan yangi Workspace API orqali amalga oshiriladi - bu qadam bilan birga kelgan parcha xatti-harakatlarning tezkor ko'rinishini beradi.
async funktsiyasi demonstrate () {const host = ish joylari. createWorkspaceHost (yangi NodeJsSyncHost ()); const ish maydoni = ish joylarini kutish. readWorkspace (’path / to / workspace / directory /’, xost); const project = workspace.projects. get ('my-app'); const buildTarget = project.targets. olish ('qurish'); buildTarget.options.optimization = rost; ish joylarini kuting.writeWorkspace (ish maydoni, xost); }
17. Jarayonni tezlashtiring
Katta JavaScript kod bazalarini yaratish zerikarli bo'ladi. AngularJS-ning kelajakdagi versiyalari jarayonni tezlashtirish uchun Google-ning Bazel qurish tizimidan foydalanadi - afsuski, yozish paytida u primetime tayyor emas edi.
18. Yuradigan o'liklardan saqlaning
Google kodni buzmaslik uchun o'ta ehtiyotkorlik bilan harakat qilsa ham, ba'zi funktsiyalar o'chirilishi kerak, chunki ular endi kerak emas. Qochish kerak bo'lgan xususiyatlar haqida ko'proq bilish uchun ushbu amortizatsiya ro'yxatini tekshiring.
19. O'zgarishlar jurnaliga qarang
Har doimgidek, bitta maqola butun ozodlikka hech qachon adolatli bo'lolmaydi. Yaxshiyamki, ushbu o'zgartirishlar jurnali barcha o'zgarishlarning batafsil ro'yxatini taqdim etadi - agar siz o'zingiz uchun ayniqsa aziz bo'lgan funktsiyani urishini tekshirishni xohlasangiz.
O'zingizning saytingizga yuklash uchun ko'plab fayllarni oldingizmi? Ularni eng ishonchli bulutli xotirada zaxiralang.
Ushbu maqola dastlab veb-dizayn jurnalida nashr etilgan Veb-dizayneri.
