Ionic ফ্রেমওয়ার্কটি মূলত Angular এর সাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে। Ionic এবং Angular একসাথে ব্যবহার করলে, আপনি রেসপনসিভ এবং ইন্টারঅ্যাকটিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারেন। Angular এর সাথে Ionic ইন্টিগ্রেশন সাধারণত Angular অ্যাপ্লিকেশন স্ট্রাকচারের ওপর ভিত্তি করে কাজ করে এবং এটি Angular এর সমস্ত সুবিধা যেমন Routing, Data Binding, Directives, Services ইত্যাদি Ionic অ্যাপে ব্যবহার করতে দেয়।
এখানে Ionic এর সাথে Angular ইন্টিগ্রেট করার জন্য ধাপে ধাপে নির্দেশনা দেওয়া হলো।
১. Ionic এবং Angular সেটআপ
Ionic এবং Angular একসাথে ব্যবহার করতে হলে প্রথমে Ionic CLI (Command Line Interface) ইনস্টল করতে হবে।
১.১ Ionic CLI ইনস্টল করা
Ionic CLI ইনস্টল করতে টার্মিনাল বা কমান্ড প্রম্পটে এই কমান্ডটি ব্যবহার করুন:
npm install -g @ionic/cli
১.২ নতুন Ionic অ্যাপ তৈরি করা
Ionic CLI দিয়ে একটি নতুন Ionic অ্যাপ তৈরি করুন। Ionic Angular প্রকল্পের জন্য angular টেমপ্লেট নির্বাচন করুন।
ionic start myApp blank --type=angular
এখানে:
myApp: আপনার অ্যাপের নাম।blank: এটি একটি সিম্পল টেমপ্লেট। আপনি চাইলেtabs,sidemenuঅথবা অন্যান্য টেমপ্লেটও ব্যবহার করতে পারেন।--type=angular: Angular ফ্রেমওয়ার্ক ব্যবহার করার জন্য এটি নিশ্চিত করবে।
১.৩ প্রজেক্ট ফোল্ডারে যান
cd myApp
২. Ionic এবং Angular এর সাথে Routing কনফিগারেশন
Ionic অ্যাপ্লিকেশনটি সাধারণত Angular Routing ব্যবহার করে এক পেজ থেকে অন্য পেজে নেভিগেট করতে। Ionic এ ion-router-outlet কম্পোনেন্টটি Angular এর RouterOutlet এর মতো কাজ করে।
২.১ App Routing Module কনফিগারেশন
Ionic প্রজেক্টে app-routing.module.ts ফাইলে রাউটিং কনফিগারেশন থাকে। এখানে আপনি রাউটগুলি ডিফাইন করতে পারেন।
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
},
{
path: 'about',
loadChildren: () => import('./about/about.module').then(m => m.AboutPageModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule {}
২.২ IonRouterOutlet এর ব্যবহার
এটি মূল রাউটিং পয়েন্ট, যেখানে অ্যাপের পেজ রেন্ডার হয়।
<ion-router-outlet></ion-router-outlet>
এই কম্পোনেন্টটি app.component.html ফাইলে থাকে এবং রাউটিং ব্যবহার করতে আপনাকে এই কম্পোনেন্টের সাহায্য নিতে হবে।
৩. Angular Services এবং Dependency Injection
Angular এর services এবং dependency injection Ionic অ্যাপ্লিকেশনেও কাজ করে। আপনি Ionic অ্যাপে সার্ভিস ব্যবহার করে ডেটা ম্যানেজমেন্ট, HTTP কলস এবং অন্যান্য ফাংশনালিটি যুক্ত করতে পারেন।
৩.১ Service তৈরি করা
এখানে একটি উদাহরণ হিসেবে একটি সার্ভিস তৈরি করা হলো যা HTTP কল করার জন্য ব্যবহৃত হবে।
ionic generate service api
এরপর api.service.ts ফাইলে HTTP কল করার কোড লিখুন:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get('https://api.example.com/data');
}
}
৩.২ Service ব্যবহার করা
সার্ভিসটি অ্যাপের অন্যান্য অংশে ব্যবহার করতে, প্রথমে এটি ইনজেক্ট করতে হবে:
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
data: any;
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.getData().subscribe(response => {
this.data = response;
});
}
}
৪. Ionic Components এবং Angular Directives
Ionic ফ্রেমওয়ার্কে অনেক প্রি-বিল্ট UI কম্পোনেন্ট থাকে যেমন ion-header, ion-footer, ion-content, ion-card ইত্যাদি, যা আপনি Angular Directives এর সাথে ব্যবহার করতে পারেন।
৪.১ Ionic Components ব্যবহার
<ion-header>
<ion-toolbar>
<ion-title>Home Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
This is an example card.
</ion-card-content>
</ion-card>
</ion-content>
এখানে ion-header, ion-toolbar, এবং ion-card কম্পোনেন্ট ব্যবহৃত হয়েছে, যা UI উপাদান হিসেবে দেখাবে।
৫. Ionic CLI এবং Angular CLI এর ইন্টিগ্রেশন
Ionic CLI এবং Angular CLI একসাথে কাজ করে। আপনি Ionic প্রজেক্টের মধ্যে Angular CLI কমান্ড ব্যবহার করতে পারবেন।
৫.১ App চালানো
Angular এর সাথে ইন্টিগ্রেটেড Ionic অ্যাপ চালানোর জন্য এই কমান্ড ব্যবহার করুন:
ionic serve
এটি আপনার Ionic অ্যাপ্লিকেশনকে লোকাল সার্ভারে চালাবে এবং আপনি ব্রাউজারে দেখতে পারবেন।
সারাংশ
Ionic এবং Angular একসাথে কাজ করলে, আপনি একটি শক্তিশালী এবং রেসপনসিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারবেন। Angular এর সাথে Ionic Integration এর মাধ্যমে আপনি সহজে রাউটিং, সার্ভিস, ডেটা ম্যানেজমেন্ট এবং UI কম্পোনেন্ট ব্যবহার করতে পারবেন। Ionic এবং Angular এর কম্বিনেশন আপনাকে একসাথে মোবাইল অ্যাপ ডেভেলপমেন্টের সমস্ত সুবিধা প্রদান করে।
Read more
