Açısal komponentlər necə qurulur və hər yerdə istifadə olunur

Angular, ən çox istifadə olunan Javascript əsaslı ön tərəf çərçivəsidir (AngularJs və Angular 2+ saysaq birinci). Angular, Google tərəfindən dəstəklənən bir çərçivədir. AngularJ-lərin əksəriyyəti 2010-cu ildə əvvəlki AngularJs versiyasında tamamilə yenidən qurulduqdan sonra 2016-cı ildə buraxıldı. Angular-ın əsas xüsusiyyətlərindən biri də bir çox platforma üçün inkişaf bacarığı idi: veb, mobil və yerli masaüstləri. Beləliklə, Angular-ı cəlbedici edən nədir.

Açısal bir vasitə deyil. Tətbiqinizi strukturlaşdırılmış bir şəkildə qurmaq üçün istifadə edə biləcəyiniz dizayn nümunələri də təqdim edir. Kodları modullarda düzəltmək, modullar bir tətbiqi xüsusiyyətləri və yenidən istifadə edilə bilən hissələrə bölməklə yanaşı, müvafiq rollara görə komanda üzvləri içərisində gecikmiş yükləmə və tapşırıqların bölüşdürülməsi.

Açısal Komponentlər genişləndirilir və ayrılır, beləliklə istifadəçi təqdimat manipulyasiyası və tətbiq məntiqi arasında dəqiq bir ayrılma ilə daha mürəkkəb komponentlər yaratmaq üçün bir neçə sadə və asanlıqla dəyişdirilə bilən komponentləri toplaya bilər.

İlk bucaq komponentimizi yaradaq.

Layihəmizi qurmaq üçün AngularCLI (npm install -g @ angular / cli) quraşdırmalıyıq və sonra yeni layihəmizi aşağıdakılarla qururuq:

yeni

Yaradılan layihədə aşağıdakılar var:

  • Standart bucaq layihəsi.
  • Bütün asılılıqlar qovşaq modulu qovluğuna quraşdırılır
  • Hər bir komponent üçün test sənədləri.

Hostinq komponentindəki dəyişənləri (digər çərçivələrdən / kitabxanalardan) işə salmaq üçün 2 girişə malik bir komponent yarataq və bu dəyərlərdən birini hostlarında yeniləmək və tam qarşılıqlı ssenarini simulyasiya etmək üçün bir hadisə göndərək. .

İndi Bucaqlı komponentimiz işlək vəziyyətdə olduğundan, Bucaqlı Elementi veb komponent olaraq yaratmaq üçün istifadə edə bilərik. Bu xüsusiyyət, Bucaqlı komponentlərin Angular 6-nın sərbəst buraxılması ilə təqdim olunan xüsusi əşyalar kimi paketlənməsinə imkan verir.

Bunu etmək üçün əvvəlcə bir neçə asılılıq qurmalısınız.

npm quraşdırma - @ bucağı / elementləri saxla
npm quraşdırma - @ webcomponents / webcomponentsjs qeyd edin
npm quraşdırma - sənəd nişanı elementini qeyd edin

Angular.json sənədində document-register-element.js faylını idxal etməlisiniz.

Növbəti addım, AppModule açılış qayışlarının işləməsini dəyişdirməkdir. Bunu etmək üçün, AppComponent-in modulla önyüklənməsinin qarşısını almaq üçün bootstrap massivini inputComponents adlandırmalıyıq.

Xüsusi elementləri @ angle / core-dan idxal etmək və @ angular / elements-dan createCustomElement yaratmaq üçün injektor yaratmaq üçün Next düyməsini basın. Bu funksiya müəyyən bir HTML etiketi ilə əlaqələndirdiyimiz bir NgElementConstructor sinifini qaytarır.

Nəhayət, bootstrap funksiyasını ləğv etmək üçün ngDoBootstrap əlavə etməliyik.

Enjektor, modulun məzmununa istinaddır. Bu şəkildə eyni tətbiqdə yaradılan elementlərin hamısı eyni konteksti paylaşa və tək bir Bucaqlı tətbiq təşkil edə bilər. Bir-biri ilə ünsiyyət qura, yönləndiricini paylaşa və eyni NgRx yaddaşından istifadə edə bilərlər.

Tam nümunəni Github deposumda tapa bilərsiniz

VueJs komponentində xüsusi bucaq elementinizi istifadə edin:

Xüsusi açısal elementinizi VueJs komponentində istifadə etmək üçün yaratdığınız js sənədlərinizi və styles.css faylını ümumi qovluqdakı index.html faylında idxal etməlisiniz.

Daha sonra onu başqa bir komponent və ya HTML etiketi kimi sadəcə komponentinizin HTML şablonuna əlavə edərək istifadə edə bilərsiniz. Bu nümunədə, bu komponentin məlumatı giriş kimi qəbul edərək və dəyəri dəyişdikdə hadisələri ataraq və ya ana dəyişəninin dəyərini ikitərəfli bağlayaraq dəyişdirərək ana kompüterlə necə qarşılıqlı əlaqədə olduğunu göstərir.

Bucaqlı Xüsusi elementinizi polimerdə istifadə edin:

Bucaqlı Xüsusi elementi polimer komponentində istifadə etmək üçün yaradılan Javascript sənədlərini idxal etməlisiniz. əsas, işləmə vaxtı, çox doldurulma və işləmə vaxtı və etiketi komponentin HTML şablonuna daxil edin.

Bu nümunədə gördüyünüz kimi, bucaq komponenti ilə qarşılıqlı əlaqədə olmaq üçün 2 yollu bağdan istifadə edirik. Polimer sənədlərində izah edildiyi kimi aşağıdakılara diqqət yetirin. Bu hadisə adlandırma konvensiyasına əməl etməyən yerli və ya polimer olmayan elementlər üçün iki tərəfli bir bağ yaratmaq üçün aşağıdakı sintaksisdən istifadə edərək şərhdə dəyişiklik hadisəsi üçün xüsusi bir ad təyin edə bilərsiniz:

target-prop = "{{hostProp :: target-change-event}}"

Yaratdığınız xüsusi bucaq elementini "Reakt" komponentində istifadə edin

Açısal Xüsusi elementi istifadə etmək üçün yaradılan Javascript sənədlərini idxal etməlisiniz və sonra onları komponentinizdə normal komponent kimi istifadə edə bilərsiniz.

Gördüyünüz kimi, ev sahibi ilə uşaq komponenti arasında xüsusi tədbirlər vasitəsilə əlaqə qururuq.

Sadə Javascript ilə Angular Custom elementindən istifadə edin

Yaratdığınız xüsusi Bucaqlı elementi istifadə etmək üçün, başqa hər hansı bir Javascript kodu kimi, bir HTML sənədinə daxil etməlisiniz və polyfills, runtime və skript fayllarını idxal etməlisiniz.

Atributların dəyərini hər hansı bir HTML elementi kimi Javascript ilə dəyişə bilərik və hadisələri dinləyə və DOM-un digər hissələrini dəyişə bilərik.

Bu yazını oxuduğunuz üçün təşəkkür edirəm. Nümunələri tam olaraq bu depoda tapa bilərsiniz. Buraya nümunələr üçün kod və təcrübə etmək istəyirsinizsə nümunələri lokal olaraq aparmağın bir yolu daxildir.

Geribildiriminiz varsa və ya bu məqaləyə bir şey əlavə etmək istəyirsinizsə, buraya bir şərh əlavə etməkdən çəkinməyin.

Twitter-də məni də izləyə bilərsiniz.