Bu codelab hakkında
1. Giriş
Misafir yazar tarafından Aayush Arora
Angular Elements, özel öğeler olarak paketlenmiş Açılı Bileşenlerdir. Bunlar şu anda Chrome, Opera ve Safari tarafından desteklenmektedir ve çoklu tarayıcılar aracılığıyla diğer tarayıcılarda kullanılabilir. Bu öğeler, ortak Angular Arayüzü ve Değişiklik Algılama Stratejisi ile Açısal Altyapının tamamından yararlanabilir. Kaydedildikten sonra bu öğeler tarayıcıda kullanılabilir.
Bu codelab, kendi resim kaydırmalı açısal bileşeninizi oluşturma konusunda size yol gösterecektir. Daha sonra, bunu Angular Framework dışında çalışabilmesi için köşeli bir öğeye dönüştürebilirsiniz.
Oluşturacağınız uygulama
|
Bu codelab'de, açılımları kullanarak resim kaydırma çubuğu derleyeceksiniz. Öğeniz:
|
Neler öğreneceksiniz?
- Resim kaydırma çubuğu özel bileşeni oluşturma
- Resim kaydırma çubuğu özel bileşenini özel öğeye dönüştürme
- Bileşen, tarayıcı içinde çalışacak şekilde nasıl paketlenir?
Gerekenler
- Son angular-cli sürümü.
- Örnek kod
- Metin düzenleyici
- Açısal Bileşenlerle ilgili temel bilgiler
Bu codelab, Angular Nesnelerine odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.
2. Hazırlanma
Kodu İndirme
Bu codelab'in tüm kodunu indirmek için aşağıdaki bağlantıyı tıklayın:
İndirilen ZIP dosyasını paketten çıkarın. Bu işlem, kök klasörünü ((angular-element-codelab-master)) içeren bir paketi açar
İki klasör (image-slider) ve (image-slider-finished). Tüm kodlama çalışmalarımızı, resim kaydırma çubuğu adlı bir dizinde gerçekleştireceğiz.
Projeyi çalıştırma
Projeyi çalıştırmak için kök dizinden ( ng-serve ) komutu çalıştırmanız gerekir ( image-slider ).
Uygulama önyüklendikten sonra şunları görebilirsiniz:
3. Resim Kaydırma Çubuğu özel bileşeni mi yapılıyor?
Resim kaydırma çubuğu nasıl oluşturulur?
Bu resim kaydırma çubuğu için, açılı ayraç kullanarak düğmeleri bağlayın. Resimler, alt etiketler, bağlantılar vb. içeren bir dizi nesne oluştururuz. Bu resimleri bir kapsayıcıda birbirinin altına yerleştirir ve kapsayıcıyı tıklama yoluyla çeviririz.
Bir resim kaydırma çubuğu bileşeni oluşturup, ardından bunu köşeli bir öğeye dönüştüreceğiz.
- Resimler ve başlıklar için kapsayıcı.
- Verileri içeren bir dizi
- Verileri bağlamak için şablon
4. Resim kaydırma çubuğu bileşenini uygulama
Bir projeye başlamanın birden çok yolu vardır. Bu örnekte, projemizi mümkün olduğunca basit tutmak ve Angular Elements'e odaklanmak için css ile birlikte temel kodu da paylaştık.
Dizi ve veri hizmeti oluşturma
Kaydırıcı Dizisinin şunları içereceğini unutmayın:
- Kaydırma çubuğunda resim URL'si için img anahtarı
- Resim için alternatif sağlamak amacıyla bir alt etiketi
- Resimle ilgili açıklamanın yer aldığı metin
src/assets dizininizde bulunan data.json dosyası şu şekilde görünmelidir.
sliderArray = [
{img: 'http://bloquo.cc/img/works/1.jpg', alt: '', text: '365 Days Of weddings a year'},
{img: 'http://bloquo.cc/img/works/2.jpg', alt: '', text: '365 Days Of weddings a year'},
{img: 'http://bloquo.cc/img/works/3.jpg', alt: '', text: '365 Days Of weddings a year'},
{img: 'http://bloquo.cc/img/works/4.jpg', alt: '', text: '365 Days Of weddings a year'},
{img: 'http://bloquo.cc/img/works/5.jpg', alt: '', text: '365 Days Of weddings a year'}
];
Bu verileri hizmet kullanarak bileşenimize getirmemiz gerekir. data.service.ts dosyasına, yukarıda belirtilen diziden verileri almak için @angular/common/http modülünden httpClient modülünü kullanarak bir getData() yöntemi yazacağız.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
const URL = '../assets/data.json';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) {}
getData() {
return this.http.get(URL)
}
}
Veri hizmetinden veri alma
Hizmetimizi bileşenin içine aktarmamız gerekiyor ve ardından nesneyi data.json nesnesinden almak için gözlemlenebilir kanala abone olabiliriz.
Bunun için üç adım uygulamamız gerekir:
- Bileşen dizisi başlatılıyor
getData()işlevi tarafından döndürülen Gözlemlenebilir öğesine abone olma- Gözlemlenebilir gruba abone olduktan sonra verileri kontrol etmek için bir arayüz Sonuç oluşturun.
- Verileri bileşen dizisine atayın.
Bileşen Dizisini Başlatma
Bir nesne dizisi olan slider.component.ts içindeki bileşen dizisini bildirip başlatırız:
Beyan etmek için:
sliderArray: object[];
Başlatmak için:
constructor(private data: DataService) {
this.sliderArray = [];
}
Ardından, hizmeti oluşturucunun içine aktarıp başlatmamız gerekir.
constructor(private data: DataService) {}
Artık hizmetimizi kullanmaya ve hizmet yöntemlerimizi çağırmaya hazırız.
Veri Hizmeti'nden veri alma
Verileri hizmetten çıkarmak için getData() yöntemini çağıracak ve dönecek olan gözlemlenebilir durumuna gözlemleyeceğiz. Ayrıca doğru verileri alıp almadığımızı kontrol etmek için bir arayüz de oluşturacağız.Result,
Bu işlemi ngOnInit yöntemiyle gerçekleştireceğiz:
this.data.getData().subscribe((result: Result)=>{
})
Bileşen Dizisine veri atama
Sonunda, veriler bileşen dizisine atanır:
this.data.getData().subscribe((result: Result)=>{
this.sliderArray = result.sliderArray;
})
Bileşen dizimizin içindeki verileri aldıktan sonra şablonumuzu bu verilere bağlayabiliriz.
slider.component.html, içinde zaten bir HTML şablonumuz var. Sonraki adımımız bu şablonu sliderArray ile bağlamaktır.
5. Verileri şablona bağlama
*ngFor Yönergesi'ni kullanarak verileri şablona bağlarız ve son olarak kaydırma çubuğunun çalışması için şablona dönüşümler ekleriz.
Bu, üç adım içerir:
sliderArrayşablona bağlanıyor- Kaydırma düğmeleri için Etkinlik Bağlantısı ekleme
ngStylevengClasskullanılarak css dönüşümleri ekleniyor
Slayt Dizisini Bileşene Bağlama
img-container, a text-container ve a slider. içeren bir kapsayıcı var
*ngFor yönergesini kullanarak üç kapsayıcıdaki verileri birleştiririz
<div class="container">
<div class="img-container" *ngFor="let i of sliderArray; let select = index;">
<img src="{{i.img}}" alt="{{i.alt}}" >
</div>
<div>
<div class="text-container">
<div class="page-text" *ngFor="let i of sliderArray;let select = index;">
<h3>{{i.text}}</h3>
</div>
</div>
</div>
</div>
<div class="slider">
<div class="slide-button-parent-container" *ngFor="let i of sliderArray; let x =index">
<div class="select-box">
<div class="slide-button">
</div>
</div>
</div>
</div>
Slayt Dizisi için Etkinlik Bağlantısı
Veriler birleştirildikten sonra tıklama etkinliğini, açılı click binding kullanarak her bir slayt düğmesine bağlarız. selected(x) adında bir işlev oluşturacağız. Burada x dizinin dizinidir.
selected(x) {
this.downSelected(x);
this.selectedIndex = x;
}
downSelected(i) {
this.transform = 100 - (i) * 50;
this.selectedIndex = this.selectedIndex + 1;
if(this.selectedIndex > 4) {
this.selectedIndex = 0;
}
}
Dikkat edilmesi gereken noktalar:
- Aşağı seçilen işlev, dönüşüm özelliğinin değeri,
selectedişlevi tıklandığında iletilen dizinin elli katı azalır. - Bu mantık, metin kapsayıcıyı %100, %50, -%50, -%100 olarak çevirir ve dört farklı duruma sahiptir.
ngStyle & ngClass kullanarak CSS dönüşümleri ekleme
Başlangıçta tüm görüntüler, sıfır opaklık değerleriyle ayarlanır ve seçilen dizin, resim dizinine eşit olduğunda ngClass directive kullanılarak selected sınıfı eklenir. Bu selected sınıfı, resme kullanıcı için opaklık ekler. Böylece resim kullanıcıya görünür hale gelir.
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
</div>
Ardından, metin kapsayıcıyı select() işlevi kullanılarak hesaplanan transform değerine göre çeviririz.
<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>
Bu adımların tümünü gerçekleştirdikten sonra, aşağıda verilen nihai kodu öğrenebilirsiniz:
<div class="container">
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
<img src="{{i.img}}" alt="{{i.alt}}" >
</div>
<!--</div>-->
<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
<div class="text-container">
<div class="page-text" *ngFor="let i of sliderArray;let select = index;" [ngClass]="{'selected': select == selectedIndex}">
<h3>{{i.text}}</h3>
</div>
</div>
</div>
</div>
<div class="slider">
<div class="slide-button-parent-container" *ngFor="let i of sliderArray; let x =index" (click)="selected(x)" >
<div class="select-box">
<div class="slide-button" [ngClass]="{'slide-button-select': x == selectedIndex}" >
</div>
</div>
</div>
</div>
6. Bileşeni açılı öğeye dönüştürme
Bu işlem beş adımdan oluşur:
- Açılı Öğe için
Shadow DOMkullanılıyor entryComponentsyararlanın@angular/elementsmodülündenCreateCustomElementmodülü içe aktarılıyor ve kullanılıyorcustom-elementtanımlayınngDoBootstrapYöntemi Çalışıyor
Açısal öğe için Gölge DOM'u kullanma
Artık resim kaydırma çubuğumuz var, onu Angular Element hale getirmemiz gerekiyor.
İşin eğlenceli yanı, bileşen DOM'u (gölge DOM'u) yapmak için yalnızca küçük bir değişiklik yapmak.
ViewEncapsulation modülünü içe aktarmamız ve buradan ShadowDom yöntemini kullanmamız gerekiyor.
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
loginComponents'tan yararlanma
Giriş Bileşeni, ölçülü şekilde yüklenen bir bileşendir. Bir giriş bileşenini, NgModül'de önyükleme yoluyla belirtirsiniz.
Burada, SliderComponent içinde, @NgModule içindeki entryComponents dizisinde belirteceğiz
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
createCustomElement Modülünü içe aktarma ve kullanma
Burada, @angular/elements. tarafından sağlanan createCustomElement Modülünü kullanmamız gerekir. createCustomElement işlevinde parametre olarak SliderComponent, kullanmanız gerekir. Daha sonra, slider öğesini DOM'ye kaydetmemiz gerekir.
import { createCustomElement } from '@angular/elements';
export class AppModule {
constructor(private injector: Injector) {
const slider = createCustomElement(SliderComponent, { injector });
}
}
Kaydırıcıyı DOM öğesi olarak kaydetmek için customElements.define yöntemini kullanarak tanımları yaparız.
customElements.define('motley-slider', slider);
Son olarak, ngDoBootstrap() yöntemini kullanarak bu özel öğeyi kaldırmamız gerekir. Kodun tamamı şöyle görünür:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { SliderComponent } from './slider/slider.component';
import { HttpClientModule} from "@angular/common/http";
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
export class AppModule {
constructor(private injector: Injector) {
const slider = createCustomElement(SliderComponent, { injector });
customElements.define('motley-slider', slider);
}
ngDoBootstrap() {}
}
Angular Öğesini Paketleme
package.json komutumuzu yeni komutlarımızla değiştirmemiz gerekiyor. package.json nesnesinin içindeki komut dosyası nesnesini değiştireceğiz.
Değiştirilen komut dosyası nesnemizi kontrol edelim:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --output-hashing=none",
"package": "cat dist/my-app/{runtime,polyfills,scripts,main}.js | gzip > elements.js.gz",
"serve": "http-server",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
Şimdi ng build & ng package komutunu çalıştırabiliriz. Son olarak, build komutu kullanılarak oluşturulan dist/klasörü sunmak için ng sunumunu çalıştıracağız. Ayrıca, ng package komutundan alınan gzip öğesini kullanabilir ve çıkarıp npm module olarak yayınlayabiliriz.