ডেটা-বাঁধাই
আপনি আপনার ওয়েবপৃষ্ঠাটি তৈরি করে ঘুরে দেখেন এবং যখনই আপনার মনে হয় আপনার ডায়নামিক ডেটা থাকবে { কৌণিকর পরে আপনাকে একটি $ স্কোপ হ্যান্ডলার সরবরাহ করবে, যা আপনি পপুলেশন করতে পারবেন (স্থিরভাবে বা ওয়েব সার্ভারে কলগুলির মাধ্যমে)।
এটি ডেটা-বাইন্ডিংয়ের একটি ভাল বোঝার। আমি মনে করি আপনি এটি নিচে পেয়েছেন।
ডিওএম ম্যানিপুলেশন
সাধারণ ডিওএম ম্যানিপুলেশনের জন্য, যা ডেটা ম্যানিপুলেশনের সাথে জড়িত না (যেমন: মাউসহোভারের রঙ পরিবর্তন, ক্লিকে উপাদানগুলি লুকানো / দেখানো), jQuery বা পুরাতন-স্কুল জেএসই যথেষ্ট এবং ক্লিনার। এটি ধরে নিয়েছে যে কৌণিকের এমভিসি-র মডেল এমন কোনও কিছু যা পৃষ্ঠায় ডেটা প্রতিবিম্বিত করে এবং তাই রঙ, প্রদর্শন / আড়াল ইত্যাদির মতো CSS বৈশিষ্ট্যগুলি মডেলকে প্রভাবিত করে না।
আমি এখানে "সরল" ডিওএম ম্যানিপুলেশন পরিষ্কার হওয়া সম্পর্কে আপনার বক্তব্যটি দেখতে পাচ্ছি, তবে কেবল খুব কমই এবং এটি সত্যই "সরল" হতে হবে। আমি মনে করি DOM ম্যানিপুলেশন হ'ল ডেটা বাইন্ডিংয়ের মতো একটি ক্ষেত্র, যেখানে অ্যাংুলার সত্যিই জ্বলে। এটি বোঝার সাথে সাথে অ্যাংুলার কীভাবে তার দৃষ্টিভঙ্গি বিবেচনা করে তা দেখতে আপনাকে সহায়তা করবে।
আমি কৌনিক উপায়টি ডিওএম ম্যানিপুলেশনে ভ্যানিলা জেএস পদ্ধতির সাথে তুলনা করে শুরু করব। Ditionতিহ্যগতভাবে, আমরা এইচটিএমএলকে কিছু "না করে" বলে মনে করি এবং এগুলি লিখি। সুতরাং, "অনক্লিক" ইত্যাদির মতো ইনলাইন জেসগুলি খারাপ অনুশীলন কারণ তারা এইচটিএমএল-এর প্রসঙ্গে "করণীয়" রাখে, যা "না" করে। কৌণিক তার ধারণাটি মাথায় ফেলেছে। আপনি যখন নিজের মতামতটি লিখছেন, আপনি এইচটিএমএলকে অনেকগুলি জিনিস "করতে" সক্ষম বলে মনে করেন। এই ক্ষমতা কৌণিক নির্দেশে বিমূর্ত করা হয়, তবে যদি তারা ইতিমধ্যে উপস্থিত থাকে বা আপনি সেগুলি লিখে থাকেন তবে আপনাকে কীভাবে এটি "কীভাবে" করা হয় তা বিবেচনা করতে হবে না, আপনি কেবল এই "বর্ধিত" এইচটিএমএলে আপনাকে উপলব্ধ শক্তিটি ব্যবহার করেন যা কৌণিক আপনি ব্যবহার করতে পারবেন। এর অর্থ হ'ল আপনার সমস্ত দর্শন যুক্তি সত্যই দৃশ্যে অন্তর্ভুক্ত রয়েছে, আপনার জাভাস্ক্রিপ্ট ফাইল না। আবার, যুক্তিটি হ'ল আপনার জাভাস্ক্রিপ্ট ফাইলগুলিতে লিখিত নির্দেশাবলী এইচটিএমএল এর সক্ষমতা বাড়ানো হিসাবে বিবেচনা করা যেতে পারে, তাই আপনি ডিওএমকে নিজেরাই হেরফের করার বিষয়ে উদ্বেগ করতে দিন (তাই কথা বলতে)। আমি একটি সহজ উদাহরণ দিয়ে প্রদর্শন করব।
এটি আমরা ব্যবহার করতে চাই এমন মার্কআপ। আমি এটিকে স্বজ্ঞাত নাম দিয়েছি।
<div rotate-on-click="45"></div>
প্রথমত, আমি কেবল মন্তব্য করতে চাই যে আমরা যদি আমাদের এইচটিএমএলকে কাস্টম অ্যাংুলার ডাইরেক্টিভের মাধ্যমে এই কার্যকারিতাটি দিয়ে থাকি তবে আমরা ইতিমধ্যে সম্পন্ন করেছি । তাজা বাতাসের নিঃশ্বাস একটি মুহূর্ত যে আরও।
JQuery সহ বাস্তবায়ন
লাইভ ডেমো এখানে (ক্লিক করুন)।
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
কৌণিক সহ বাস্তবায়ন
লাইভ ডেমো এখানে (ক্লিক করুন)।
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
খুব হালকা, খুব পরিষ্কার এবং এটি কেবল একটি সাধারণ কারসাজি! আমার মতে, কৌণিক পদ্ধতির সমস্ত ক্ষেত্রে বিজয় রয়েছে, বিশেষত কীভাবে কার্যকারিতা বিমূর্ত হয় এবং ডোমে ডম ম্যানিপুলেশন ঘোষণা করা হয়। কার্যকারিতাটি এইচটিএমএল বৈশিষ্ট্যের মাধ্যমে উপাদানটির সাথে সংযুক্ত করা হয়, সুতরাং কোনও নির্বাচকের মাধ্যমে ডিওএমকে জিজ্ঞাসা করার দরকার নেই এবং আমাদের দুটি দুর্দান্ত বন্ধ রয়েছে - একটি নির্দেশিকা কারখানার জন্য একটি বন্ধ যেখানে নির্দেশের সমস্ত ব্যবহারের মধ্যে ভেরিয়েবলগুলি ভাগ করা হয় are , এবং linkফাংশন (বা compileফাংশন) এর প্রতিটি ব্যবহারের জন্য একটি বন্ধ closure
দ্বিমুখী ডেটা বাঁধাই এবং ডিওএম ম্যানিপুলেশনের জন্য নির্দেশনা কেবল কৌণিককে দুর্দান্ত করে তোলে makes কৌণিক সমস্ত কোডকে মডুলার, পুনরায় ব্যবহারযোগ্য এবং সহজেই টেস্টযোগ্য হতে প্রচার করে এবং এতে একটি একক পৃষ্ঠার অ্যাপ্লিকেশন রাউটিং সিস্টেমও অন্তর্ভুক্ত। এটি লক্ষণীয় গুরুত্বপূর্ণ যে jQuery হ'ল সাধারণত প্রয়োজনীয় সুবিধার্থে / ক্রস ব্রাউজার পদ্ধতির একটি গ্রন্থাগার , তবে একক পৃষ্ঠার অ্যাপ্লিকেশনগুলি তৈরি করার জন্য অ্যাঙ্গুলার একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত কাঠামো । কৌনিক স্ক্রিপ্টটি আসলে jQuery এর নিজস্ব "লাইট" সংস্করণ অন্তর্ভুক্ত করে যাতে কিছু অতি প্রয়োজনীয় পদ্ধতি উপলব্ধ থাকে। অতএব, আপনি যুক্তি দিতে পারেন যে কৌণিক আইএস ব্যবহার করে jQuery (হালকাভাবে) ব্যবহার করা হচ্ছে, তবে অ্যাঙ্গুলার আপনাকে অ্যাপস তৈরির প্রক্রিয়ায় সহায়তা করার জন্য আরও অনেক "ম্যাজিক" সরবরাহ করে।
এটি সম্পর্কিত সম্পর্কিত তথ্যের জন্য একটি দুর্দান্ত পোস্ট: আমার কাছে jQuery ব্যাকগ্রাউন্ড থাকলে আমি কীভাবে "AngularJS এ ভাবি"?
সাধারণ পার্থক্য।
উপরোক্ত বিষয়গুলি ওপি'র নির্দিষ্ট উদ্বেগগুলির লক্ষ্য। আমি অন্যান্য গুরুত্বপূর্ণ পার্থক্য একটি ওভারভিউ দেব। আমি প্রতিটি বিষয় সম্পর্কে অতিরিক্ত পড়ার পরামর্শ দিই।
কৌণিক এবং jQuery যুক্তিসঙ্গতভাবে তুলনা করা যাবে না।
কৌণিক একটি কাঠামো, jQuery একটি লাইব্রেরি হয়। ফ্রেমওয়ার্কগুলির নিজস্ব স্থান এবং লাইব্রেরিগুলির তাদের স্থান রয়েছে। তবে, কোনও প্রশ্ন নেই যে একটি ভাল কাঠামোর একটি লাইব্রেরির চেয়ে অ্যাপ্লিকেশন লেখার ক্ষেত্রে আরও বেশি ক্ষমতা রয়েছে। এটি ঠিক একটি কাঠামোর মূল বিষয়। আপনার কোডটি সরল জেএসে লিখতে আপনাকে স্বাগত জানানো হয়, বা আপনি সাধারণ ফাংশনগুলির একটি লাইব্রেরিতে যুক্ত করতে পারেন, বা বেশিরভাগ জিনিস সম্পাদন করার জন্য আপনার কোডটি খুব কমিয়ে আনতে একটি কাঠামো যুক্ত করতে পারেন। অতএব, আরও উপযুক্ত প্রশ্ন হ'ল:
কেন একটি কাঠামো ব্যবহার?
ভাল ফ্রেমওয়ার্কগুলি আপনার কোডকে আর্কিটেক্ট করতে সহায়তা করে যাতে এটি মডুলার (তাই পুনরায় ব্যবহারযোগ্য), ডিআরওয়াই, পঠনযোগ্য, পারফরম্যান্ট এবং সুরক্ষিত। jQuery একটি কাঠামো নয়, সুতরাং এই সম্মানগুলি সাহায্য করে না। আমরা সবাই jQuery স্প্যাগেটি কোডের টিপিকাল দেয়াল দেখেছি। এটি jQuery এর দোষ নয় - এটি এমন বিকাশকারীদের দোষ যারা আর্কিটেক্ট কোড কীভাবে জানেন না। যাইহোক, যদি ডেভসরা আর্কিটেক্ট কোড কীভাবে জানত, তবে তারা কিছুক্ষণের মধ্যে ন্যূনতম "কাঠামো" লিখে ফাউন্ডেশনটি সরবরাহ করবে (আকৃতিশব্দ, ইত্যাদি) আমি কিছুক্ষণ আগে আলোচনা করেছি, বা তারা এতে কিছু যুক্ত করবে For উদাহরণস্বরূপ, আপনি ভাল কোড লেখার জন্য আপনার কাঠামোর অংশ হিসাবে কাজ করতে প্রয়োজনীয় জেএস যুক্ত করতে পারে।
আধুনিক ফ্রেমওয়ার্কগুলি সরবরাহ করছে এমন কিছু জিনিস এখানে রয়েছে:
- টেমপ্লেট
- ডেটা-বাঁধাই
- রাউটিং (একক পৃষ্ঠার অ্যাপ্লিকেশন)
- পরিষ্কার, মডুলার, পুনরায় ব্যবহারযোগ্য আর্কিটেকচার
- নিরাপত্তা
- সুবিধার জন্য অতিরিক্ত ফাংশন / বৈশিষ্ট্য
আমি কৌণিক সম্পর্কে আরও আলোচনা করার আগে, আমি এটি উল্লেখ করতে চাই যে অ্যাঙ্গুলার কেবল তার ধরণের একমাত্র নয়। উদাহরণস্বরূপ, ডুরান্ডাল jQuery, নকআউট এবং প্রয়োজনীয় জেএস এর শীর্ষে নির্মিত একটি কাঠামো। আবার, jQuery নিজে থেকে, নকআউট, প্রয়োজনীয় জেএস এবং তাদের উপরে নির্মিত পুরো কাঠামোটি সরবরাহ করতে পারে না। এটি কেবল তুলনাযোগ্য নয়।
আপনার যদি কোনও গ্রহ ধ্বংস করতে হয় এবং আপনার একটি ডেথ স্টার থাকে তবে ডেথ স্টারটি ব্যবহার করুন।
কৌণিক (পুনর্বিবেচিত)
ফ্রেমওয়ার্কগুলি কী সরবরাহ করে সে সম্পর্কে আমার পূর্ববর্তী পয়েন্টগুলির উপর ভিত্তি করে, আমি কৌনিকগুলি তাদের সরবরাহ করে।
ডিওএম রেফারেন্স।
আমার উপরের উদাহরণে, এটি কেবল একেবারেই অনিবার্য যে কার্যকারিতা সরবরাহ করার জন্য jQuery কে DOM এ আটকানো উচিত। তার মানে ভিউ (এইচটিএমএল) কার্যকারিতা সম্পর্কে উদ্বিগ্ন (কারণ এটি কোনও ধরণের শনাক্তকারীর সাথে লেবেলযুক্ত - যেমন "চিত্র স্লাইডার") এবং জাভাস্ক্রিপ্ট সেই কার্যকারিতা সরবরাহ সম্পর্কে উদ্বিগ্ন। কৌণিক বিমূর্ততার মাধ্যমে সেই ধারণাটি সরিয়ে দেয়। অ্যাংুলার সহ সঠিকভাবে লিখিত কোডের অর্থ ভিউটি তার নিজস্ব আচরণ ঘোষণা করতে সক্ষম। আমি যদি একটি ঘড়ি প্রদর্শন করতে চাই:
<clock></clock>
সম্পন্ন.
হ্যাঁ, এর অর্থ কিছু বোঝাতে আমাদের জাভাস্ক্রিপ্টে যেতে হবে, তবে আমরা jQuery পদ্ধতির বিপরীতে এটি করছি। আমাদের কৌণিক নির্দেশিকা (যা এটি নিজের ছোট্ট পৃথিবীতে রয়েছে) এইচটিএমএলকে "যুক্ত" করেছে এবং এইচটিএমএল কার্যকারিতাটিকে নিজের মধ্যে হুক করে।
এমভিডাব্লু আর্কিটেকচার / মডিউল / নির্ভরতা ইনজেকশন
কৌণিকটি আপনাকে আপনার কোড গঠনের জন্য একটি সহজ উপায় দেয়। দেখুন (এইচটিএমএল) অন্তর্ভুক্ত জিনিসগুলি দেখুন, বর্ধিত দর্শন ক্রিয়াকলাপটি নির্দেশের সাথে সম্পর্কিত, অন্যান্য যুক্তিতে (অ্যাজাক্স কলগুলির মতো) এবং ফাংশনগুলি পরিষেবার সাথে সম্পর্কিত, এবং পরিষেবার সাথে সংযোগ এবং যুক্তির সাথে সংযোগকারীরা নিয়ন্ত্রণকারীদের অন্তর্ভুক্ত। আরও কিছু কৌণিক উপাদান রয়েছে যা পরিষেবাদিগুলির কনফিগারেশন এবং সংশোধন ইত্যাদির ক্ষেত্রে সহায়তা করে you আপনি যে কোনও কার্যকারিতা তৈরি করেন তা ইনজেক্টর সাবসিস্টেমের মাধ্যমে আপনার প্রয়োজনীয় যে কোনও জায়গায় স্বয়ংক্রিয়ভাবে উপলব্ধ হয় যা অ্যাপ্লিকেশন জুড়ে নির্ভরতা ইনজেকশনের যত্ন নেয়। কোনও অ্যাপ্লিকেশন (মডিউল) লেখার সময়, আমি এটিকে আবার পুনরায় ব্যবহারযোগ্য মডিউলগুলিতে বিভক্ত করি, যার প্রত্যেকে তাদের নিজস্ব পুনরায় ব্যবহারযোগ্য উপাদানগুলি দিয়ে রেখেছি এবং তারপরে এটিকে বড় প্রকল্পে অন্তর্ভুক্ত করব। একবার কৌণিক সমস্যাটি সমাধান করার পরে আপনি ' ভবিষ্যতে পুনরায় ব্যবহারের জন্য কার্যকর এবং কাঠামোগত এবং সহজেই পরবর্তী প্রকল্পে অন্তর্ভুক্ত হয়ে এমনভাবে এটি স্বয়ংক্রিয়ভাবে সমাধান করা হয়েছে। একজনএই সকলের কাছে বিশাল বোনাস হ'ল আপনার কোডটি পরীক্ষা করা আরও সহজ হবে।
কৌণিক জিনিসগুলিকে "কাজ" করা সহজ নয়।
শুভতা ধন্যবাদ। পূর্বোক্ত jQuery স্প্যাগেটি কোডটি এমন কোনও দেবের ফলস্বরূপ যা কিছু "কাজ" করেছিল এবং তারপরে এগিয়ে চলেছে। আপনি খারাপ কৌণিক কোড লিখতে পারেন, তবে এটি করা আরও বেশি কঠিন কারণ অ্যাংুলার এটি সম্পর্কে আপনার সাথে লড়াই করবে। এর অর্থ হল যে এটি আপনাকে সরবরাহ করে এমন পরিষ্কার আর্কিটেকচারের (কমপক্ষে কিছুটা) সুবিধা নিতে হবে। অন্য কথায়, কৌণিকের সাথে খারাপ কোড লেখা শক্ত, তবে পরিষ্কার কোড লিখতে আরও সুবিধাজনক।
কৌণিক নিখুঁত থেকে অনেক দূরে। ওয়েব ডেভলপমেন্ট ওয়ার্ল্ড সর্বদা বর্ধনশীল এবং পরিবর্তিত হচ্ছে এবং সমস্যাগুলি সমাধানের জন্য আরও নতুন এবং আরও ভাল উপায় রয়েছে ways উদাহরণস্বরূপ, ফেসবুকের প্রতিক্রিয়া এবং ফ্লাক্স অ্যাঙ্গুলারের তুলনায় কিছু দুর্দান্ত সুবিধা রয়েছে তবে তাদের নিজস্ব ত্রুটিগুলি নিয়ে আসে। কিছুই নিখুঁত নয়, তবে অ্যাঙ্গুলার আপাতত দুর্দান্ত এবং এখনও দুর্দান্ত। JQuery যেমন একবার ওয়েব ওয়ার্ল্ডকে এগিয়ে যেতে সহায়তা করেছিল, তেমন কৌণিকও রয়েছে, এবং আরও অনেকগুলি আসবে।