আয়নিক 4 বনাম আয়নিক 3 এর মধ্যে তুলনা

আয়নিক 3 বনাম আয়নিক 4

অয়নিক সম্পর্কে 4

এক বছরেরও বেশি সময় কাজ করার পরে, আয়নিক ফ্রেমওয়ার্ক টিম 4 সংস্করণ প্রকাশ করেছে, নতুন সংস্করণটি আমাদের কার্য সম্পাদনে উল্লেখযোগ্য পরিবর্তনগুলি সরবরাহ করে, একাধিক ফ্রেমওয়ার্কের সাথে সামঞ্জস্য করে (কেবলমাত্র পূর্ববর্তী সংস্করণ হিসাবে অ্যাঙ্গুলারের সাথে নয়), একটি নতুন ডকুমেন্টেশন এবং অন্যান্য অনেক উন্নতি যা আমরা এই নিবন্ধে বিশ্লেষণ করবে।

এই সংস্করণ পরিবর্তন সম্পর্কে অবশ্যই আপনার অনেক সন্দেহ - এবং সম্ভবত ভয় থাকবে। তবে সুসংবাদটি হ'ল আয়নিক 4 দ্বারা প্রদত্ত দুর্দান্ত উন্নতি সত্ত্বেও, আয়নিক 3 থেকে আয়নিক 4-তে স্থানান্তর করা অত্যন্ত সহজ!

এই নিবন্ধে আমি আয়নিক 4 এবং আয়নিক 3 এর মধ্যে তুলনাটি পাশাপাশি নতুনত্ব এবং নতুন সংস্করণটির নতুন ধারণাগুলি ব্যাখ্যা করতে চাই। আসুন আমরা নতুন আয়নিক সিএলআই এবং নতুন রাউটার কীভাবে ব্যবহার করব তার ব্যবহারিক উদাহরণগুলি দেখুন। তারপরে আমি আপনাকে আয়নিক 3 থেকে আয়নিক 4 এ কীভাবে আপনার অ্যাপ্লিকেশনগুলি স্থানান্তর করতে পারি সে সম্পর্কে আপনাকে গাইড করব।

ওয়েব উপাদান

আয়নিক ফ্রেমওয়ার্ক 4 সম্পূর্ণরূপে ওয়েব এপিআইগুলি ব্যবহার করার জন্য পুনরায় লেখা হয়েছিল এবং প্রতিটি উপাদান একটি ওয়েব উপাদান হিসাবে প্যাকেজ করা হয়। এটি কাঠামোটিকে ভবিষ্যতে প্রজেক্ট করার অনুমতি দেয়। ওয়েব উপাদান তৈরিতে সহায়তা করতে, দলটি স্টেনসিল নামে একটি সরঞ্জাম তৈরি করেছিল।

ওয়েব উপাদানগুলি কী কী?

ওয়েব উপাদানগুলি ওয়েব এপিআইয়ের একটি সেট যা আপনাকে পুনরায় ব্যবহারযোগ্য এবং এনক্যাপসুলেটেড এমন এইচটিএমএল ট্যাগ তৈরি করতে দেয়।

ওয়েব উপাদানগুলি ব্যাখ্যা করার একটি উপায় হ'ল ওপেন ওয়েব প্রযুক্তি ব্যবহার করে তৈরি করা পুনরায় ব্যবহারযোগ্য ব্যবহারকারী ইন্টারফেস উইজেট হিসাবে তাদের কল্পনা করা। এগুলি ব্রাউজারের অংশ, এবং তাই বাহ্যিক গ্রন্থাগারগুলির প্রয়োজন হয় না।

ওয়েব উপাদানগুলির সাহায্যে, আপনি HTML, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে প্রায় যা কিছু করতে পারেন তা তৈরি করতে পারেন। এইভাবে আপনি একটি পোর্টেবল উপাদান তৈরি করতে পারেন যা সহজেই পুনরায় ব্যবহার করা যায়।

