javascript "যদি আমি একটি jQuery পটভূমি আছে" AngularJS মধ্যে চিন্তা "?




(12)

ধরুন আমি jQuery ক্লায়েন্ট-পার্শ্ব অ্যাপ্লিকেশনগুলি ডেভেলপ করার সাথে পরিচিত, কিন্তু এখন আমি AngularJS ব্যবহার শুরু করতে চাই। আপনি প্রয়োজন যে প্যাটার্ন শিফট বর্ণনা করতে পারেন? এখানে কয়েকটি প্রশ্ন রয়েছে যা আপনাকে একটি উত্তর গঠন করতে সহায়তা করতে পারে:

  • আমি কিভাবে স্থপতি এবং ক্লায়েন্ট পাশাপাশি ওয়েব অ্যাপ্লিকেশন ডিজাইন করবেন? সবচেয়ে বড় পার্থক্য কি?
  • আমি কি করা / ব্যবহার বন্ধ করা উচিত; আমি পরিবর্তে ব্যবহার / কি শুরু করা উচিত?
  • কোন সার্ভার-পার্শ্ব বিবেচনা / সীমাবদ্ধতা আছে?

আমি jQuery এবং AngularJS মধ্যে একটি বিস্তারিত তুলনা খুঁজছেন না।


jQuery এর

jQuery getElementByHerpDerpক্ষুদ্র এবং ক্রস ব্রাউজার মত ridiculously দীর্ঘ জাভাস্ক্রিপ্ট কমান্ড তোলে ।

AngularJS

AngularJS আপনাকে আপনার নিজস্ব এইচটিএমএল ট্যাগ / বৈশিষ্ট্যগুলি করতে দেয় যা এমন কিছু করে যা গতিশীল ওয়েব অ্যাপ্লিকেশনগুলির সাথে ভালভাবে কাজ করে (HTML স্ট্যাটিক পৃষ্ঠাগুলির জন্য ডিজাইন করা হয়েছিল)।

সম্পাদনা:

"আমি একটি jQuery পটভূমি আছে বলছে কিভাবে আমি AngularJS মধ্যে মনে করেন?" "আমি একটি এইচটিএমএল পটভূমি আছে কিভাবে জাভাস্ক্রিপ্ট মনে হয়?" আপনি প্রশ্ন জিজ্ঞাসা করছেন যে আসলে আপনি সম্ভবত এই দুই সংস্থার মৌলিক উদ্দেশ্য বুঝতে না দেখায়। এই কারণে আমি কেবলমাত্র মৌলিক পার্থক্যটি নির্দেশ করে, "AngularJS নির্দেশাবলীর ব্যবহার করে, যখন jQuery সিএসএস নির্বাচকদের একটি jQuery অবজেক্ট ব্যবহার করে যা এই এবং এটি ইত্যাদি করে।" । এই প্রশ্নের একটি দীর্ঘ উত্তর প্রয়োজন হয় না।

jQuery ব্রাউজারে প্রোগ্রামিং জাভাস্ক্রিপ্ট সহজতর করার একটি উপায়। সংক্ষিপ্ত, ক্রস ব্রাউজার আদেশ, ইত্যাদি

AngularJS এইচটিএমএল প্রসারিত, তাই আপনি <div>শুধু একটি অ্যাপ্লিকেশন করতে সব জায়গায় রাখা হবে না । এটা এইচটিএমএল আসলে অ্যাপ্লিকেশনের জন্য কাজ করে যা এটি তৈরি করা হয়েছিল তার জন্য তৈরি করে, যা স্ট্যাটিক, শিক্ষাগত ওয়েব পৃষ্ঠাগুলি। এটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি বৃত্তাকার উপায়ে এটি সম্পাদন করে, কিন্তু মূলত এটি এইচটিএমএল একটি এক্সটেনশন, জাভাস্ক্রিপ্ট নয়।


jQuery: আপনি DOM উপাদানের জন্য ' DOM QUERYing' সম্পর্কে এবং কিছু করার বিষয়ে অনেক কিছু মনে করেন।

AngularJS: মডেল সত্য, এবং আপনি সবসময় যে ANGLE থেকে চিন্তা।

উদাহরণস্বরূপ, যখন আপনি সার্ভার থেকে ডেটা পান যা আপনি DOM এর কিছু বিন্যাসে প্রদর্শনের উদ্দেশ্যে jQuery এ, আপনাকে '1' করতে হবে। FIND 'যেখানে DOM এ আপনি এই তথ্যটি রাখতে চান,' 2। একটি নতুন নোড তৈরি করে বা তার অভ্যন্তরীণ innerHTML সেটিং করে এটি আপডেট করুন / এখানে innerHTML । তারপর যখন আপনি এই ভিউটি আপডেট করতে চান, তখন আপনি '3। অবস্থান 'এবং' 4 খুঁজুন। হালনাগাদ'. অনুসন্ধান এবং আপডেটের এই চক্র সার্ভার থেকে তথ্য প্রাপ্তির এবং ফর্ম্যাটের একই প্রসঙ্গে সম্পন্ন করা হয়েছে AngularJS এ চলে গেছে।

AngularJS এর ​​সাথে আপনার মডেল (জাভাস্ক্রিপ্ট অবজেক্টগুলি যা আপনি আগে থেকেই ব্যবহার করেছেন) এবং মডেলের মানটি আপনাকে মডেল (অবশ্যই) এবং দৃশ্য সম্পর্কে জানায় এবং মডেলটির একটি ক্রিয়াকলাপ স্বয়ংক্রিয়ভাবে ভিউতে প্রচার করে, তাই আপনি ' এটা সম্পর্কে চিন্তা করতে হবে। আপনি AngularJS মধ্যে নিজেকে খুঁজে পাবেন DOM মধ্যে জিনিস খুঁজে পাচ্ছি না।

অন্য উপায়ে করা, jQuery মধ্যে, আপনি CSS সিলেক্টর সম্পর্কে ভাবতে প্রয়োজন যে, কোথায় divবা tdযে একটি শ্রেণী বা অ্যাট্রিবিউট ইত্যাদি রয়েছে যাতে আমি তাদের HTML বা রং বা মান পেতে পারেন, কিন্তু AngularJS এ, আপনি নিজেকে এইরকম ভাবতে পাবেন: আমি কোন মডেলটি ব্যবহার করছি, আমি মডেলের মানটি সত্য হিসাবে সেট করব। আপনি এই মানটিকে প্রতিফলিত করে দেখছেন এমন দৃশ্যটি একটি চেক বাক্সে রয়েছে কিনা বা কোনও tdউপাদানতে থাকা (আপনি জাভাস্ক্রিপ্ট সম্পর্কে বিস্তারিত জানার জন্য বিস্তারিত জানার প্রয়োজন) সম্পর্কে নিজেকে বিরক্ত করছেন না ।

এবং AngularJS এ DOM ম্যানিপুলেশন দিয়ে, আপনি নিজেকে নির্দেশনা এবং ফিল্টার যুক্ত করুন যা আপনি বৈধ HTML এক্সটেনশান হিসাবে মনে করতে পারেন।

AngularJS এ আরও একটি জিনিস আপনি পাবেন: jQuery এ আপনি অনেকগুলি jQuery ফাংশন কল করেন, AngularJS এ, AngularJS আপনার ফাংশন কল করবে, তাই AngularJS আপনাকে 'কীভাবে কাজ করতে হবে তা বলবে', কিন্তু সুবিধাগুলি এটি মূল্যবান, তাই AngularJS শেখা সাধারণত AngularJS চায় বা কীভাবে AngularJS- তে আপনার ফাংশনগুলি উপস্থাপন করার প্রয়োজন হয় তা শিখতে হবে এবং এটি সেই অনুসারে কল করবে। এটি এমন একটি বিষয় যা AngularJS কে লাইব্রেরির পরিবর্তে একটি কাঠামো করে।


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


AngularJS বনাম jQuery

AngularJS এবং jQuery খুব ভিন্ন মতাদর্শ গ্রহণ। আপনি jQuery থেকে আসছে আপনি বিস্ময়কর পার্থক্য কিছু খুঁজে পেতে পারেন। কৌতুক আপনি রাগ করতে পারে।

এটি স্বাভাবিক, আপনি মাধ্যমে ধাক্কা করা উচিত। কৌণিক এটা মূল্য।

বড় পার্থক্য (টিএলডিআর)

JQuery আপনাকে DOM এর ইচ্ছাকৃত বিটগুলি নির্বাচন এবং তাদের মধ্যে অ্যাড-হক পরিবর্তনগুলি করার জন্য একটি টুলকিট দেয়। আপনি টুকরা দ্বারা টুকরা চান বেশ সুন্দর কিছু করতে পারেন।

AngularJS পরিবর্তে আপনি একটি কম্পাইলার দেয়।

এর মানে কি যে AngularJS আপনার সমগ্র DOM শীর্ষ থেকে নীচ পর্যন্ত পড়ে এবং কোড হিসাবে আচরণ করে, আক্ষরিকভাবে কম্পাইলারের নির্দেশাবলী হিসাবে। এটি DOM ভ্রমণ করে, এটি নির্দিষ্ট নির্দেশাবলীর (কম্পাইলার নির্দেশিকা) সন্ধান করে যা AngularJS কম্পাইলারকে কীভাবে আচরণ করতে হয় এবং কী করতে হবে তা বলে। নির্দেশিকাটি JavaScript এর পূর্ণ ছোট বস্তু যা গুণাবলী, ট্যাগ, ক্লাস বা এমনকি মন্তব্যগুলির সাথে মেলে।

যখন কৌণিক কম্পাইলার নির্দিষ্ট করে যে DOM এর একটি অংশ একটি নির্দিষ্ট নির্দেশের সাথে মেলে, তখন এটি ডাইম উপাদানটি, কোনও গুণাবলী, বর্তমান $ সুযোগ (যা একটি স্থানীয় পরিবর্তনশীল দোকান), এবং কিছু অন্যান্য দরকারী বিট পাস করে নির্দেশক ফাংশনটি কল করে। এই বৈশিষ্ট্যগুলিতে অভিব্যক্তি থাকতে পারে যা নির্দেশিকা দ্বারা ব্যাখ্যা করা যেতে পারে এবং এটি কীভাবে রেন্ডার করা যায় এবং কখন এটি নিজেকে পুনঃসক্রিয় করা উচিত।

নির্দেশিকাগুলি তখন অতিরিক্ত কৌণিক উপাদান যেমন কন্ট্রোলার, পরিষেবাদি, ইত্যাদিতে টেনে আনতে পারে। কম্পাইলারের নীচে যা আসে তা সম্পূর্ণরূপে গঠিত ওয়েব অ্যাপ্লিকেশন, তারযুক্ত এবং আপ যেতে প্রস্তুত।

