1. परिचय
मेहमान लेखक आयूष अरोरा की ओर से
कोणीय एलिमेंट, ऐंगुलर कॉम्पोनेंट होते हैं जिन्हें कस्टम एलिमेंट के तौर पर पैकेज किया जाता है. फ़िलहाल, ये Chrome, Opera, और Safari के साथ काम करते हैं. ये पॉलीफ़िल के ज़रिए दूसरे ब्राउज़र में भी उपलब्ध हैं. ये एलिमेंट सामान्य ऐंगुलर इंटरफ़ेस और बदलाव की पहचान करने की रणनीति के साथ पूरे ऐंगुलर इंफ़्रास्ट्रक्चर का इस्तेमाल कर सकते हैं. एक बार पंजीकृत हो जाने पर, इन तत्वों का उपयोग ब्राउज़र में किया जा सकता है.
यह कोडलैब आपको अपनी इमेज स्लाइडर स्लाइडर ऐंगल बनाने की जानकारी देगा. इसके बाद, आप इसे ऐंगुलर एलिमेंट में बदल देंगे, ताकि यह ऐंगुलर फ़्रेमवर्क के बाहर काम कर सके.
आप क्या बनाएंगे
|
इस कोडलैब में आप और #39;ऐंगल करने वाले का इस्तेमाल करके इमेज-स्लाइडर एलिमेंट बनाने जा रहे हैं. आपका एलिमेंट wi:
|
आप क्या #39;जानेंगे
- इमेज-स्लाइडर को पसंद के मुताबिक कॉम्पोनेंट बनाने का तरीका
- इमेज-स्लाइडर कस्टम कॉम्पोनेंट को कस्टम एलिमेंट में बदलने का तरीका
- कॉम्पोनेंट को कैसे पैकेज करें कि वह ब्राउज़र में काम करे
आपको क्या चाहिए
- angular-cli का हाल ही का वर्शन.
- सैंपल कोड
- टेक्स्ट एडिटर
- ऐंगुलर कॉम्पोनेंट की बुनियादी जानकारी
इस कोडलैब पर फ़ोकस ऐंगुलर एलिमेंट पर है. जो कॉन्सेप्ट और कोड ब्लॉक काम के नहीं हैं उन्हें ऊपर दिखाया जाता है. साथ ही, उन्हें कॉपी करके चिपकाने के लिए उपलब्ध कराया जाता है.
2. तैयारी
कोड डाउनलोड करें
इस कोडलैब के सभी कोड डाउनलोड करने के लिए, इस लिंक पर क्लिक करें:
डाउनलोड की गई zip फ़ाइल को अनपैक करें. इससे रूट फ़ोल्डर (angular-element-codelab-master) को अनपैक कर लिया जाएगा, जिसमें ये शामिल हैं
दो फ़ोल्डर (image-slider) और (image-slider-finished). हम सभी कोडिंग का काम, इमेज स्लाइडर का इस्तेमाल करके एक डायरेक्ट्री में करेंगे.
प्रोजेक्ट चलाना
प्रोजेक्ट चलाने के लिए, आपको रूट डायरेक्ट्री ( ng-service ) को रूट डायरेक्ट्री ( )-स्लाइडर ( ) से चलाना होगा.
ऐप्लिकेशन के बूटस्ट्रैप होने के बाद, आपको यह जानकारी दिखेगी:
3. इमेज-स्लाइडर कस्टम कॉम्पोनेंट बनाना?
इमेज स्लाइडर बनाने का तरीका?
इस इमेज स्लाइडर के लिए, कोणीय क्लिक बाइंडिंग का इस्तेमाल करके बटन बाइंड करें. हम इमेज, ऑल्ट टैग, लिंक वगैरह के साथ एक कैटगरी बना देंगे. हम इन इमेज को एक-दूसरे के नीचे एक कंटेनर में रखेंगे और क्लिक होने पर कंटेनर का अनुवाद करेंगे.
हम एक इमेज-स्लाइडर कॉम्पोनेंट बनाने जा रहे हैं और फिर उसे ऐंगुलर एलिमेंट में बदल देंगे.
- इमेज और शीर्षक के लिए कंटेनर.
- डेटा वाली कैटगरी
- डेटा को बाइंड करने के लिए टेम्प्लेट
4. इमेज-स्लाइडर कॉम्पोनेंट को लागू करना
किसी भी प्रोजेक्ट को शुरू करने के कई तरीके हैं. इस मामले में, अपने प्रोजेक्ट को जितना हो सके उतना आसान रखना और Angular Elements पर फ़ोकस करना, हमने आपको #39; मूल कोड के साथ css दिया है.
श्रेणी और डेटा सेवा बनाना
याद रखें, स्लाइडर की श्रेणी में ये चीज़ें शामिल होंगी:
- स्लाइडर में इमेज यूआरएल के लिए img बटन
- इमेज के लिए ऑल्ट टैग देने के लिए वैकल्पिक टैग
- इमेज के बारे में जानकारी देने के लिए टेक्स्ट
आपकी src/assets डायरेक्ट्री में पहले से मौजूद data.json फ़ाइल कुछ ऐसी दिखनी चाहिए.
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'}
];
हमें किसी सेवा का इस्तेमाल करके, इस डेटा को अपने कॉम्पोनेंट में लाना होगा. data.service.ts फ़ाइल में, हम @angular/common/http के httpClient मॉड्यूल का इस्तेमाल करके एक getData() विधि लिखेंगे, जो ऊपर बनाई गई श्रेणी से डेटा फ़ेच करेगी.
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)
}
}
डेटा सेवा से डेटा लाना
हमें अपनी सेवा को कॉम्पोनेंट के अंदर इंपोर्ट करना होगा. इसके बाद, हम data.json से ऑब्जेक्ट पाने के लिए, निगरानी की सुविधा वाले डिवाइस की सदस्यता ले सकते हैं
इसके लिए हमें तीन चरण पूरे करने होंगे:
- कॉम्पोनेंट की कैटगरी शुरू करना
getData()फ़ंक्शन की निगरानी में रखे गए आइटम की सदस्यता लेना- ऑब्ज़र्व किया जा सकने वाला डेटा ऐक्सेस करने के लिए, टाइप-चेकिंग के लिए इंटरफ़ेस नतीजे बनाएं.
- कॉम्पोनेंट की कैटगरी के लिए डेटा असाइन करें.
शुरुआती कॉम्पोनेंट की कैटगरी
हम slider.component.ts में कॉम्पोनेंट अरे को एलान और शुरू करेंगे, जो ऑब्जेक्ट का अरे है:
एलान करने के लिए:
sliderArray: object[];
शुरू करने के लिए:
constructor(private data: DataService) {
this.sliderArray = [];
}
इसके बाद, हमें कंस्ट्रक्टर में अपनी सेवा को इंपोर्ट और शुरू करना होगा
constructor(private data: DataService) {}
अब हम अपनी सेवा का इस्तेमाल करने के लिए तैयार हैं. साथ ही, हमारी सेवा देने के तरीकों पर कॉल भी कर सकते हैं.
डेटा सेवा से डेटा पाना
सेवा से डेटा पाने के लिए, हम getData() तरीके पर कॉल करेंगे और यह देखने के लिए सदस्यता लेंगे कि यह सुविधा काम करेगी. हम एक इंटरफ़ेस Result, भी बनाएंगे, ताकि हम यह पक्का कर सकें कि हमें सही डेटा मिल रहा है.
हम ngOnInit तरीके में ऐसा करेंगे:
this.data.getData().subscribe((result: Result)=>{
})
कॉम्पोनेंट अरे को डेटा असाइन करना
आखिर में, हम डेटा को कॉम्पोनेंट अरे को असाइन करेंगे:
this.data.getData().subscribe((result: Result)=>{
this.sliderArray = result.sliderArray;
})
एक बार हमारे कॉम्पोनेंट' की कैटगरी में डेटा मिल जाने के बाद, हम अपने टेंप्लेट को इस डेटा के साथ जोड़ सकते हैं.
slider.component.html, में हमारे पास पहले से ही एक HTML टेम्पलेट है. हमारा अगला कदम इस टेंप्लेट को sliderArray से बाइंड करना है.
5. टेंप्लेट की मदद से डेटा बाइंड करना
हम *ngFor डायरेक्टिव का इस्तेमाल करके डेटा को टेंप्लेट के साथ बाइंड करेंगे. आखिर में, हम स्लाइडर को काम करने के लिए टेंप्लेट में ट्रांसफ़ॉर्मेशन जोड़ेंगे.
इसमें तीन चरण शामिल हैं:
sliderArrayको टेंप्लेट में शामिल किया जा रहा है- स्लाइडर बटन के लिए इवेंट बाइंडिंग जोड़ना
ngStyleऔरngClassका इस्तेमाल करके सीएसएस को बदलने में मदद करें
स्लाइड को कॉम्पोनेंट से जोड़ना
हमारे पास img-container, a text-container, और a slider. वाला एक कंटेनर है
हम *ngFor डायरेक्टिव का इस्तेमाल करके तीनों कंटेनर के डेटा को बाइंड कर देंगे
<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>
इवेंट को SlidesArray के साथ बाइंड करना
डेटा को बाइंड करने के बाद, हम कोणीय click binding का इस्तेमाल करके क्लिक इवेंट को हर स्लाइड बटन से जोड़ देंगे. हम selected(x) नाम का एक फ़ंक्शन बनाएंगे, जहां x, श्रेणी का इंडेक्स होता है.
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;
}
}
इन बातों को याद रखें:
- डाउनचुने गए फ़ंक्शन,
selectedफ़ंक्शन के क्लिक पर इंडेक्स पास किए जाने के बाद ट्रांसफ़ॉर्म प्रॉपर्टी के मान को पचास से कम कर देता है. - यह तर्क टेक्स्ट कंटेनर को 100%, 50%, -50%, -100% में बदल देता है. इसकी वजह से चार अलग-अलग स्थितियां हो जाती हैं.
ngStyle & ngClass का इस्तेमाल करके सीएसएस बदलना
शुरुआत में, हम सभी इमेज को शून्य पर अपारदर्शिता के साथ सेट करते हैं. जब चुना गया इंडेक्स, इमेज इंडेक्स के बराबर हो जाता है, तो हम ngClass directive का इस्तेमाल करके एक क्लास selected जोड़ते हैं. selected क्लास, इमेज में एक अपारदर्शिता जोड़ देता है, ताकि इमेज उपयोगकर्ता को दिख सके.
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
</div>
इसके बाद, हम टेक्स्ट फ़ंक्शन का अनुवाद select() फ़ंक्शन का इस्तेमाल करके कैलकुलेट की गई transform वैल्यू के मुताबिक करेंगे.
<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>
ये सभी चरण पूरे करने के बाद, आप फ़ाइनल कोड का पता लगा सकते हैं, जैसा कि नीचे बताया गया है:
<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. कॉम्पोनेंट को ऐंगुलर एलिमेंट में बदलना
इस प्रक्रिया में पांच चरण हैं:
- कोणीय तत्व के लिए
Shadow DOMका इस्तेमाल करना entryComponentsका इस्तेमाल करना@angular/elementsसेCreateCustomElementमॉड्यूल इंपोर्ट और इस्तेमाल- हमारा
custom-elementतय करना ngDoBootstrapतरीका चल रहा है
कोणीय एलिमेंट के लिए शैडो डीओएम का इस्तेमाल करना
अब हमारी इमेज-स्लाइडर चल रही है, हमें बस इसे Angular Element बनाना है.
इसकी सबसे मज़ेदार बात यह है कि कॉम्पोनेंट के डीओएम (शैडो) डीओएम को बनाने के लिए सिर्फ़ एक मामूली बदलाव किया जाता है.
हमें ViewEncapsulation मॉड्यूल इंपोर्ट करना होगा और इससे ShadowDom तरीका इस्तेमाल करना होगा.
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
एंट्री कॉम्पोनेंट का इस्तेमाल करना
एंट्री कॉम्पोनेंट एक कॉम्पोनेंट है, जो कोणीय तरीके से लोड होता है. आप किसी एंट्री कॉम्पोनेंट को Ngmodule में बूटस्ट्रैप करके तय करते हैं.
यहां हम @NgModule के अंदर entryComponents श्रेणी में अपने SliderComponent के बारे में बताएंगे
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
createCustomElement मॉड्यूल को इंपोर्ट करना और इस्तेमाल करना
यहां हमें @angular/elements. के createCustomElement मॉड्यूल का इस्तेमाल करना होगा. आपको createCustomElement फ़ंक्शन के लिए पैरामीटर के तौर पर SliderComponent, का इस्तेमाल करना होगा. इसके बाद, हमें डीओएम में slider रजिस्टर करना होगा.
import { createCustomElement } from '@angular/elements';
export class AppModule {
constructor(private injector: Injector) {
const slider = createCustomElement(SliderComponent, { injector });
}
}
स्लाइडर को DOM एलिमेंट के रूप में रजिस्टर करने के लिए, हम इसे customElements.define तरीके का इस्तेमाल करके परिभाषित करेंगे.
customElements.define('motley-slider', slider);
आखिर में, हमें ngDoBootstrap() तरीके का इस्तेमाल करके इस कस्टम एलिमेंट को चालू करना होगा. पूरा कोड कुछ ऐसा दिखेगा:
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() {}
}
ऐंगुलर एलिमेंट की पैकेजिंग
हमें अपने नए निर्देशों से package.json में बदलाव करना होगा, हम package.json फ़ाइल के अंदर स्क्रिप्ट ऑब्जेक्ट में बदलाव कर देंगे.
आइए, हमारे बदले गए स्क्रिप्ट ऑब्जेक्ट की जांच करें:
"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"
}
अब, हम ng build & ng package निर्देश को चला सकते हैं और बिल्ड कमांड की मदद से बनाए गए डिस्ट/ फ़ोल्डर को सर्व करने के लिए, हम ng सर्व करेंगे. साथ ही, हम ng package निर्देश से मिले gzip का इस्तेमाल कर सकते हैं, उसे निकाल सकते हैं, और npm module के तौर पर प्रकाशित कर सकते हैं.