ওয়েব উপাদানগুলি ব্রাউজারকে এমন করে তোলে যে আরও বেশি কাজ করে এবং এইভাবে তারা আধুনিক অ্যাপ্লিকেশনগুলির কার্য সম্পাদন এবং লোডের সময়ে গুরুত্বপূর্ণ উন্নতি সরবরাহ করে।

ওয়েব উপাদানগুলি নীচের বৈশিষ্ট্যের উপর ভিত্তি করে:

  • কাস্টম উপাদানসমূহ: নতুন ধরণের ডিওএম উপাদানগুলির নকশা এবং ব্যবহারের জন্য ঘাঁটি এবং মৌলিক বিষয়গুলি সংজ্ঞায়িত করে।
  • ছায়া ডোম: একটি ওয়েব উপাদানগুলির মধ্যে কীভাবে এনক্যাপসুলেটেড শৈলী এবং কোড ব্যবহার করবেন তা নির্ধারণ করে।
  • এইচটিএমএল আমদানি: মূলত এইচটিএমএল ডকুমেন্টকে অন্য একটি HTML ডকুমেন্টে অন্তর্ভুক্ত করা ও পুনরায় ব্যবহার করার উপায় নির্ধারণ করে।
  • এইচটিএমএল টেমপ্লেট: কোডটি কীভাবে টুকরো টুকরো করে ঘোষণা করতে হবে যা পৃষ্ঠাটি লোড হওয়ার সময় ব্যবহৃত হবে না তবে পরে রানটাইমে ইনস্ট্যান্ট করা যেতে পারে।

অন্যান্য ফ্রেমওয়ার্কের সাথে সামঞ্জস্যতা

আয়নিক ফ্রেমওয়ার্ক এর সূচনা থেকেই অ্যাঙ্গুলার ব্যবহার করে নির্মিত হয়েছিল। তবে এখন ওয়েব উপাদানগুলির জনপ্রিয়তা এবং সমর্থন সহ এটি পরিবর্তিত হয়েছে।

আয়নিকের এই নতুন সংস্করণটির দুর্দান্ত পরিবর্তনগুলির মধ্যে একটি হ'ল এটি বেস কাঠামোর থেকে সম্পূর্ণ স্বতন্ত্র (আগে এই জায়গাটি কেবল কৌণিক দ্বারা দখল করা হয়েছিল)।

আয়নিক ফ্রেমওয়ার্কের উপাদানগুলি, যেমন <আইওন-বাটন>, এখন ওয়েব উপাদান হিসাবে এনক্যাপুলেটেড, তাই এখন আর বেস কাঠামোর সাথে আবদ্ধ হওয়ার প্রয়োজন নেই। ওয়েব উপাদানগুলি যে কোনও ফ্রেমওয়ার্কের সাথে কাজ করে, বাস্তবে আপনি যদি পছন্দ করেন তবে আপনি কোনও ফ্রেমওয়ার্ক ব্যবহার করতে পারবেন না।

আয়নিক ফ্রেমওয়ার্ক টিম এই পরিবর্তনের সাথে কী ইচ্ছে করে তা হ'ল আয়নিক একটি ইউআই ফ্রেমওয়ার্ক যা প্রোগ্রামাররা যে প্রযুক্তি ব্যবহার করে তা নিয়ে কাজ করতে পারে। এটি ভবিষ্যতের অ্যাপ্লিকেশনগুলির জন্য দরজা উন্মুক্ত করে যা ভিউ বা অয়ন ওয়েব ওয়েব উপাদান ব্যবহার করে প্রতিক্রিয়াতে তৈরি করা যেতে পারে।

আয়নিক 4 এ সিএনএলআই সিএনআই 4 এটির বৈশিষ্ট্যগুলি এবং এর গতি এবং ব্যবহারের স্বাচ্ছন্দ্যে পুরোপুরি উন্নত করা হয়েছে।