এর মানে হল যে কৌণিক টেমপ্লেট চালিত । আপনার টেমপ্লেট জাভাস্ক্রিপ্ট ড্রাইভ, অন্যান্য উপায় কাছাকাছি না। এটি ভূমিকাগুলির একটি মৌলবাদী বিপরীত, এবং অবাঞ্ছিত জাভাস্ক্রিপ্টের সম্পূর্ণ বিপরীত যা আমরা গত 10 বছর ধরে লিখেছি। এই কিছু ব্যবহার করা যেতে পারে।

যদি এটি শোনা যায় যে এটি অতিরিক্ত-নির্ধারক এবং সীমাবদ্ধ হতে পারে তবে কিছুই সত্য থেকে দূরে থাকতে পারে না। কারণ AngularJS আপনার HTML কে কোড হিসাবে আচরণ করে, আপনি আপনার ওয়েব অ্যাপ্লিকেশানে HTML লেবেল গ্র্যানুলারিটি পান । সবকিছু সম্ভব, এবং আপনি কিছু ধারণাগত leaps করা একবার বেশিরভাগ জিনিস বিস্ময়করভাবে সহজ।

আসুন বিড়াল রেটিনা ডাউন পেতে।

প্রথম আপ, কৌণিক jQuery প্রতিস্থাপন করা হয় না

কৌণিক এবং jQuery বিভিন্ন জিনিস না। AngularJS আপনাকে ওয়েব অ্যাপ্লিকেশনগুলি উত্পাদন করার জন্য সরঞ্জামগুলির একটি সেট দেয়। jQuery প্রধানত DOM সংশোধন করার জন্য আপনাকে সরঞ্জাম দেয়। যদি আপনার পৃষ্ঠায় jQuery উপস্থিত থাকে তবে AngularJS স্বয়ংক্রিয়ভাবে এটি ব্যবহার করবে। এটি না থাকলে, jQuery Lite এর সাথে AngularJS জাহাজ, যা একটি কাটা ডাউন, কিন্তু এখনও jQuery এর পুরোপুরি ব্যবহারযোগ্য সংস্করণ।

Misko jQuery লেগেছে এবং এটি ব্যবহার করে আপনি অবজেক্ট না। তবে আপনি অগ্রসর হবেন যে আপনি সুযোগ, টেমপ্লেট এবং নির্দেশাবলীর সংমিশ্রণের সাহায্যে আপনার সমস্ত কাজ সম্পন্ন করতে পারেন এবং আপনাকে এই কার্যপ্রবাহটি পছন্দ করতে হবে যেখানে সম্ভব হয় কারণ আপনার কোডটি আরও বিচ্ছিন্ন, আরও কনফিগারযোগ্য এবং আরও অনেক কিছু হতে পারে। কৌণিক।

আপনি যদি jQuery ব্যবহার করেন, তবে আপনাকে এটি সর্বত্রই ছিটানো উচিত নয়। AngularJS মধ্যে DOM ম্যানিপুলেশন জন্য সঠিক জায়গা একটি নির্দেশিকা হয়। এই পরে আরো।

নির্বাচনী বনাম ঘোষণামূলক টেমপ্লেট সঙ্গে অকার্যকর জাভাস্ক্রিপ্ট

jQuery সাধারণত unobtrusively প্রয়োগ করা হয়। আপনার জাভাস্ক্রিপ্ট কোড শিরোনাম (বা পাদচরণ) লিঙ্ক করা হয়, এবং এটি উল্লেখ করা হয় একমাত্র জায়গা। আমরা পৃষ্ঠার বিটগুলি বাছাই করতে নির্বাচকদের ব্যবহার করি এবং সেই অংশগুলি সংশোধন করতে প্লাগিনগুলি লিখি।

জাভাস্ক্রিপ্ট নিয়ন্ত্রণ হয়। এইচটিএমএল একটি সম্পূর্ণ স্বাধীন অস্তিত্ব আছে। আপনার এইচটিএমএল জাভাস্ক্রিপ্ট ছাড়া এমনকি শব্দার্থিক অবশেষ। Onclick বৈশিষ্ট্য খুব খারাপ অভ্যাস।

AngularJS সম্পর্কে আপনার প্রথম বিজ্ঞপ্তিগুলির মধ্যে একটি হল যে কাস্টম গুণাবলী সর্বত্র । আপনার এইচটিএমএল এনজি গুণাবলী সঙ্গে আবদ্ধ করা হবে, যা স্টিরিওড উপর মূলত onClick বৈশিষ্ট্য। এই নির্দেশাবলী (কম্পাইলার নির্দেশাবলী), এবং মডেলের সাথে টেমপ্লেট hooked হয় যা প্রধান উপায় এক।

যখন আপনি প্রথমে এটি দেখতে পান তখন আপনি পুরানো স্কুলে অনুপ্রবেশকারী জাভাস্ক্রিপ্ট হিসাবে বন্ধ AngularJS লিখতে প্রলুব্ধ হতে পারে (যেমন আমি প্রথমে করেছি)। আসলে, AngularJS যারা নিয়ম দ্বারা খেলা না। AngularJS এ, আপনার HTML5 একটি টেমপ্লেট। এটা আপনার ওয়েব পেজ উত্পাদন AngularJS দ্বারা সংকলিত হয়।

এটি প্রথম বড় পার্থক্য। JQuery এ, আপনার ওয়েব পেজ একটি DOM ম্যানিপুলেশন করা হয়। AngularJS তে, আপনার এইচটিএমএল সংকলন করা কোড। AngularJS আপনার সম্পূর্ণ ওয়েব পৃষ্ঠায় পড়ে এবং আক্ষরিকভাবে এটি তার অন্তর্নির্মিত কম্পাইলার ব্যবহার করে একটি নতুন ওয়েব পৃষ্ঠায় কম্পাইল করে।

আপনার টেমপ্লেট ঘোষণামূলক হতে হবে; এর অর্থ সহজভাবে এটি পড়ার দ্বারা পরিষ্কার করা উচিত। আমরা অর্থপূর্ণ নাম সঙ্গে কাস্টম বৈশিষ্ট্য ব্যবহার করুন। আমরা অর্থপূর্ণ নাম দিয়ে আবার নতুন এইচটিএমএল উপাদান তৈরি। সংক্ষিপ্ত এইচটিএমএল জ্ঞান এবং কোন কোডিং দক্ষতার সাথে একটি ডিজাইনার আপনার AngularJS টেম্পলেটটি পড়তে পারে এবং এটি কী করছে তা বুঝতে পারে। তিনি বা পরিবর্তন করতে পারেন। এই কৌণিক উপায়।

টেমপ্লেট ড্রাইভিং সীট হয়।

AngularJS শুরু করার এবং টিউটোরিয়ালগুলির মাধ্যমে চলমান প্রথম প্রশ্নগুলির মধ্যে একটি হল "আমার কোড কোথায়?" । আমি কোন জাভাস্ক্রিপ্ট লিখেছি, এবং এখনো আমি এই সব আচরণ আছে। উত্তর সুস্পষ্ট। কারণ AngularJS DOM কম্পাইল করে, AngularJS আপনার HTML টি কোড হিসাবে চিকিত্সা করছে। অনেক সহজ ক্ষেত্রে এটি প্রায়শই একটি টেমপ্লেট লিখতে যথেষ্ট এবং AngularJS কে এটি আপনার জন্য একটি অ্যাপ্লিকেশনে কম্পাইল করতে দেয়।

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

উদাহরণস্বরূপ Rails উপর রুবি চেয়ে এটি XSLT অনুরূপ।

এটি নিয়ন্ত্রণের একটি মৌলিক বিবর্তন যা কিছু ব্যবহৃত হচ্ছে।

আপনার জাভাস্ক্রিপ্ট থেকে আপনার অ্যাপ্লিকেশন চালানোর চেষ্টা বন্ধ করুন। টেমপ্লেট অ্যাপ্লিকেশন ড্রাইভ করা যাক, এবং AngularJS একসাথে উপাদান তারের যত্ন নিতে। এই এছাড়াও Angular উপায়।

সেমিক্যান্ট এইচটিএমএল বনাম সেমিটিক মডেল

JQuery এর সাথে আপনার HTML পৃষ্ঠাটি সেমান্তিক অর্থপূর্ণ সামগ্রী থাকা উচিত। জাভাস্ক্রিপ্ট বন্ধ করা হয় (একটি ব্যবহারকারী বা সার্চ ইঞ্জিন দ্বারা) আপনার কন্টেন্ট অ্যাক্সেসযোগ্য রয়ে যায়।

কারণ AngularJS আপনার HTML পৃষ্ঠাটিকে একটি টেমপ্লেট হিসাবে ব্যবহার করে। টেমপ্লেটটি সেমিকান্টিক বলে মনে করা হয় না কারণ আপনার সামগ্রী সাধারণত আপনার মডেলে সংরক্ষণ করা হয় যা শেষ পর্যন্ত আপনার API থেকে আসে। AngularJS একটি শব্দার্থিক ওয়েব পৃষ্ঠা তৈরি করার জন্য মডেলের সাথে আপনার DOM কম্পাইল করে।

আপনার এইচটিএমএল সোর্স আর শব্দগত নয়, পরিবর্তে, আপনার API এবং সংকলিত DOM শব্দার্থিক।

এঙ্গুলারজেএস-এর মানে হল মডেলের মধ্যে থাকা, এইচটিএমএলটি শুধুমাত্র প্রদর্শনের জন্য একটি টেমপ্লেট।

এই সময়ে আপনি সম্ভবত SEO এবং অ্যাক্সেসিবিলিটি সংক্রান্ত প্রশ্ন সব ধরনের আছে, এবং ঠিক তাই। এখানে খোলা সমস্যা আছে। বেশিরভাগ স্ক্রিন পাঠক এখন জাভাস্ক্রিপ্ট বিশ্লেষণ করবে। অনুসন্ধান ইঞ্জিন এছাড়াও AJAXed কন্টেন্ট সূচী করতে পারেন। তবুও, আপনি নিশ্চিত করতে চান যে আপনি pushstate URL গুলি ব্যবহার করছেন এবং আপনার কাছে একটি উপযুক্ত সাইটম্যাপ রয়েছে। ইস্যুর আলোচনার জন্য এখানে দেখুন: https://.com/a/23245379/687677

উদ্বেগ বিচ্ছেদ (এসওসি) বনাম এমভিসি

উদ্বেগ বিচ্ছেদ (এসওসি) একটি প্যাটার্ন যা এসইও, অ্যাক্সেসিবিলিটি এবং ব্রাউজার অসঙ্গতি সহ বিভিন্ন কারণে ওয়েব বিকাশের বহু বছর ধরে বেড়ে উঠেছে। এটা দেখে মনে হচ্ছে:

  1. এইচটিএমএল - শব্দার্থিক অর্থ। এইচটিএমএল একা দাঁড়ানো উচিত।
  2. সিএসএস - সিএসএস ছাড়া স্টাইলিং পাতা এখনও পঠনযোগ্য।
  3. জাভাস্ক্রিপ্ট - আচরণ, স্ক্রিপ্ট ছাড়া কন্টেন্ট অবশেষ।

