এই কোডল্যাব সম্পর্কে
1. ভূমিকা
অতিথি লেখক আয়ুষ অরোরা
কৌণিক উপাদানগুলি কাস্টম উপাদান হিসাবে প্যাকেজ করা কৌণিক উপাদান। এগুলি বর্তমানে Chrome, Opera এবং Safari দ্বারা সমর্থিত এবং পলিফিলের মাধ্যমে অন্যান্য ব্রাউজারে উপলব্ধ৷ এই উপাদানগুলি সাধারণ কৌণিক ইন্টারফেস এবং পরিবর্তন সনাক্তকরণ কৌশল সহ সমগ্র কৌণিক অবকাঠামো ব্যবহার করতে পারে। একবার নিবন্ধিত হয়ে গেলে, এই উপাদানগুলি ব্রাউজারে ব্যবহার করা যেতে পারে।
এই কোডল্যাবটি আপনাকে আপনার নিজস্ব ইমেজ-স্লাইডার কৌণিক উপাদান তৈরির মাধ্যমে নিয়ে যাবে এবং তারপর এটিকে একটি কৌণিক উপাদানে রূপান্তর করতে সাহায্য করবে যাতে এটি কৌণিক কাঠামোর বাইরে কাজ করতে পারে।
আপনি কি নির্মাণ করবেন
|
এই কোডল্যাবে, আপনি কৌণিক ব্যবহার করে একটি ইমেজ-স্লাইডার উপাদান তৈরি করতে যাচ্ছেন। আপনার উপাদান উই:
|
আপনি কি শিখবেন
- কিভাবে একটি ইমেজ-স্লাইডার কাস্টম কম্পোনেন্ট তৈরি করবেন
- কীভাবে ইমেজ-স্লাইডার কাস্টম উপাদানটিকে কাস্টম উপাদানে রূপান্তর করবেন
- কিভাবে কম্পোনেন্ট প্যাকেজ করবেন যাতে এটি ব্রাউজারের ভিতরে কাজ করে
আপনি কি প্রয়োজন হবে
- কৌণিক-ক্লির একটি সাম্প্রতিক সংস্করণ।
- নমুনা কোড
- একজন টেক্সট এডিটর
- কৌণিক উপাদানের প্রাথমিক জ্ঞান
এই কোডল্যাবটি কৌণিক উপাদানগুলির উপর দৃষ্টি নিবদ্ধ করে। অ-প্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলিকে চকচকে করা হয়েছে এবং আপনাকে সহজভাবে অনুলিপি এবং পেস্ট করার জন্য প্রদান করা হয়েছে।
2. সেট আপ হচ্ছে
কোডটি ডাউনলোড করুন
এই কোডল্যাবের সমস্ত কোড ডাউনলোড করতে নিম্নলিখিত লিঙ্কে ক্লিক করুন:
ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন। এটি একটি রুট ফোল্ডার (angular-element-codelab-master) আনপ্যাক করবে, যার মধ্যে রয়েছে
দুটি ফোল্ডার (image-slider) এবং (image-slider-finished) । আমরা আমাদের সমস্ত কোডিং কাজ ইমেজ-স্লাইডার নামক একটি ডিরেক্টরিতে করব।
প্রকল্পটি চালাচ্ছেন
প্রকল্পটি চালানোর জন্য, আপনাকে রুট ডিরেক্টরি ( image-slider ) থেকে কমান্ড ( ng-serve ) চালাতে হবে।
অ্যাপটি বুটস্ট্র্যাপ হয়ে গেলে, আপনি এটি দেখতে সক্ষম হবেন:
3. একটি ইমেজ-স্লাইডার কাস্টম উপাদান তৈরি করছেন?
কিভাবে একটি ইমেজ স্লাইডার তৈরি করবেন?
এই ইমেজ স্লাইডারের জন্য, কৌণিক ক্লিক বাইন্ডিং ব্যবহার করে বোতাম বাইন্ড করুন। আমরা ইমেজ, Alt ট্যাগ, লিঙ্ক ইত্যাদি সম্বলিত অবজেক্টের একটি অ্যারে তৈরি করব। আমরা এই ছবিগুলিকে একে অপরের নীচে একটি পাত্রে রাখব এবং ক্লিক করলে কনটেইনারটিকে অনুবাদ করব।
আমরা একটি ইমেজ-স্লাইডার উপাদান তৈরি করতে যাচ্ছি এবং তারপর সেটিকে কৌণিক-উপাদানে রূপান্তরিত করব।
- ছবি এবং শিরোনাম জন্য ধারক.
- ডেটা ধারণকারী একটি অ্যারে
- ডেটা আবদ্ধ করার জন্য টেমপ্লেট
4. ইমেজ-স্লাইডার উপাদান প্রয়োগ করুন
যেকোনো প্রকল্পের সাথে শুরু করার একাধিক উপায় রয়েছে, এই ক্ষেত্রে, আমাদের প্রকল্পকে যতটা সম্ভব সহজ রাখতে এবং কৌণিক উপাদানগুলিতে মনোনিবেশ করতে, আমরা আপনাকে CSS-এর সাথে মৌলিক কোড প্রদান করেছি।
একটি অ্যারে এবং ডেটা পরিষেবা তৈরি করা
মনে রাখবেন, স্লাইডার অ্যারেতে থাকবে:
- স্লাইডারে ছবির URL-এর জন্য একটি img কী
- চিত্রের জন্য alt প্রদান করার জন্য একটি Alt ট্যাগ
- চিত্র সম্পর্কে বর্ণনা প্রদান করার জন্য একটি পাঠ্য
ইতিমধ্যেই আপনার 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 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 Directive ব্যবহার করে টেমপ্লেটের সাথে ডেটা আবদ্ধ করব এবং অবশেষে আমরা স্লাইডারটি কাজ করার জন্য টেমপ্লেটে রূপান্তর যোগ করব।
এতে তিনটি ধাপ রয়েছে:
- টেমপ্লেটে
sliderArrayবাঁধাই - স্লাইডার বোতামের জন্য ইভেন্ট বাইন্ডিং যোগ করা হচ্ছে
-
ngStyleএবংngClassব্যবহার করে CSS রূপান্তর যোগ করা
কম্পোনেন্টে স্লাইডঅ্যারে বাঁধাই
আমাদের কাছে একটি ধারক রয়েছে যেখানে একটি 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>
স্লাইডঅ্যারেতে ইভেন্ট বাইন্ডিং
একবার, ডেটা আবদ্ধ হয়ে গেলে, আমরা কৌণিক 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 ব্যবহার করে CSS রূপান্তর যোগ করা
প্রাথমিকভাবে আমরা সমস্ত চিত্র সেট করি, শূন্যের অস্বচ্ছতায়, নির্বাচিত সূচকটি চিত্র সূচকের সমান হয়ে গেলে আমরা ngClass directive ব্যবহার করে selected একটি শ্রেণি যুক্ত করি। এই selected শ্রেণীটি চিত্রটিতে একটি অস্বচ্ছতা যোগ করে যাতে ব্যবহারকারীর কাছে চিত্রটি দৃশ্যমান হয়।
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
</div>
এর পরে, Select 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পদ্ধতি চলছে
কৌণিক উপাদানের জন্য ছায়া DOM ব্যবহার করা
এখন আমাদের ইমেজ-স্লাইডার চলছে, আমাদের শুধু এটিকে একটি Angular Element করতে হবে।
মজার অংশ হল, কম্পোনেন্ট DOM, একটি ছায়া DOM তৈরির জন্য শুধুমাত্র একটি ছোটখাট পরিবর্তন আছে।
আমাদের ViewEncapsulation মডিউল আমদানি করতে হবে এবং এটি থেকে ShadowDom পদ্ধতি ব্যবহার করতে হবে।
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
এন্ট্রি কম্পোনেন্ট ব্যবহার করা
এন্ট্রি কম্পোনেন্ট হল একটি উপাদান যা কৌণিকভাবে লোড হয়। আপনি একটি NgModule এ বুটস্ট্র্যাপ করে একটি এন্ট্রি উপাদান নির্দিষ্ট করুন।
এখানে, আমরা @NgModule-এর ভিতরে entryComponents অ্যারেতে আমাদের SliderComponent উল্লেখ @NgModule
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
CreateCustomElement মডিউল আমদানি এবং ব্যবহার করা
এখানে, আমাদের @angular/elements. থেকে createCustomElement মডিউল ব্যবহার করতে হবে। createCustomElement ফাংশনের প্যারামিটার হিসাবে আপনাকে SliderComponent, ব্যবহার করতে হবে। এর পরে, আমাদের slider DOM-এ নিবন্ধন করতে হবে।
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 serve চালাব। এছাড়াও, আমরা ng package কমান্ড থেকে প্রাপ্ত gzip ব্যবহার করতে পারি, এটি বের করতে পারি এবং এটি একটি npm module হিসাবে প্রকাশ করতে পারি।