এটি ব্যবহার করার জন্য, আমাদের অবশ্যই আমাদের বিকাশের পরিবেশে সিএলআইয়ের সর্বশেষতম সংস্করণ থাকতে হবে। আমরা নিম্নলিখিত কমান্ডটি চালিয়ে এটি ইনস্টল করতে পারি:

এনএমপি ইনস্টল -জি আয়নিক @ সর্বশেষ
সিএলআইয়ের সর্বশেষতম সংস্করণটি ব্যবহার করার জন্য আমাদের অবশ্যই নোড ৮.৯ বা তার চেয়ে বেশি উচ্চতর ইনস্টল করা থাকতে হবে N

নতুন সিএলআই ইনস্টল হয়ে গেলে, আমরা এখন আয়নিক ৪ দিয়ে আমাদের প্রথম অ্যাপ্লিকেশনটি তৈরি করতে পারি command

আয়নিক শুরু অ্যাপনাম ফাঁকা - টাইপ = কৌণিক

appName আপনার প্রকল্পের নাম

ফাঁকা হ'ল টেম্পলেট যা আমরা অ্যাপ্লিকেশনটির কঙ্কাল তৈরি করতে বেছে নিই

প্রকার = কৌণিক হ'ল প্রকল্পের ধরণ

তারপরে ব্রাউজারে আপনার অ্যাপ্লিকেশনটি পরীক্ষা করতে আপনি আয়নিক 3-তে আগে ব্যবহার করেছি একই আদেশটি চালাতে পারেন।

আয়নিক পরিবেশন

এটি আমাদের নতুন আয়নিক 4 অ্যাপ্লিকেশনটির কাঠামো সিএলআই দ্বারা উত্পন্ন:

এই নতুন সিএলআই সহ, আমাদের নতুন পৃষ্ঠা, উপাদান, নির্দেশিকা এবং পরিষেবাগুলি তৈরি করতে কনসোল কমান্ড ব্যবহার করার সম্ভাবনা রয়েছে। আসুন কয়েকটি উদাহরণ দেখুন:

পাতা তৈরি করুন :

আয়নিক জি পৃষ্ঠা ব্যবহারকারী

একটি নতুন পরিষেবা তৈরি করুন:

আয়নিক জি পরিষেবা আইটেম

এগুলি কেবলমাত্র কয়েকটি নতুন কার্যকারিতা যা নতুন সিএলআই, নতুন আয়নিক ডকুমেন্টেশন এবং বিশদগুলির জন্য বৈশিষ্ট্যগুলি ঘুরে দেখায়।

আয়নিক নেভিগেশন 4

নেভিগেশন এবং রাউটারে দুর্দান্ত পরিবর্তন রয়েছে যা আমার মতে এটি অনেক সহজ এবং আরও বোধগম্য। আয়নিক 4 এখন অ্যাংুলার রাউটার ব্যবহার করে।

আয়নিক 3 একটি সাধারণ স্ট্যাকের উপর ভিত্তি করে একটি নেভিগেশন ব্যবহার করেছে যেখানে নতুন পৃষ্ঠাগুলি স্ট্যাকের উপরে ধাক্কা দেওয়ার উপরে স্থাপন করা হয়েছিল এবং যখন আমরা পিছনের দিকে নেভিগেট করতে চাই তখন আমরা কেবল শেষ পৃষ্ঠার একটি পপ তৈরি করি।