আবার, AngularJS তাদের নিয়ম দ্বারা খেলা না। স্ট্রোকে, AngularJS একটি দশক প্রাপ্ত জ্ঞানের সাথে দূরে চলে যায় এবং পরিবর্তে একটি এমভিসি প্যাটার্ন প্রয়োগ করে যেখানে টেমপ্লেট এখন আর সামান্য নয়, এমনকি সামান্য।

এটা দেখে মনে হচ্ছে:

  1. মডেল - আপনার মডেল আপনার শব্দগত তথ্য রয়েছে। মডেল সাধারণত JSON বস্তু। মডেলগুলি $ scope নামে একটি বস্তুর বৈশিষ্ট্য হিসাবে বিদ্যমান। আপনি $ টেপে সহজ ইউটিলিটি ফাংশনগুলি সংরক্ষণ করতে পারেন যা আপনার টেম্পলেটগুলি তখন অ্যাক্সেস করতে পারে।
  2. দেখুন - আপনার মতামত এইচটিএমএল লেখা হয়। আপনার তথ্য মডেলের মধ্যে বসবাস কারণ দেখুন সাধারণত শব্দার্থিক হয় না।
  3. কন্ট্রোলার - আপনার নিয়ামক একটি জাভাস্ক্রিপ্ট ফাংশন যা মডেলটিকে দৃশ্যের সাথে যুক্ত করে। এর ফাংশন $ সুযোগ আরম্ভ করা হয়। আপনার অ্যাপ্লিকেশন উপর নির্ভর করে, আপনি একটি নিয়ামক তৈরি করার প্রয়োজন হতে পারে বা হতে পারে। আপনি একটি পৃষ্ঠায় অনেক কন্ট্রোলার থাকতে পারে।

এমভিসি এবং এসওসি একই স্কেলের বিপরীত প্রান্তে নয়, তারা সম্পূর্ণ ভিন্ন অক্ষগুলিতে রয়েছে। SOC একটি AngularJS প্রেক্ষাপটে কোন ধারনা করে তোলে। আপনি এটা ভুলে যান এবং উপর সরানো আছে।

যদি আমার মত, আপনি ব্রাউজার যুদ্ধের মাধ্যমে বসবাস করতেন, তবে আপনি এই ধারণাটিকে বেশ আক্রমণাত্মক মনে করতে পারেন। এটা পেতে, এটা মূল্য হবে, আমি প্রতিশ্রুতি।

প্লাগইন বনাম নির্দেশাবলী

প্লাগইন jQuery প্রসারিত। AngularJS নির্দেশাবলী আপনার ব্রাউজারের ক্ষমতা প্রসারিত।

JQuery এ আমরা jQuery.prototype ফাংশন যোগ করে প্লাগইন সংজ্ঞায়িত। আমরা উপাদানগুলি নির্বাচন করে এবং ফলাফলে প্লাগিনটি কল করে DOM এ এটিকে হুক করি। ধারণা jQuery এর ক্ষমতা প্রসারিত হয়।

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

AngularJS ইন, আমরা নির্দেশাবলী সংজ্ঞায়িত। একটি নির্দেশনা একটি ফাংশন যা একটি JSON অবজেক্ট প্রদান করে। এই বস্তু AngularJS কে DOM উপাদানগুলির সন্ধান করতে বলে এবং তাদের কোন পরিবর্তন করতে বলে। আপনি উদ্ভাবিত কোন বৈশিষ্ট্য বা উপাদানের ব্যবহার করে নির্দেশিকাগুলি টেমপ্লেটের সাথে যুক্ত হয়। ধারণা নতুন বৈশিষ্ট্য এবং উপাদান সঙ্গে এইচটিএমএল ক্ষমতা প্রসারিত হয়।

AngularJS উপায় নেটিভ খুঁজছেন HTML এর ক্ষমতা প্রসারিত হয়। আপনি এইচটিএমএল মত দেখতে এইচটিএমএল লিখতে হবে, কাস্টম গুণাবলী এবং উপাদান সঙ্গে বর্ধিত।

আপনি যদি একটি ক্যারোজেল চান, কেবল একটি <carousel />উপাদান ব্যবহার করুন , তারপর একটি টেমপ্লেট টানতে একটি নির্দেশনা সংজ্ঞায়িত করুন, এবং যে sucker কাজ করতে।

কনফিগারেশন সুইচ বনাম বড় প্লাগইন অনেক ছোট নির্দেশাবলী প্রচুর

JQuery এর সাথে প্রবণতাটি লাইটবক্সের মত দুর্দান্ত বড় প্লাগিন লিখতে হয় যা আমরা বহু মান এবং বিকল্পগুলিতে পাস করে কনফিগার করি।

এই AngularJS একটি ভুল।

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

আপনি একটি ছোট পরিবর্তন করতে চান না হওয়া পর্যন্ত।

বলুন আপনি একটি মেনু আছে যা আপনি হভারে প্রকাশ করতে চান। আচ্ছা এখন আমরা একটি সমস্যা আছে। আমাদের প্লাগইনটি আমাদের জন্য আমাদের ক্লিক হ্যান্ডলারে তারযুক্ত হয়েছে, আমরা এই নির্দিষ্ট ক্ষেত্রে ভিন্নভাবে আচরণ করার জন্য একটি কনফিগারেশন বিকল্প যুক্ত করতে যাচ্ছি।

AngularJS আমরা ছোট নির্দেশাবলী লিখুন। আমাদের ড্রপডাউন নির্দেশিকা ridiculously ছোট হবে। এটি ফোল্ড স্টেটটি বজায় রাখতে পারে এবং fold (), unfold () বা টগল () করতে পদ্ধতি সরবরাহ করে। এই পদ্ধতিগুলি কেবল $ scope.menu.visible আপডেট করবে যা একটি বুলিয়ান রাষ্ট্র ধারণ করে।

এখন আমাদের টেমপ্লেটে আমরা এটি আপ করতে পারেন:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

মাউসওভার আপডেট করতে হবে?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

টেমপ্লেটটি অ্যাপ্লিকেশনটিকে ড্রাইভ করে যাতে আমরা HTML স্তরের গ্র্যানুলারিটি পেতে পারি। যদি আমরা ক্ষেত্রে ব্যতিক্রমগুলি দ্বারা কেস করতে চাই, তবে টেমপ্লেটটি এটিকে সহজ করে তোলে।

ক্লোজার বনাম $ সুযোগ

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

AngularJS $ সুযোগ বস্তু আছে। এগুলি AngularJS দ্বারা তৈরি এবং রক্ষণাবেক্ষণ করা বিশেষ বস্তু যা আপনি আপনার মডেল সংরক্ষণ করেন। কিছু নির্দেশনা একটি নতুন $ সুযোগ দখল করবে, যা ডিফল্টভাবে তার মোড়ানো স্পেসিফিকাল উত্তরাধিকার ব্যবহার করে $ স্কোপের সুযোগ পাবে। $ সুযোগ বস্তু নিয়ামক এবং ভিউ অ্যাক্সেসযোগ্য।

এই চতুর অংশ। $ স্কোপ উত্তরাধিকারের কাঠামো মোটামুটিভাবে DOM এর কাঠামোর অনুসরণ করে, উপাদানগুলিকে তাদের নিজস্ব সুযোগের অ্যাক্সেস আছে এবং যেকোনও সমন্বিত স্কোপগুলি একচেটিয়াভাবে বিশ্বব্যাপী $ সুযোগ (যা বিশ্বব্যাপী সুযোগ হিসাবে নয়) পর্যন্ত চলে।

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

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

ম্যানুয়াল ডোম পরিবর্তন বনাম ডেটা বাইন্ডিং

JQuery এ আপনি আপনার সমস্ত DOM পরিবর্তনগুলি হাতে করে তুলুন। আপনি প্রোগ্রামিকভাবে নতুন DOM উপাদান গঠন। আপনার যদি একটি JSON অ্যারে থাকে এবং আপনি এটি DOM এ রাখতে চান তবে আপনাকে HTML তৈরি করতে এবং এটি সন্নিবেশ করতে একটি ফাংশন লিখতে হবে।

AngularJS এ আপনিও এটি করতে পারেন, তবে আপনাকে তথ্য বাঁধাই ব্যবহার করার জন্য উত্সাহিত করা হয়। আপনার মডেলটি পরিবর্তন করুন, এবং DOM এটি একটি টেমপ্লেটের মাধ্যমে আবদ্ধ হয় কারণ আপনার DOM স্বয়ংক্রিয়ভাবে আপডেট হবে, কোন হস্তক্ষেপ প্রয়োজন।

ডেটা বাইন্ডিং টেমপ্লেট থেকে সম্পন্ন করা হয়, কোনও বৈশিষ্ট্য বা কোঁকড়া ব্রেস সিনট্যাক্স ব্যবহার করে, এটি করা খুব সহজ। এটির সাথে যুক্ত সামান্য জ্ঞানীয় ওভারহেড তাই আপনি এটি সর্বদা এটি করছেন খুঁজে পাবেন।

<input ng-model="user.name" />

ইনপুট উপাদান binds $scope.user.name। ইনপুট আপডেট করা আপনার বর্তমান সুযোগের মান আপডেট করবে এবং এর বিপরীতে।

অনুরূপভাবে:

<p>
  {{user.name}}
</p>

একটি অনুচ্ছেদের ব্যবহারকারী নাম আউটপুট হবে। এটি একটি লাইভ বাঁধাই, তাই $scope.user.nameমূল্য আপডেট করা হলে, টেমপ্লেট খুব আপডেট হবে।

সব সময় Ajax

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

অ্যাঙ্গুলারজেএস এ, অজ্যাক্স আপনার ডিফল্ট গুন-সমাধান হয় এবং এটি প্রায়শই ঘটে, প্রায়শই আপনার নজর দেওয়া ছাড়াই। আপনি ng- অন্তর্ভুক্ত সঙ্গে টেমপ্লেট অন্তর্ভুক্ত করতে পারেন। আপনি সহজ কাস্টম নির্দেশিকা সঙ্গে একটি টেমপ্লেট প্রয়োগ করতে পারেন। আপনি একটি পরিষেবাতে একটি অজ্যাক্স কল মোড়ানো এবং নিজেকে একটি GitHub পরিষেবা, অথবা একটি Flickr পরিষেবা তৈরি করতে পারেন, যা আপনি আশ্চর্যজনক আরাম সঙ্গে অ্যাক্সেস করতে পারেন।

সেবা অবজেক্ট বনাম হেল্পার ফাংশন

JQuery এ, যদি আমরা একটি ছোট অ-ডোম সম্পর্কিত সম্পর্কিত কাজটি সম্পন্ন করতে চাই যেমন একটি API থেকে ফিড টেনে আনতে, তবে আমরা আমাদের ক্লোজারে এটি করতে একটু ফাংশন লিখতে পারি। এটি একটি বৈধ সমাধান, কিন্তু যদি আমরা প্রায়ই সেই খাবারটি অ্যাক্সেস করতে চাই তবে কী হবে? আমরা যদি অন্য কোডে সেই কোডটি পুনরায় ব্যবহার করতে চাই তাহলে কী হবে?

AngularJS আমাদের সেবা বস্তু দেয়।

সেবা ফাংশন এবং তথ্য রয়েছে যে সহজ বস্তু। তারা সবসময় singletons হয়, অর্থাত্ তাদের মধ্যে এক হতে পারে না মানে। বলুন আমরা স্ট্যাক ওভারফ্লো API এ অ্যাক্সেস করতে চাই, আমরা এমন একটি লিখতে পারি Serviceযা করার জন্য পদ্ধতিগুলি সংজ্ঞায়িত করে।

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

সার্ভিস অবজেক্টগুলি স্বয়ংসম্পূর্ণ AngularJS উপাদান যা আমরা ফিট করে দেখতে এবং পুনঃব্যবহার করতে পারি। তারা ফাংশন এবং তথ্য ধারণকারী সাধারণ JSON বস্তু। তারা সর্বদা singletons হয়, তাই আপনি যদি এক জায়গায় ডেটা সঞ্চয় করেন তবে একই পরিষেবা অনুরোধ করে আপনি অন্য কোথাও তথ্যটি পেতে পারেন।

নির্ভরতা ইনজেকশন (ডিআই) বনাম ইনস্টিটিউট - আকাশ ডি স্প্যাঘিটিফিকেশন

AngularJS আপনার জন্য আপনার নির্ভরতা পরিচালনা করে। যদি আপনি একটি বস্তু চান, কেবল এটি পড়ুন এবং AngularJS এটি আপনার জন্য এটি পাবেন।

যতক্ষণ না আপনি এটি ব্যবহার করতে শুরু করবেন, ততক্ষণ এটি বোঝানো কঠিন যে এটি কত বড় সময়। AngularJS ডি মত কিছুই jQuery এর ভিতরে বিদ্যমান নেই।

DI মানে আপনার অ্যাপ্লিকেশনটি লেখার এবং এটির সাথে একত্রিত করার পরিবর্তে, আপনি তার পরিবর্তে উপাদানগুলির একটি লাইব্রেরি সংজ্ঞায়িত করুন, প্রতিটি একটি স্ট্রিং দ্বারা চিহ্নিত।

বলুন আমার ফ্লিকারের নামক একটি উপাদান রয়েছে যা ফ্লিকার থেকে JSON ফিডগুলি টেনে আনতে পদ্ধতিগুলিকে সংজ্ঞায়িত করে। এখন, যদি আমি একটি কন্ট্রোলার লিখতে চাই যা Flickr অ্যাক্সেস করতে পারে, আমি কন্ট্রোলার ঘোষণা করার সময় কেবল 'FlickrService' নামটি উল্লেখ করতে হবে। AngularJS কম্পোনেন্ট তাত্ক্ষণিক এবং এটি আমার নিয়ামক উপলব্ধ করা যত্ন নিতে হবে।

উদাহরণস্বরূপ, এখানে আমি একটি পরিষেবা সংজ্ঞায়িত করেছি:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

এখন যখন আমি সেই পরিষেবাটি ব্যবহার করতে চাই তখন আমি এটির নাম দ্বারা এটির উল্লেখ করব:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS স্বীকার করবে যে একটি FlickrService অবজেক্ট নিয়ামক তাত্ক্ষণিক করার জন্য প্রয়োজন, এবং আমাদের জন্য একটি প্রদান করবে।

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

মডুলার সেবা আর্কিটেকচার

আপনি আপনার কোড সংগঠিত করা উচিত সম্পর্কে jQuery খুব সামান্য বলে। AngularJS মতামত আছে।

AngularJS আপনাকে মডিউল দেয় যেখানে আপনি আপনার কোডটি রাখতে পারেন। উদাহরণস্বরূপ, যদি আপনি ফ্লিকারের সাথে একটি স্ক্রিপ্ট লিখে থাকেন উদাহরণস্বরূপ, আপনি আপনার Flickr সম্পর্কিত সমস্ত ফাংশন মোছার জন্য ফ্লিকার মডিউল তৈরি করতে চাইতে পারেন। মডিউলগুলিতে অন্যান্য মডিউল (DI) অন্তর্ভুক্ত থাকতে পারে। আপনার প্রধান অ্যাপ্লিকেশন সাধারণত একটি মডিউল, এবং এই আপনার অ্যাপ্লিকেশন উপর নির্ভর করবে অন্যান্য অন্যান্য মডিউল অন্তর্ভুক্ত করা উচিত।

আপনি সহজ কোড পুনঃব্যবহার পেতে পারেন, যদি আপনি ফ্লিকারের উপর ভিত্তি করে অন্য একটি অ্যাপ্লিকেশন লিখতে চান তবে আপনি কেবল ফ্লিকার মডিউল এবং ভয়েইলা অন্তর্ভুক্ত করতে পারেন, আপনার নতুন অ্যাপ্লিকেশনে আপনার সমস্ত ফ্লিকার সম্পর্কিত ফাংশনগুলিতে অ্যাক্সেস রয়েছে।

মডিউল AngularJS উপাদান রয়েছে। যখন আমরা একটি মডিউল অন্তর্ভুক্ত করি, তখন সেই মডিউলের সমস্ত উপাদান আমাদের অনন্য স্ট্রিংগুলির দ্বারা চিহ্নিত একটি সহজ তালিকা হিসাবে উপলব্ধ হয় । তারপর আমরা AngularJS এর ​​নির্ভরতা ইনজেকশন প্রক্রিয়া ব্যবহার করে একে অপরকে ঐ উপাদানগুলিকে ইনজেক্ট করতে পারি।

সমষ্টি আপ

AngularJS এবং jQuery শত্রু হয় না। খুব সুন্দরভাবে AngularJS এর ​​মধ্যে jQuery ব্যবহার করা সম্ভব। আপনি AngularJS ভাল ব্যবহার করেন, তাহলে (টেমপ্লেট ডেটা-বাঁধাই, $ সুযোগ নির্দেশনা, ইত্যাদি) আপনি একটি প্রয়োজন পাবেন অনেক কম jQuery এর চেয়ে আপনি অন্যথায় দরকার হবে।

বুঝতে প্রধান বিষয় হল আপনার টেম্পলেটটি আপনার অ্যাপ্লিকেশনটি চালায়। সবকিছু যে বড় প্লাগইন লিখতে চেষ্টা বন্ধ করুন। পরিবর্তে একটি জিনিস যা একটু নির্দেশাবলী লিখুন, তারপর একসঙ্গে তারের একটি সহজ টেমপ্লেট লিখুন।

অবাঞ্ছিত জাভাস্ক্রিপ্ট সম্পর্কে কম চিন্তা করুন, এবং পরিবর্তে HTML এক্সটেনশন শর্তাবলী মনে।

আমার ছোট বই

আমি AngularJS সম্পর্কে এত উত্তেজিত হয়েছি, আমি এটির একটি সংক্ষিপ্ত বই লিখেছিলাম যা আপনাকে http://nicholasjohnson.com/angular-book/ অনলাইন পড়তে স্বাগত জানাই । আমি এটা সহায়ক।


AngularJS এবং jQuery:

AngularJs এবং JQuery JQLite কার্যকারিতা ব্যতীত প্রতিটি পর্যায়ে সম্পূর্ণ ভিন্ন এবং আপনি AngularJs কোর বৈশিষ্ট্যগুলি (আমি নীচে ব্যাখ্যা করেছি) শিখতে শুরু করার পরে এটি দেখতে পাবেন।

AngularJs একটি ক্লায়েন্ট পাশ ফ্রেমওয়ার্ক যে স্বাধীন ক্লায়েন্ট পার্শ্ব অ্যাপ্লিকেশন নির্মাণ প্রস্তাব। JQuery একটি ক্লায়েন্ট পার্শ্ব লাইব্রেরি যা DOM এর কাছাকাছি খেলা।

AngularJs কুল নীতি - যদি আপনি আপনার UI এ কিছু পরিবর্তন চান তবে মডেল ডেটা পরিবর্তনের দৃষ্টিকোণ থেকে। আপনার তথ্য পরিবর্তন করুন এবং UI নিজেই পুনরায় রেন্ডার হবে। প্রতিটি সময় যতক্ষণ না এবং এটির প্রয়োজন হয় না ততক্ষণ আপনি DOM প্রায় প্রতিযোগিতায় খেলার প্রয়োজন নেই এবং এটিও কৌণিক নির্দেশনাগুলির মাধ্যমে পরিচালনা করা উচিত।

এই প্রশ্নের উত্তর দিতে, আমি AngularJS এর ​​সাথে প্রথম এন্টারপ্রাইজ অ্যাপ্লিকেশনে আমার অভিজ্ঞতা ভাগ করতে চাই। এগুলি সবচেয়ে জঘন্য বৈশিষ্ট্য যা Angular প্রদান করে যেখানে আমরা আমাদের jQuery মানসিকতা পরিবর্তন শুরু করি এবং আমরা একটি ফ্রেমওয়ার্কের মত কৌণিক পেতে পারি এবং লাইব্রেরি না।

দুই-উপায় ডেটা বাইন্ডিং আশ্চর্যজনক: আমার সমস্ত কার্যকারিতা আপডেটের সাথে একটি গ্রিড ছিল, DELTE, INSERT। আমার একটি ডাটা অবজেক্ট আছে যা গ্রিডের মডেলটি ng-repeat ব্যবহার করে বাঁধে। মুছে ফেলার জন্য এবং সন্নিবেশ করার জন্য আপনাকে শুধুমাত্র সাধারণ জাভাস্ক্রিপ্ট কোডের একটি লাইন লিখতে হবে এবং এটিই এটি। গ্রিড মডেল অবিলম্বে পরিবর্তন হিসাবে গ্রিড স্বয়ংক্রিয়ভাবে আপডেট। আপডেট কার্যকারিতা বাস্তব সময়, এটি জন্য কোন কোড। আপনি আশ্চর্যজনক মনে !!!

পুনর্বহাল নির্দেশাবলী সুপার: এক জায়গায় নির্দেশ লিখুন এবং আবেদন জুড়ে এটি ব্যবহার করুন। ঈশ্বর!!! আমি পেজিং, regex, বৈধতা, ইত্যাদি জন্য এই নির্দেশাবলী ব্যবহার করে এটা সত্যিই শান্ত!

রাউটিং শক্তিশালী: এটি আপনার প্রয়োগের জন্য আপনি কীভাবে এটি ব্যবহার করতে চান তার উপর নির্ভর করে, তবে এটি HTML এবং নিয়ামক (জাভাস্ক্রিপ্ট) নির্দিষ্ট করার অনুরোধটি রুট করার জন্য খুব অল্প সংখ্যক কোডের প্রয়োজন।