প্রচলিত ওয়েবসাইটগুলি রৈখিক ইতিহাস ব্যবহার করে যার অর্থ ব্যবহারকারী কোনও পৃষ্ঠায় নেভিগেট করে এবং নেভিগেট করতে পিছনে বোতাম টিপতে পারে। আয়নিক ফ্রেমওয়ার্কে, অ্যাপ্লিকেশনগুলি সমান্তরাল নেভিগেশনকে অনুমতি দিয়ে এটি আরও একধাপ এগিয়ে নিয়ে যেতে পারে। যার অর্থ যে একাধিক নেভিগেশন ব্যাটারি থাকা এবং যে কোনও সময় এগুলি বিনিময় সম্ভব। এর উদাহরণ হ'ল এক পৃষ্ঠায় ট্যাবগুলি সহ একটি সাইড মেনু সহ অন্য একটি নেভিগেশন থাকবে।

উল্লেখ করার মতো গুরুত্বপূর্ণ বিষয়টি হ'ল আয়নিক 4 এ নাভকন্ট্রোলার এবং আয়ন-নাভ অচল হয়ে গেছে। আপনি সেগুলি এখনও ব্যবহার করতে পারেন তবে কেবলমাত্র যদি আপনার অ্যাপ্লিকেশন অলস লোডিং ব্যবহার না করে।

আয়ন-ন্যাভ এবং নাভাকন্ট্রোলারের পরিবর্তে, অয়ন 4 এখন @ কৌনিক / রাউটার ব্যবহার করে।

যেমনটি আমরা ইতিমধ্যে বলেছি, একটি কৌণিক ধরণের অ্যাপ্লিকেশন তৈরি করার সময়, আয়নিক 4 অ্যাঙ্গুলার 6 এর নেভিগেশন ব্যবহার করে। এ কারণেই কৌনিক প্রকারের আমাদের আয়নিক 4 অ্যাপ্লিকেশন তৈরি করার সময় আমরা স্বয়ংক্রিয়ভাবে এসআরসি / অ্যাপে অবস্থিত একটি অ্যাপ-রাউটিং.মডিউল.সেট ফাইল তৈরি করি।

আসুন দেখুন এই ফাইলটি কী আছে এবং আয়নিক 3-তে একটি অ্যাপ্লিকেশনটির সাথে কী পার্থক্য রয়েছে।

আয়নিক 4 এ:

'@ কৌণিক / কোর' থেকে {এনজিএমডিউল import আমদানি করুন;
'@ কৌনিক / রাউটার' থেকে {রুটগুলি, রাউটারমোডুল} আমদানি করুন;
কনস্ট রুট: রুটস = ​​[
  {পথ: '', পুনর্নির্দেশ করুন: 'হোম', প্যাথ ম্যাচ: 'পূর্ণ'},
  {পথ: 'হোম', লোডচিল্ডেন: './pages/home/home.module# হোম পেজ মোডুল'},
];
@ এনজিএমডিউল ({
আমদানি: [রাউটারমডিউল.রোট (রুট))],
রফতানি: [রাউটারমডিউল]
})
এক্সপোর্ট ক্লাস অ্যাপরোটিংমডিউল {

হোমপেজে নেভিগেট করতে আমাদের অবশ্যই নিম্নলিখিত কাজগুলি করতে হবে:

'@ কৌনিক / রাউটার' থেকে {রাউটার} আমদানি করুন;
কনস্ট্রাক্টর (প্রাইভেট রাউটার: রাউটার)}
টোহোম () ig নেভিগেট করুন
  this.router.navigate (['/ home']);
}

আয়নিক 3 এ:

'আয়নিক-কৌণিক' থেকে import নাভকন্ট্রোলার import আমদানি করুন;
'./pages/home/home' থেকে 'হোমপেজ' আমদানি করুন
কনস্ট্রাক্টর (সর্বজনীন NavCtrl: NavController) {
টোহোম () ig নেভিগেট করুন
  this.navCtrl.push (HomePage);
}

এটি বোঝা গুরুত্বপূর্ণ যে আয়নিক 4-তে, অ্যাপ্লিকেশন নেভিগেট করার জন্য নাভ্যাক্ট্রোলার আর ব্যবহার করা হয় না।

অয়ন 4 এ নেভিগেশন উদাহরণ