কন্ট্রোলারগুলি দুর্দান্ত: কন্ট্রোলাররা তাদের নিজস্ব এইচটিএমএল যত্ন নেয় তবে এই বিচ্ছেদটি সাধারণ কার্যকারিতাগুলির জন্য ভালভাবে কাজ করে। আপনি যদি মাস্টার এইচটিএমএল বোতামের ক্লিকে একই ফাংশনটি কল করতে চান তবে প্রতিটি কন্ট্রোলারের মধ্যে একই ফাংশন নামটি লিখুন এবং পৃথক কোড লিখুন।

প্লাগইন: আপনার অ্যাপ্লিকেশানে ওভারলে দেখাচ্ছে এমন অনেকগুলি অনুরূপ বৈশিষ্ট্য রয়েছে। আপনি এটির জন্য কোড লিখতে হবে না, কেবল wc-overlay হিসাবে উপলভ্য একটি ওভারলে প্লাগইন ব্যবহার করুন এবং এটি স্বয়ংক্রিয়ভাবে সমস্ত XMLHttpRequest (XHR) অনুরোধগুলির যত্ন নেবে ।

জন্য আদর্শ RESTful স্থাপত্য: সম্পূর্ণ অবকাঠামো হচ্ছে AngularJS একটি RESTful স্থাপত্য সাথে কাজ করার জন্য মহান করে তোলে। REST CRUD API গুলি কল করা খুব সহজ এবং

পরিষেবাদি : পরিষেবা ব্যবহার করে নিয়মিত কোড এবং কন্ট্রোলার কম কোড লিখুন। সেভাইসেস কন্ট্রোলারদের মধ্যে সাধারণ কার্যকারিতা ভাগ করতে ব্যবহার করা যেতে পারে।

এক্সটেনসিবিলিটি : কৌণিক কৌণিক নির্দেশাবলী ব্যবহার করে এইচটিএমএল নির্দেশিকা প্রসারিত করেছে। এইচটিএমএল ভিতরে এক্সপ্রেশন লিখুন এবং রানটাইম তাদের মূল্যায়ন। আপনার নিজস্ব নির্দেশাবলী এবং পরিষেবাদি তৈরি করুন এবং কোনও অতিরিক্ত প্রচেষ্টা ছাড়াই অন্য প্রকল্পে তাদের ব্যবহার করুন।


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

আমার মতই, আপনি দ্রুত বুঝতে পারবেন যে AngularJS (অথবা Ember.js , Durandal, এবং অন্যান্য MV * ফ্রেমওয়ার্কগুলি সেই বিষয়টি) একটি জটিল কাঠামো যা বিভিন্ন জাভাস্ক্রিপ্ট ডিজাইন নকশার সমন্বয় করে।

আমি এটি আরও সহজে খুঁজে পেয়েছিলাম, (1) স্থানীয় জাভাস্ক্রিপ্ট কোড এবং (2) ছোট আকারের এই লাইব্রেরিগুলি প্রতিটি গ্লোবাল কাঠামোর মধ্যে ডাইভিংয়ের আগে পৃথকভাবে পরীক্ষা করার জন্য। এটি আমাকে আরও ভালভাবে বুঝতে সাহায্য করে যে কোনও গুরুত্বপূর্ণ কাঠামো কোনও সমস্যাযুক্ত (কারণ আপনি ব্যক্তিগতভাবে সমস্যার সম্মুখীন হন)।

উদাহরণ স্বরূপ:

  • জাভাস্ক্রিপ্ট অবজেক্ট ভিত্তিক প্রোগ্রামিং (এটি একটি গুগল অনুসন্ধান লিঙ্ক)। এটি একটি লাইব্রেরি না, কিন্তু অবশ্যই কোন অ্যাপ্লিকেশন প্রোগ্রামিং একটি পূর্বশর্ত। এটি আমাকে প্রোটোটাইপ, কন্সট্রাকটর, সিঙ্গলটন এবং শোভাকর নিদর্শনগুলির স্থানীয় প্রয়োগগুলি শিখিয়েছিল
  • jQuery / মুখোশ প্যাটার্নের জন্য আন্ডারস্কোর (DOM ম্যানিপুলিউটিংয়ের জন্য WYSIWYG এর মতো)
  • প্রোটোটাইপ / কনস্ট্রাক্টর / মেশিন প্যাটার্নের জন্য প্রোটোটাইপ.জে
  • মডিউল প্যাটার্ন / AMD জন্য প্রয়োজন JS / Curl.js
  • পর্যবেক্ষণযোগ্য, প্রকাশ / সাবস্ক্রাইব প্যাটার্ন জন্য KnockoutJS

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


তারা আপেল এবং কমলা। আপনি তাদের তুলনা করতে চান না। তারা দুটি ভিন্ন জিনিস। AngularJs ইতিমধ্যে jQuery লাইট নির্মিত হয়েছে যা আপনাকে সম্পূর্ণ ফুটো jQuery সংস্করণ সহ এমনকি মৌলিক DOM ম্যানিপুলেশন সম্পাদন করতে দেয়।

jQuery DOM ম্যানিপুলেশন সম্পর্কে সব। এটি সমস্ত ক্রস ব্রাউজারের ব্যথা সমাধান করে অন্যথায় আপনাকে মোকাবেলা করতে হবে তবে এটি এমন ফ্রেমওয়ার্ক নয় যা আপনাকে আপনার অ্যাপটিকে AngularJS এর ​​মতো অংশগুলিতে ভাগ করে নেওয়ার অনুমতি দেয়।

AngularJs সম্পর্কে একটি চমৎকার জিনিস এটি আপনাকে নির্দেশে DOM ম্যানিপুলেশন আলাদা / আলাদা করতে দেয়। এনজি-ক্লিকের মতো ব্যবহার করার জন্য অন্তর্নির্মিত নির্দেশাবলী প্রস্তুত রয়েছে। আপনি নিজের নিজস্ব কাস্টম নির্দেশিকাগুলি তৈরি করতে পারেন যা আপনার সমস্ত দর্শন লজিক অথবা DOM ম্যানিপুলেশন ধারণ করতে পারে যাতে আপনি ব্যবসায়িক লজিকের যত্ন নিতে পারে এমন নিয়ামক বা পরিষেবাদিতে মিংল DOM ম্যানিপুলেশন কোডটি শেষ করবেন না।

কৌণিক আপনার অ্যাপ্লিকেশনটি ভেঙ্গে দেয় - কন্ট্রোলার - পরিষেবাদি - দর্শন - ইত্যাদি।

এবং একটি আরও জিনিস আছে, যে নির্দেশিকা। এটি কোনও বৈশিষ্ট্য যা আপনি কোনও DOM উপাদানকে সংযুক্ত করতে পারেন এবং আপনি jQuery এর সাথে jQuery এর সাথে কোনও অশুভতা ছাড়াই এটির জাগ্রত থাকতে পারেন, যা আপনার JQuery সম্পর্কিত AngularJs উপাদানগুলির সাথে দ্বন্দ্ব ছাড়াই বা তার আর্কিটেকচারের সাথে মেলামেশা করে।

আমি উপস্থিত একটি সাক্ষাত্কার থেকে শুনেছি, Angular এর প্রতিষ্ঠাতা এক বলেন তারা DOM ম্যানিপুলেশন আলাদা করার জন্য সত্যিই কঠিন কাজ করে তাই তাদের অন্তর্ভুক্ত অন্তর্ভুক্ত করার চেষ্টা করবেন না।


1. আপনার পৃষ্ঠাটি ডিজাইন করবেন না এবং এটি DOM ম্যানিপুলেশনের সাথে পরিবর্তন করুন

JQuery এ, আপনি একটি পৃষ্ঠা ডিজাইন করেন, এবং তারপর আপনি এটি গতিশীল করে তোলে। এই কারণ jQuery জাগ্রতকরণের জন্য ডিজাইন করা হয়েছে এবং অবিলম্বে যে সহজ প্রাঙ্গনে থেকে উত্থিত হয়েছে।

কিন্তু AngularJS, আপনি আপনার আর্কিটেকচার সঙ্গে মাঠ থেকে শুরু করতে হবে। চিন্তা করে শুরু করার জন্য "আমার কাছে ডম এর এই অংশ রয়েছে এবং আমি এটি এক্স করতে চাই", আপনি যা অর্জন করতে চান তা দিয়ে শুরু করতে হবে, তারপরে আপনার অ্যাপ্লিকেশনটি ডিজাইন করার জন্য যান, এবং অবশেষে আপনার মতামত ডিজাইন করতে যান।

2. AngularJS সঙ্গে jQuery বৃদ্ধি করবেন না

একইভাবে, জাভাস্ক্রিপ্ট এক্স, ওয়াই এবং জেডের ধারণাটি দিয়ে শুরু করবেন না, তাই আমি মডেল এবং কন্ট্রোলারগুলির জন্য উপরের দিকে AngularJS যুক্ত করব। এটি কেবল তখনই প্রলুব্ধকর যে আপনি যখন শুরু করছেন তখনই আমি সবসময় সুপারিশ করি যে নতুন AngularJS ডেভেলপারগুলি অন্তত jQuery ব্যবহার করে না যতক্ষণ না তারা "Angular Way" জিনিসটি ব্যবহার না করে।

আমি এখানে অনেকগুলি ডেভেলপার দেখেছি এবং মেইলিং লিস্টে 150 বা 200 লাইন কোডের jQuery প্লাগিনগুলির সাথে এই বিস্তৃত সমাধানগুলি তৈরি করেছি যা তারা কলব্যাকগুলির সংগ্রহের সাথে AngularJS এ আঠালো করে এবং $apply যেগুলি বিভ্রান্তিকর এবং সংকীর্ণ হয় সেগুলি $apply ; কিন্তু তারা অবশেষে এটি কাজ পেতে! সমস্যাটি হ'ল বেশিরভাগ ক্ষেত্রেই jQuery প্লাগইনটি কোডের ভগ্নাংশে AngularJS এ পুনঃলিখন করা যেতে পারে, যেখানে হঠাৎ সবকিছুই বোঝা যায় এবং সহজতর হয়ে যায়।

নিচের লাইনটি হল: সমাধান করার সময় প্রথমে "AngularJS এ চিন্তা করুন"; যদি আপনি সমাধানটির কথা ভাবতে না পারেন তবে সম্প্রদায়কে জিজ্ঞাসা করুন; যে সব পরে কোন সহজ সমাধান নেই, তারপর jQuery জন্য পৌঁছাতে বিনা দ্বিধায়। কিন্তু jQuery কে একটি ক্রাচ হতে দেবেন না অথবা আপনি AngularJS কে মাস্টার করবেন না।

3. সর্বদা স্থাপত্য শর্তাবলী মনে

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

তাহলে কিভাবে আপনি তা করবেন? আপনি কিভাবে AngularJS মনে করেন? এখানে jQuery এর সাথে বিপরীত কিছু সাধারণ নীতি রয়েছে।

দেখুন "সরকারী রেকর্ড"

JQuery এ, আমরা প্রোগ্রামটি পরিবর্তন দেখুন। আমরা যেমন একটি ul হিসাবে সংজ্ঞায়িত একটি ড্রপডাউন মেনু হতে পারে:

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

JQuery এ, আমাদের অ্যাপ্লিকেশন লজিকের মধ্যে, আমরা এটির মতো কিছু সক্রিয় করব:

$('.main-menu').dropdownMenu();

যখন আমরা কেবল দৃশ্যটি দেখি, তাৎক্ষণিকভাবে তা স্পষ্ট নয় যে এখানে কোনো কার্যকারিতা রয়েছে। ছোট অ্যাপ্লিকেশন জন্য, যে সূক্ষ্ম। কিন্তু অ-তুচ্ছ অ্যাপ্লিকেশনের জন্য, জিনিসগুলি দ্রুত বিভ্রান্তিকর এবং বজায় রাখার জন্য কঠিন।

AngularJS তে, দৃশ্যটি দৃশ্য ভিত্তিক কার্যকারিতাগুলির আনুষ্ঠানিক রেকর্ড। আমাদের ul ঘোষণা এই পরিবর্তে দেখতে হবে:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

এই দুইটি একই জিনিস করে, কিন্তু AngularJS সংস্করণে যে কেউ টেমপ্লেটের দিকে তাকায় তা কি ঘটতে পারে তা জানে। যখনই ডেভেলপমেন্ট টিমের নতুন সদস্য বোর্ডে আসে, তখন সে এই দিকে নজর রাখতে পারে এবং তারপর জানা যায় যে dropdownMenu এটির উপর পরিচালিত একটি নির্দেশিকা রয়েছে; তিনি সঠিক উত্তর intuit বা কোন কোড মাধ্যমে sift করতে হবে না। দৃশ্য কি ঘটতে অনুমিত ছিল আমাদের বলা। অনেক ক্লিনার।

AngularJS এ নতুন বিকাশকারীরা প্রায়শই একটি প্রশ্ন জিজ্ঞেস করে: আমি কিভাবে একটি নির্দিষ্ট ধরনের সমস্ত লিঙ্ক খুঁজে পাব এবং তাদের উপর একটি নির্দেশনা যোগ করব। যখন আমরা উত্তর দিই তখন ডেভেলপার সবসময় flabbergasted হয়: আপনি না। কিন্তু যে কারণে আপনি এটি করেন না এটি হল অর্ধ-জাভাস্ক্রিপ্ট, অর্ধ-অঙ্গুলি JS এবং কোনও ভাল নেই। এখানে সমস্যাটি হল বিকাশকারী AngularJS এর ​​প্রসঙ্গে "jQuery করবেন" করার চেষ্টা করছে। যে ভাল কাজ করতে যাচ্ছে না। দেখুন সরকারী রেকর্ড। একটি নির্দেশের বাইরে (নীচের এই বিষয়ে আরো), আপনি কখনও কখনও কখনও DOM পরিবর্তন করবেন না। এবং নির্দেশাবলী দেখুন প্রয়োগ করা হয় , তাই অভিপ্রায় স্পষ্ট।

মনে রাখবেন: ডিজাইন করবেন না, এবং তারপর চিহ্নিত করুন। আপনি স্থপতি, এবং তারপর নকশা আবশ্যক।

তথ্য বাঁধাই

এটি AngularJS এর ​​সবচেয়ে সন্ত্রস্ত বৈশিষ্ট্যগুলির মধ্যে একটি এবং পূর্ববর্তী বিভাগে উল্লেখিত DOM ম্যানিপুলেশনের ধরনের অনেকগুলি প্রয়োজনীয়তা কাটায়। AngularJS স্বয়ংক্রিয়ভাবে আপনার ভিউ আপডেট করবে তাই আপনাকে করতে হবে না! JQuery এ, আমরা ইভেন্টগুলির প্রতিক্রিয়া জানাই এবং তারপর সামগ্রী আপডেট করি। কিছুটা এইরকম:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

এই মত দেখতে একটি দৃশ্য জন্য:

<ul class="messages" id="log">
</ul>

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

এটি একটি সামান্য নোংরা এবং একটি তীক্ষ্ণ দুর্বল। কিন্তু AngularJS এ, আমরা এটা করতে পারি:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

এবং আমাদের দৃষ্টি এই মত দেখতে পারেন:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

কিন্তু সেই ক্ষেত্রে, আমাদের মতামত এইরকম দেখতে পারে:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

এবং এখন একটি unordered তালিকা ব্যবহার করার পরিবর্তে, আমরা বুটস্ট্র্যাপ সতর্কতা বাক্স ব্যবহার করছি। এবং আমরা নিয়ন্ত্রক কোড পরিবর্তন ছিল না! কিন্তু আরো গুরুত্বপূর্ণ, লগ কোথায় আপডেট হবে যেখানেই হোক না কেন, দৃশ্যও পরিবর্তন হবে। স্বয়ংক্রিয়ভাবে. ঝরঝরে!

যদিও আমি এখানে এটি দেখিনি, তথ্য বাঁধাই দুটি উপায়। তাই এই লগ বার্তাগুলি কেবল এই কাজ করে সম্পাদনাযোগ্য হতে পারে: <input ng-model="entry.msg" /> । এবং আরো অনেক আছে আনন্দ হয়।

ভিন্ন মডেল স্তর

JQuery এ, DOM মডেলের মত ধরনের। কিন্তু AngularJS এ, আমাদের একটি আলাদা মডেল লেয়ার রয়েছে যা আমরা যেকোন উপায়ে পরিচালনা করতে পারি, সম্পূর্ণরূপে স্বাধীনভাবে দৃশ্য থেকে। এটি উপরের তথ্যকে বাঁধাইয়ের জন্য সাহায্য করে, উদ্বেগের বিচ্ছেদকে বজায় রাখে এবং অনেক বেশি যাচাইযোগ্যতা প্রবর্তন করে। অন্যান্য উত্তর এই বিন্দু উল্লিখিত, তাই আমি এটা এ ছেড়ে চলে যাবে।

উদ্বেগ বিচ্ছেদ

এবং উপরের সমস্তই এই ওভার-আর্কিং থিমের সাথে সংযুক্ত রয়েছে: আপনার উদ্বেগগুলিকে আলাদা রাখুন। আপনার দৃষ্টিভঙ্গি কি ঘটতে অনুমিত হয় তার আনুষ্ঠানিক রেকর্ড হিসাবে কাজ করে (অধিকাংশ অংশে); আপনার মডেল আপনার তথ্য প্রতিনিধিত্ব করে; পুনঃব্যবহারযোগ্য কর্ম সঞ্চালনের জন্য আপনার একটি পরিষেবা স্তর আছে; আপনি DOM ম্যানিপুলেশন করবেন এবং নির্দেশাবলী সঙ্গে আপনার ভিউ বৃদ্ধি; এবং আপনি কন্ট্রোলার সঙ্গে একসঙ্গে সব আঠালো। এটি অন্যান্য উত্তরগুলিতেও উল্লেখ করা হয়েছে, এবং আমি যা যোগ করব তা যাচাইযোগ্যতার সাথে সম্পর্কিত, যা আমি নীচে অন্য বিভাগে আলোচনা করব।

নির্ভরতা ইনজেকশন

উদ্বেগ বিচ্ছেদ সঙ্গে আমাদের সাহায্য করার জন্য নির্ভরতা ইনজেকশন (ডিআই) হয়। যদি আপনি সার্ভার-পার্শ্ব ভাষা থেকে ( Java থেকে PHP ) আসেন তবে সম্ভবত আপনি এই ধারণার সাথে পরিচিত হয়েছেন, তবে আপনি যদি একজন ক্লায়েন্ট-সাইড লোকটি jQuery থেকে আসেন তবে এই ধারণাটি নির্বোধ থেকে অপ্রাসঙ্গিক থেকে হিপস্টার পর্যন্ত কিছু মনে হতে পারে । কিন্তু এটা না. :-)

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

চলুন আমাদের আবেদনটিতে বলি, আমাদের এমন একটি পরিষেবা দরকার যা একটি REST API এর মাধ্যমে সার্ভার-সাইড স্টোরেজ প্রয়োগ করে এবং অ্যাপ্লিকেশান স্টেট, স্থানীয় সঞ্চয়স্থানের উপর নির্ভর করে। আমাদের নিয়ামকগুলিতে পরীক্ষা চলাকালীন, আমরা সার্ভারের সাথে যোগাযোগ করতে চাই না - আমরা সব পরে নিয়ন্ত্রক পরীক্ষা করছি। আমরা কেবল আমাদের আসল উপাদান হিসাবে একই নামটির একটি মক পরিষেবা যোগ করতে পারি, এবং ইনজেক্টরটি নিশ্চিত করবে যে আমাদের নিয়ামক স্বয়ংক্রিয়ভাবে জালিয়াতি পাবে - আমাদের কন্ট্রোলারটি পার্থক্যটি জানেন না এবং তার প্রয়োজন নেই।

পরীক্ষার কথা বলছি ...

4. টেস্ট চালিত উন্নয়ন - সবসময়

এটি আর্কিটেকচারের উপর বিভাগ 3 এর সত্যিই অংশ, কিন্তু এটি এত গুরুত্বপূর্ণ যে আমি এটি নিজের শীর্ষ স্তরের বিভাগ হিসাবে আছি।

আপনি দেখেছেন, ব্যবহার করেছেন, বা লিখেছেন এমন অনেক jQuery প্লাগিনের মধ্যে, তাদের মধ্যে কতজন একটি পরীক্ষামূলক পরীক্ষা স্যুট আছে? খুব বেশি নয় কারণ jQuery এটিকে খুব সামঞ্জস্যপূর্ণ নয়। কিন্তু AngularJS হয়।

JQuery এ, পরীক্ষা করার একমাত্র উপায় প্রায়শই নমুনা / ডেমো পৃষ্ঠা সহ উপাদানটি তৈরি করতে হয় যার বিরুদ্ধে আমাদের পরীক্ষাগুলি DOM ম্যানিপুলেশন সম্পাদন করতে পারে। তাই আমাদের আলাদাভাবে একটি উপাদান বিকাশ করতে হবে এবং তারপর আমাদের আবেদন মধ্যে এটি সংহত করতে হবে। কতটা অসুবিধাজনক! অনেক সময়, যখন জাভাস্ক্রিপ্টের সাথে উন্নয়নশীল, আমরা পরীক্ষা-চালিত বিকাশের পরিবর্তে পুনরাবৃত্তি পছন্দ করি। আর কে আমাদের দোষ দিতে পারে?