আসুন আমরা আরও একধাপ এগিয়ে নিয়ে আসি এবং আয়নিক 4-তে দুটি পৃষ্ঠার মধ্যে কীভাবে তথ্য পাস করব তা দেখুন see

// আইটেমটি শৈলীর একটি অবজেক্ট: {শিরোনাম: "কিছু শিরোনাম", বিবরণ: "কিছু বিবরণ"}
আইটেমসিলেক্ট (আইটেম) {
  this.router.navigate (["/ হোম", আইটেম]);
}

তারপরে, আমাদের হোমপেজে আইটেমের অবজেক্টটি পেতে, আমরা অ্যাক্টিভেটেডরউট ব্যবহার করি।

'@ কৌনিক / রাউটার' থেকে {অ্যাক্টিভেটরউউট import আমদানি করুন;
রফতানি শ্রেণি হোমপেজ অননিট প্রয়োগ করে {
আইটেম: যে কোনও;
কনস্ট্রাক্টর (ব্যক্তিগত রুট: অ্যাক্টিভেটেড রুট) {
 
ngOnInit () {
   this.route.params.subscribe (ডেটা => {
     this.item = ডেটা;
   })
}
}

নেভিগেশনের লাইফ চক্র (লাইফ সাইকেল)

আয়নিক 3 তে ব্যবহৃত লাইফেসাইকেলগুলি (ইংরেজিতে লাইফিসাইকেল হিসাবে পরিচিত) উদাহরণস্বরূপ আয়নওয়িললয়েড আর ব্যবহার করা হবে না 4 এখন আমরা এনজিওনইনিট এবং এনজিএফটারভিউআইনিটের মতো কৌণিক জীবনচক্র ব্যবহার করব।

আপনি যদি ইতিমধ্যে কৌণিক এ প্রোগ্রাম করে থাকেন তবে এটি আপনার পরিচিত হবে। আপনি যদি কৌনিক সম্পর্কে আরও জানতে চান তবে আমি আপনাকে এই পোস্টটি পড়ার পরামর্শ দিচ্ছি।

routerLink

আয়নিক 3 এ ইভেন্টটি (ক্লিক) এইচটিএমএল থেকে পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে ব্যবহৃত হয়। আয়নিক 4 এ আমরা রাউটারলিঙ্কটি ব্যবহার করব, কারণ এটি কৌণিক অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়।

একটি উদাহরণ হবে:

<আয়ন-বোতাম [রাউটারলিঙ্ক] = "['/ পণ্য / 123']"> পণ্য 123  এ যান

মডিউল

এটি উল্লেখ করা জরুরী যে app.module.ts ফাইলে পৃষ্ঠা এবং পরিষেবাগুলি আমদানি করার দরকার নেই, যা আমার মতে প্রকল্পটি অনেক সহজ এবং আরও সুসংহত করে তোলে।

প্রতিটি পৃষ্ঠার জন্য সেই পৃষ্ঠাটির একটি মডিউল থাকবে। উদাহরণস্বরূপ, আমরা যদি কোনও পৃষ্ঠায় প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করতে চাই, আমরা কেবল পৃষ্ঠা বা পৃষ্ঠাগুলিতে এটি ব্যবহার করব এমন প্রতিক্রিয়াশীল ফর্মগুলি মডেল আমদানি করি।

আয়নিক 4-তে আমাদের উদাহরণ অ্যাপ্লিকেশনটির সিআরসি / অ্যাপ / পৃষ্ঠাগুলি / নতুন-আইটেম / আধুনিক আইটেমের নীচের কোডটি যা আপনি বিনামূল্যে ডাউনলোড করতে পারেন।

'@ কৌণিক / কোর' থেকে {এনজিএমডিউল import আমদানি করুন;
'@ কৌণিক / সাধারণ' থেকে {কমনমোডুল import আমদানি করুন;
'@ কৌণিক / ফর্ম' থেকে import ফর্মস মড্যুল, প্রতিক্রিয়াশীল ফর্মস মোডুল import আমদানি করুন;
'@ কৌনিক / রাউটার' থেকে {রুটগুলি, রাউটারমোডুল} আমদানি করুন;
'@ আয়নিক / কৌণিক' থেকে import আয়নিকমোডুল import আমদানি করুন;
'./new-item.page' থেকে 'নতুন আইটেমপেজ' আমদানি করুন;
কনস্ট রুট: রুটস = ​​[
  {
    পথ: '',
    উপাদান: নিউ আইটেমপেজ
  }
];
@ এনজিএমডিউল ({
  আমদানি: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    রাউটারমডিউল.চিল্ড (রুট)
  ],
  ঘোষণা: [নিউ আইটেমপেজ]
})
এক্সপোর্ট ক্লাস NewItemPageModule}

আয়নিক 3 থেকে আয়নিক 4 এ কীভাবে আপনার অ্যাপ্লিকেশন স্থানান্তর করবেন?

আপনি সম্ভবত ভাবছেন যে কীভাবে কোনও বিদ্যমান অ্যাপ্লিকেশনটি আয়নিক 3 থেকে আয়নিকের মধ্যে 1 এ স্থানান্তরিত করতে হয় 4.

সত্যটি হ'ল মাইগ্রেশন প্রক্রিয়াটি বেশ সহজ এবং ব্যক্তিগতভাবে কোনও সমস্যা তৈরি হয়নি।

আপনি মাইগ্রেশন লিন্টারটিও ব্যবহার করতে পারেন যা এমন একটি সরঞ্জাম যা স্বয়ংক্রিয়ভাবে আপনার কোডটি পরীক্ষা করে এবং আপনাকে কী পরিবর্তন করা উচিত তা আপনাকে বলে।

আয়নিক 3 বনাম আয়নিক 4 এ উপসংহার

এই নিবন্ধে আমরা আয়নিক 4 এবং আয়নিক 3 এর মধ্যে মূল পার্থক্যগুলির পাশাপাশি অয়নিক ফ্রেমওয়ার্ক 4.0 দ্বারা প্রস্তাবিত নতুন ধারণাগুলি সম্পর্কে কথা বলব t এটি বিল্ট-ইন পারফরম্যান্সকে বাড়িয়ে তোলে, এর সাথে কাজ করা সহজ এবং সবচেয়ে গুরুত্বপূর্ণ হল "ভবিষ্যতের প্রমাণ"। ওয়েব উপাদানগুলিতে আমাদের সমস্ত UI উপাদান পুনর্নির্মাণের মাধ্যমে এবং আপনার কোডবেস যেহেতু ওপেন ওয়েব প্রযুক্তিতে নির্মিত তাই আরও স্থিতিশীল হবে।

এখন, যদি আপনার অয়নিক 3 অ্যাপটি প্রায় সম্পূর্ণ হয়ে যায় এবং / অথবা কোনও সংস্থা / ব্যবসায়ের জন্য তৈরি করা হয়, তবে সম্ভবত এটি আপডেট করার সেরা সময় নয়।

আমি আশা করি এটি আপনাকে আয়নিক ফ্রেমওয়ার্কের নতুন সংস্করণ এবং সর্বোপরি স্থানান্তর সম্পর্কে ভয়কে শান্ত করতে আরও বুঝতে সহায়তা করেছে helped উপরে উল্লিখিত হিসাবে, আয়নিক 3 থেকে আয়নিক 4 এ স্থানান্তরিত হওয়ার অর্থ আপনার অ্যাপ্লিকেশনটি পুনর্লিখনের অর্থ নয় (যেমনটি আয়নিক 1 থেকে আয়নিক 2 তে স্থানান্তরিত হয়েছিল)।

মূলত এখানে আপলোড করা হয়েছে