কিন্তু আমরা উদ্বেগ বিচ্ছেদ কারণ, আমরা পরীক্ষা-চালিত উন্নয়ন AngularJS মধ্যে তারাতারিভাবে করতে পারেন! উদাহরণস্বরূপ, আসুন আমরা বলি যে আমাদের মেনুতে আমাদের বর্তমান রুটটি কী নির্দেশ করে তা সুপার-সরল নির্দেশনা। আমরা আমাদের আবেদন দর্শনে যা চাই তা আমরা ঘোষণা করতে পারি:

<a href="/hello" when-active>Hello</a>

ঠিক আছে, এখন অস্তিত্বহীন when-active নির্দেশের জন্য আমরা একটি পরীক্ষা লিখতে পারি:

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

এবং যখন আমরা আমাদের পরীক্ষা চালাতে পারি, আমরা নিশ্চিত করতে পারি যে এটি ব্যর্থ হয়। শুধুমাত্র এখন আমরা আমাদের নির্দেশিকা তৈরি করা উচিত:

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

আমাদের পরীক্ষা এখন পাস এবং আমাদের মেনু অনুরোধ হিসাবে সঞ্চালিত হয়। আমাদের উন্নয়ন উভয় পুনরাবৃত্তিমূলক এবং পরীক্ষা চালিত হয়। দুষ্ট-কুল।

5. ধারণাগতভাবে, নির্দেশাবলী jQuery প্যাকেজ হয় না

আপনি প্রায়ই শুনতে পাবেন "শুধুমাত্র একটি নির্দেশে DOM ম্যানিপুলেশন করবেন"। এটি একটি প্রয়োজনীয়তা। যথোপযুক্ত সৃষ্টিকর্তা সঙ্গে এটি চিকিত্সা!

কিন্তু এর একটু গভীরে ডুব দাও ...

কিছু নির্দেশনাগুলি কেবলমাত্র দর্শনে যা রয়েছে তা সাজাইয়া ngClass ( ngClass মনে ngClass ) এবং অতএব কখনও কখনও DOM ম্যানিপুলেশনটি সরাসরি করে এবং তারপর মূলত সম্পন্ন হয়। কিন্তু একটি নির্দেশিকা যদি একটি "উইজেট" এর মত এবং একটি টেমপ্লেট থাকে তবে এটি উদ্বেগ বিচ্ছেদকেও সম্মান করতে হবে। অর্থাৎ, লিংক এবং নিয়ামক ফাংশনে তার প্রয়োগ থেকেও টেমপ্লেটটি মূলত স্বাধীন থাকা উচিত।

AngularJS এটিকে খুব সহজ করতে সরঞ্জামগুলির একটি সম্পূর্ণ সেট দিয়ে আসে; ngClass সঙ্গে আমরা গতিশীলভাবে ক্লাস আপডেট করতে পারেন; ngModel দুই-উপায় তথ্য বাঁধাই অনুমতি দেয়; ngShow এবং ngHide প্রোগ্রামগতভাবে একটি উপাদান প্রদর্শন বা লুকান; এবং আরো অনেক কিছু - আমরা নিজেদের লিখতে সহ। অন্য কথায়, আমরা DOM ম্যানিপুলেশন ছাড়া সব ধরনের অসাধারণ কাজ করতে পারি। কম DOM ম্যানিপুলেশন, সহজ নির্দেশগুলি পরীক্ষা করা, সহজে স্টাইল করা, ভবিষ্যতে এটিকে আরও সহজে পরিবর্তন করা এবং আরও বেশি ব্যবহারযোগ্য এবং বিতরণযোগ্য।

আমি jQuery এর গুচ্ছ নিক্ষেপ করার জায়গা হিসাবে নির্দেশক ব্যবহার করে AngularJS এ নতুন ডেভেলপারদের নতুন দেখি। অন্য কথায়, তারা মনে করে "যেহেতু আমি কন্ট্রোলারের DOM ম্যানিপুলেশন করতে পারছি না, তাই আমি সেই কোডটি সরাসরি এটিতে রাখব"। যে অবশ্যই অবশ্যই অনেক ভাল, এটা প্রায়ই এখনও ভুল

আমরা বিভাগে প্রোগ্রাম করা লগার চিন্তা 3। এমনকি যদি আমরা একটি নির্দেশে যে রাখা, আমরা এখনও "Angular ওয়ে" করতে চান। এটি এখনও কোনো DOM ম্যানিপুলেশন না! DOM ম্যানিপুলেশন প্রয়োজন যখন অনেক সময় আছে, কিন্তু এটি আপনি মনে মনে অনেক বিরল! আপনার অ্যাপ্লিকেশন যে কোন জায়গায় DOM ম্যানিপুলেশন করার আগে, আপনি সত্যিই প্রয়োজন হলে নিজেকে জিজ্ঞাসা করুন। একটি ভাল উপায় হতে পারে।

এখানে একটি দ্রুত উদাহরণ যা আমি প্রায়শই দেখতে প্যাটার্ন দেখায়। আমরা একটি toggleable বাটন চান। (দ্রষ্টব্য: এই উদাহরণটি একটু জটিল এবং একটি জটিল ক্রোজোজ যা আরো জটিল ক্ষেত্রে প্রতিনিধিত্ব করে যা ঠিক একইভাবে সমাধান করা হয়।)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

এই সঙ্গে কিছু জিনিস ভুল আছে:

  1. প্রথম, jQuery প্রয়োজন ছিল না। এখানে এমন কিছু নেই যা আমরা jQuery এ প্রয়োজন ছিল!
  2. দ্বিতীয়ত, আমাদের পৃষ্ঠায় যদি ইতিমধ্যে আমাদের জাভাস্ক্রিপ্ট থাকে তবে এখানে এটি ব্যবহার করার কোনো কারণ নেই; আমরা সহজভাবে angular.element ব্যবহার করতে angular.element এবং আমাদের উপাদানটি তখনও কাজ করবে যখন কোনও প্রকল্পে যা jQuery নেই।
  3. তৃতীয়, এমনকি জাভাস্ক্রিপ্টটিও এই নির্দেশনাটি কাজে লাগানোর জন্য প্রয়োজনীয় ছিল , jqLite ( angular.element ) এটি লোড করা থাকলে সর্বদা jQuery ব্যবহার করবে! সুতরাং আমরা $ ব্যবহার করতে হবে না - আমরা শুধু angular.element ব্যবহার করতে পারেন।
  4. চতুর্থ, তৃতীয়টির সাথে ঘনিষ্ঠভাবে সম্পর্কযুক্ত, জাক্লাইট উপাদানগুলিকে $ আবৃত করা দরকার না - link ফাংশনে প্রেরিত element ইতিমধ্যেই একটি jQuery উপাদান হতে পারে !
  5. এবং পঞ্চম, যা আমরা পূর্ববর্তী বিভাগে উল্লেখ করেছি, কেন আমরা আমাদের যুক্তিযুক্ত টেমপ্লেট উপাদান মিশ্রিত করা হয়?

এই নির্দেশিকা পুনর্লিখন করা যেতে পারে (এমনকি খুব জটিল ক্ষেত্রে!) আরো সহজভাবে তাই চাই:

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

আবার, টেমপ্লেট স্টাফটি টেমপ্লেটের মধ্যে রয়েছে, তাই আপনি (অথবা আপনার ব্যবহারকারীরা) সহজেই এটির জন্য যে কোন স্টাইলের প্রয়োজনীয়তার জন্য এটি স্যুইপ করতে পারেন, এবং যুক্তিটি স্পর্শ করতে হয়নি। পুনঃব্যবহারযোগ্যতা - বুম!

এবং টেস্টিং মত অন্যান্য অন্যান্য সুবিধা এখনও আছে - এটা সহজ! টেম্পলেটের কোন ব্যাপার নেই, নির্দেশকের অভ্যন্তরীণ API স্পর্শ করা হয় না, তাই রিফ্যাক্টর করা সহজ। আপনি নির্দেশনা স্পর্শ না করে আপনি যতটা চান টেম্পলেটটি পরিবর্তন করতে পারেন। এবং আপনি কি পরিবর্তন কোন ব্যাপার, আপনার পরীক্ষা এখনও পাস।

w00t!

তাই যদি নির্দেশাবলী শুধু jQuery- এর মত ফাংশন সংগ্রহ না হয়, তারা কি? নির্দেশাবলী আসলে এইচটিএমএল এক্সটেনশান হয় । যদি এইচটিএমএল কিছু না করে তবে আপনাকে এটি করতে হবে, আপনি এটি করার জন্য একটি নির্দেশ লিখুন এবং তারপর এটি HTML এর অংশ হিসাবে ব্যবহার করুন।

আরেকটি উপায় রাখুন, যদি AngularJS বাক্সের বাইরে কিছু না করে, তাহলে এটি কীভাবে ngClick , ngClass , ngClass ngClick ফিট করতে পারে তা মনে করেন।

সারাংশ

এমনকি jQuery ব্যবহার করবেন না। এমনকি এটি অন্তর্ভুক্ত করবেন না। এটা আপনি ফিরে রাখা হবে। এবং যখন আপনি কোনও সমস্যার সম্মুখীন হন যা আপনি মনে করেন যে আপনি কীভাবে jQuery এ সমাধান করতে জানেন, আপনি $ আগে পৌঁছানোর আগে, এটি AngularJS কে সীমিত করে কীভাবে করবেন তা নিয়ে চিন্তা করার চেষ্টা করুন। আপনি যদি না জানেন, জিজ্ঞাসা করুন! ২0 টির মধ্যে 19 বার, এটি করার সর্বোত্তম উপায়টি jQuery এর প্রয়োজন নেই এবং এটির জন্য আপনার কাজের আরও জাভাস্ক্রিপ্টের সাথে এটি সমাধান করার চেষ্টা করুন।


Imperative → ঘোষণামূলক

JQuery এ, নির্বাচকরা DOM উপাদানের সন্ধান করতে ব্যবহৃত হয় এবং তারপরে ইভেন্ট হ্যান্ডলারগুলিকে তাদের সাথে যুক্ত / নিবন্ধন করে। যখন একটি ইভেন্ট ট্রিগার হয়, তখন (জরুরী) কোডটি DOM আপডেট / পরিবর্তন করার জন্য কার্যকর হয়।

AngularJS এ, আপনি DOM উপাদানের পরিবর্তে মতামত সম্পর্কে চিন্তা করতে চান। দৃশ্যগুলি (ঘোষণামূলক) এইচটিএমএল যা AngularJS নির্দেশাবলী ধারণ করে। নির্দেশাবলী আমাদের জন্য দৃশ্যের পিছনে ইভেন্ট হ্যান্ডলার সেট আপ এবং আমাদের গতিশীল databinding দিতে। নির্বাচকদের খুব কমই ব্যবহার করা হয়, তাই আইডিগুলির (এবং কিছু ধরণের ক্লাস) প্রয়োজনগুলি হ্রাস পেয়েছে। মতামত মডেল বাঁধা হয় (scopes মাধ্যমে)। মতামত মডেল একটি অভিক্ষেপ। ঘটনাগুলি মডেলগুলি পরিবর্তন করে (অর্থাৎ, তথ্য, সুযোগ বৈশিষ্ট্য) এবং সেই মডেলগুলি যে মডেলগুলিকে প্রজেক্ট করে তা স্বয়ংক্রিয়ভাবে আপডেট করে।

AngularJS এ, আপনার ডেটা ধারণ করে এমন jQuery- নির্বাচিত DOM উপাদানগুলির পরিবর্তে মডেলগুলি সম্পর্কে চিন্তা করুন। ব্যবহারকারীরা যা দেখছেন তা কাজে লাগানোর জন্য কলব্যাকগুলি নিবন্ধন করার পরিবর্তে, সেই মডেলগুলির অভিক্ষেপ হিসাবে মতামতের বিষয়ে চিন্তা করুন।

উদ্বেগ বিচ্ছেদ

jQuery অবাঞ্ছিত জাভাস্ক্রিপ্ট ব্যবহার করে - আচরণ (জাভাস্ক্রিপ্ট) গঠন থেকে পৃথক করা হয় (এইচটিএমএল)।

ভিউ / স্ট্রাকচার (এইচটিএমএল) থেকে আচরণ মুছে ফেলার জন্য AngularJS কন্ট্রোলার এবং নির্দেশাবলী (যা প্রতিটি তাদের নিজস্ব নিয়ামক, এবং / অথবা কম্পাইল এবং লিঙ্ক ফাংশন থাকতে পারে) ব্যবহার করে। Angular এছাড়াও আপনার আবেদন আলাদা / সংগঠিত সাহায্য করার জন্য সেবা এবং ফিল্টার আছে।

আরও দেখুন https://.com/a/14346528/215945

অ্যাপ্লিকেশন নকশা

একটি AngularJS অ্যাপ্লিকেশন ডিজাইন করার এক পদ্ধতির:

  1. আপনার মডেল সম্পর্কে চিন্তা করুন। যারা মডেলের জন্য সেবা বা আপনার নিজের জাভাস্ক্রিপ্ট বস্তু তৈরি করুন।
  2. আপনি আপনার মডেল উপস্থাপন করতে চান কিভাবে চিন্তা করুন - আপনার মতামত। গতিশীল databinding পেতে প্রয়োজনীয় নির্দেশাবলী ব্যবহার করে, প্রতিটি ভিউ জন্য এইচটিএমএল টেম্পলেট তৈরি করুন।
  3. প্রতিটি ভিউতে নিয়ামক সংযুক্ত করুন (এনজি ভিউ এবং রাউটিং, বা এনজি-নিয়ামক ব্যবহার করে)। কন্ট্রোলার খুঁজে পেতে / দেখুন মডেল মডেল যাই হোক না কেন তার কাজ করতে হবে। সম্ভব পাতলা হিসাবে কন্ট্রোলার করুন।

প্রোটোটাইল উত্তরাধিকার

জাভাস্ক্রিপ্ট প্রোটোটাইপ উত্তরাধিকার কিভাবে কাজ করে সে সম্পর্কে জেনেও আপনি jQuery এর সাথে অনেক কিছু করতে পারেন। AngularJS অ্যাপ্লিকেশনগুলি ডেভেলপ করার সময়, যদি আপনি জাভাস্ক্রিপ্ট উত্তরাধিকারের ভাল বোঝেন তবে আপনি কিছু সাধারণ ক্ষতি এড়াতে পারবেন। প্রস্তাবিত পাঠ্য: AngularJS এ স্কোপ প্রোটোটাইপ / প্রোটোটিকাল উত্তরাধিকারের বুদ্ধি কি?


jQuery একটি DOM ম্যানিপুলেশন লাইব্রেরি।

AngularJS একটি এমভি * ফ্রেমওয়ার্ক।

আসলে, AngularJS কয়েক জাভাস্ক্রিপ্ট এমভি * ফ্রেমওয়ার্কগুলির মধ্যে একটি (অনেকগুলি JavaScript এমভিসি সরঞ্জামগুলি এখনও লাইব্রেরির অন্তর্গত)।

একটি কাঠামো হচ্ছে, এটি আপনার কোড হোস্ট করে এবং কখন এবং কখন কল করতে হবে তার সিদ্ধান্তের মালিকানা নেয়!

AngularJS নিজেই এটি মধ্যে একটি jQuery- লাইট সংস্করণ অন্তর্ভুক্ত। সুতরাং কিছু মৌলিক DOM নির্বাচন / ম্যানিপুলেশন করার জন্য, আপনাকে সত্যিই jQuery লাইব্রেরি অন্তর্ভুক্ত করতে হবে না (এটি নেটওয়ার্ক চালানোর জন্য অনেক বাইট সঞ্চয় করে।)

AngularJS এর ​​DOM ম্যানিপুলেশন এবং পুনঃব্যবহারযোগ্য UI উপাদানগুলি ডিজাইন করার জন্য "নির্দেশিকা" ধারণা রয়েছে, তাই আপনি যখন এটি DOM ম্যানিপুলেশন সম্পর্কিত উপাদানগুলি করার প্রয়োজন মনে করেন তখনই এটি ব্যবহার করা উচিত (নির্দেশগুলি কেবলমাত্র যেখানে আপনি AngularJS ব্যবহার করে jQuery কোড লিখতে হবে)।

AngularJS কিছু শেখার বক্ররেখা জড়িত (jQuery বেশী :-)।

-> jQuery পটভূমি থেকে আসা যে কোনও বিকাশকারীর জন্য, আমার প্রথম পরামর্শ "প্রথম শ্রেণীর ভাষা হিসাবে জাভাস্ক্রিপ্ট শিখতে হবে, যেমন AngularJS এর ​​মতো সমৃদ্ধ কাঠামোতে জাম্পিং করার আগে!" আমি উপরের উপায় হার্ড উপায় শিখেছি।

গুড লাক।


আপনি প্রয়োজন যে প্যাটার্ন শিফট বর্ণনা করতে পারেন?

আপত্তিজনক বনাম ঘোষণামূলক

সঙ্গে jQuery এর আপনি DOM কি ঘটতে, ধাপে ধাপে দরকার বলুন। সঙ্গে AngularJS আপনি কি ফল কি চান বর্ণনা কিন্তু এটা কি করে করবেন না। এই বিষয়ে আরও here । এছাড়াও, মার্ক Rajcok এর উত্তর চেক আউট।

কিভাবে আমি স্থপতি এবং ক্লায়েন্ট পাশাপাশি ওয়েব অ্যাপ্লিকেশন ডিজাইন করতে পারি?

AngularJS একটি সম্পূর্ণ ক্লায়েন্ট-পার্শ্ব ফ্রেমওয়ার্ক যা MVC প্যাটার্ন ব্যবহার করে (তাদের গ্রাফিকাল উপস্থাপনাটি পরীক্ষা করে দেখুন )। এটি ব্যাপকভাবে উদ্বেগ বিচ্ছেদ উপর দৃষ্টি নিবদ্ধ করে।

সবচেয়ে বড় পার্থক্য কি? আমি কি করা / ব্যবহার বন্ধ করা উচিত; আমি পরিবর্তে ব্যবহার / কি শুরু করা উচিত?

jQuery একটি লাইব্রেরি

AngularJS একটি সুন্দর ক্লায়েন্ট-পার্শ্ব ফ্রেমওয়ার্ক, অত্যন্ত টেস্টযোগ্য, যা MVC, নির্ভরতা ইনজেকশন , ডেটা বাইন্ডিং এবং আরো অনেক কিছু হিসাবে প্রচুর শীতল স্টাফগুলিকে সংহত করে ।

এটি উদ্বেগ এবং পরীক্ষার বিচ্ছেদ ( ইউনিট টেস্টিং এবং শেষ থেকে শেষ পরীক্ষার) উপর দৃষ্টি নিবদ্ধ করে , যা পরীক্ষা-চালিত বিকাশকে সহায়তা করে।

শুরু করার সেরা উপায় তাদের সন্ত্রস্ত টিউটোরিয়াল মাধ্যমে যাচ্ছে । আপনি কয়েক ঘন্টার মধ্যে পদক্ষেপ মাধ্যমে যেতে পারেন; যাইহোক, যদি আপনি দৃশ্যে পিছনে ধারণা আয়ত্ত করতে চান, তারা আরও পড়ার জন্য একটি অসাধারণ রেফারেন্স অন্তর্ভুক্ত।

কোন সার্ভার-পার্শ্ব বিবেচনা / সীমাবদ্ধতা আছে?

আপনি বিদ্যমান অ্যাপ্লিকেশনগুলিতে এটি ব্যবহার করতে পারেন যেখানে আপনি ইতিমধ্যেই বিশুদ্ধ jQuery ব্যবহার করছেন। তবে, যদি আপনি AngularJS বৈশিষ্ট্যগুলির সম্পূর্ণরূপে সুবিধা নিতে চান তবে আপনি একটি RESTful পদ্ধতির মাধ্যমে সার্ভার পার্শ্ব কোডিং বিবেচনা করতে পারেন ।

এটি করার ফলে আপনি তাদের রিসোর্স ফ্যাক্টরীটি লিভারেজ করতে পারবেন যা আপনার সার্ভার পার্শ্ব RESTful API বিমূর্ততা তৈরি করে এবং সার্ভার-পার্শ্ব কলগুলি (পান, সংরক্ষণ, মুছে ফেলুন, ইত্যাদি) অবিশ্বাস্যভাবে সহজ করে তোলে।


প্রকৃতপক্ষে, যদি আপনি AngularJS ব্যবহার করেন তবে আপনাকে আর jQuery প্রয়োজন হবে না। AngularJS নিজেই বাঁধাই এবং নির্দেশিকা আছে, যা jQuery এর সাথে আপনি যা করতে পারেন তার জন্য খুব ভাল "প্রতিস্থাপন"।

আমি সাধারণত AngularJS এবং Cordova ব্যবহার করে মোবাইল অ্যাপ্লিকেশন বিকাশ । আমি প্রয়োজন jQuery থেকে শুধুমাত্র জিনিস নির্বাচক।

Googling দ্বারা, আমি সেখানে একটি স্বতন্ত্র jQuery নির্বাচক মডিউল আছে দেখতে। এটা Sizzle হয়।

এবং আমি একটি ছোট কোড স্নিপেট তৈরি করার সিদ্ধান্ত নিয়েছি যা আমাকে jQuery নির্বাচক (Sizzle ব্যবহার করে) এর শক্তি দিয়ে AngularJS ব্যবহার করে দ্রুত একটি ওয়েবসাইট শুরু করতে সহায়তা করে।

আমি এখানে আমার কোড শেয়ার করেছেন: https://github.com/huytd/Sizzular





angularjs