আমার যদি জিক্যুরি ব্যাকগ্রাউন্ড থাকে তবে "অ্যাঙ্গুলারজেএসে ভাবনা"? [বন্ধ]

Question

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

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

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

Comments

"এএসপি.নেট এমভিসি" বা "আরআর" এর সাথে পরিচিতদের জন্য - কেবল কৌনিকটি "ক্লায়েন্ট-সাইড এমভিসি" হিসাবে মনে করুন এবং এটি চালিয়ে যান।

— সার্জ শাল্টজ

Answer 1

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

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

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

2. অ্যাংুলারজেএস এর সাথে জিকুয়েরি বাড়ান না

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

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

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

৩. সর্বদা আর্কিটেকচারের দিক দিয়ে ভাবুন

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

তাহলে আপনি কিভাবে এটি করবেন? আপনি কীভাবে "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();

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

অ্যাঙ্গুলারজেএস-এ যদিও ভিউটি-ভিত্তিক কার্যকারিতার সরকারী রেকর্ড। আমাদের ulঘোষণাটি এর পরিবর্তে এর মতো দেখাবে:

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

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

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

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

ডেটা বাইন্ডিং

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

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

এমন দেখতে দেখার জন্য:

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

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

এটি একটি সামান্য অগোছালো এবং একটি ট্রাইফেল ভঙ্গুর। তবে 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>

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

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

স্বতন্ত্র মডেল স্তর

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

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

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

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

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

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

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

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

৪. পরীক্ষামূলকভাবে চালিত উন্নয়ন - সর্বদা

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

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

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

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

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

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

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="https://stackoverflow.com/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 এর প্যাকেজ

আপনি প্রায়শই শুনতে পাবেন "কেবলমাত্র কোনও নির্দেশকে ডোম ডেরফের করতে চান"। এটি একটি প্রয়োজনীয়তা। যথাযথ শ্রদ্ধার সাথে এটি আচরণ করুন!

তবে কিছুটা গভীর ডুব দেওয়া যাক ...

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

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

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

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

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

.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. দ্বিতীয়ত, আমাদের পৃষ্ঠায় ইতিমধ্যে jQuery থাকলেও এখানে এটি ব্যবহার করার কোনও কারণ নেই; আমরা সহজভাবে ব্যবহার করতে পারি angular.elementএবং jQuery নেই এমন একটি প্রকল্পে ফেলে দেওয়া হলে আমাদের উপাদানগুলি এখনও কাজ করবে।
3. তৃতীয়ত, এমনকি অনুমান করেও যে jQuery এর কাজ করার জন্য এই নির্দেশনার প্রয়োজন ছিল , jqLite ( angular.element) সর্বদা jQuery ব্যবহার করবে যদি এটি লোড করা হত! সুতরাং আমাদের ব্যবহারের দরকার নেই $- আমরা কেবল ব্যবহার করতে পারি angular.element।
4. চতুর্থ, তৃতীয়টির সাথে নিবিড়ভাবে সম্পর্কিত, এটি হল যে jqLite উপাদানগুলিকে আবৃত করা উচিত নয় $- elementএটি linkফাংশনে পাস করা হবে ইতিমধ্যে একটি 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;
            };
        }
    };
});

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

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

w00t!

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

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

সারসংক্ষেপ

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

Comments

আমি মনে করি যে কৌনিক অ্যাপের মধ্যে জিকুয়্যারির সাথে কাজ করা যুক্ত ব্যবহারের ক্ষেত্রে গুরুত্বপূর্ণ কারণ বিদ্যমান বিদ্যমান জিকুয়েরি প্লাগইনগুলি লেখা হয়েছে of খাঁটি অ্যাংুলার অ্যাপ রাখার জন্য আমি jQuery এ ফ্যান্সিবক্সকে আবার লিখছি না।

— taudep

@ টিউডেপ আমি মনে করি না আপনি যতটা ভাবেন ততই আমরা দ্বিমত পোষণ করি। বেশিরভাগ jQuery প্লাগইনগুলি সস্তাভাবে AngularJS এ আবার লেখা যেতে পারে, এবং সেই ক্ষেত্রে আমাদের এটি করা উচিত। জটিল কোনও কিছুর জন্য যার সমতুল্য নেই, তার জন্য যান। বিভাগ 2 থেকে উদ্ধৃতি দিতে: 'নীচের লাইনটি হ'ল: সমাধান করার সময় প্রথমে "AngularJS এ ভাবুন"; আপনি যদি কোনও সমাধানের কথা ভাবতে না পারেন তবে সম্প্রদায়কে জিজ্ঞাসা করুন; যদি এর পরেও কোনও সহজ সমাধান না হয় তবে jQuery- এ পৌঁছাতে নির্দ্বিধায় অনুভব করুন । তবে jQuery কে ক্রাচ হয়ে উঠতে দেবেন না বা আপনি কখনই AngularJS এ আয়ত্ত করতে পারবেন না '' [জোর যোগ]

— জোশ ডেভিড মিলার

একটি চীনা এই দুর্দান্ত উত্তরের অনুবাদ, আশা করি সহায়ক। hanzheng.github.io/tech/angularjs/2013/10/28/…

— হান ঝেং

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

— ওয়্যারড_ ইন

@trusktr যদি কোনও বিকাশ কখনও কোনও AngularJS অ্যাপ্লিকেশনে jQuery ব্যবহার করে কোনও ইনপুট উপাদানটির মান সেট করে, তবে সে একটি মারাত্মক ত্রুটি করছে। একমাত্র ব্যতিক্রম যা আমি ভাবতে পারি একটি বিদ্যমান jQuery প্লাগইন যা পোর্ট করা খুব কঠিন যা একটি ইনপুট স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়, সেক্ষেত্রে অ্যাপ্লিকেশনটির সাথে ইনলাইন পরিবর্তনগুলি আনতে কলব্যাকের মধ্যে হুক করা বা একটি ঘড়ি সেট করা একেবারে প্রয়োজনীয় essential

— জোশ ডেভিড মিলার

Answer 2

আবশ্যক → ঘোষণামূলক

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

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

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

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

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

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

Https://stackoverflow.com/a/14346528/215945 এও দেখুন

অ্যাপ্লিকেশন ডিজাইন

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

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

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

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

Comments

আপনি প্লিজ করতে পারেন কিভাবে একটি ডোম উপাদান একটি ভিউ থেকে পৃথক ব্যাখ্যা?

— রাজকামাল সুব্রামনিয়ান

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

— মার্ক রাজকক

jQuery অপরিহার্য নয় । onএবং whenউচ্চতর অর্ডার-ফাংশনগুলি হয়, একটি jQuery সংগ্রহ অবজেক্টের সদস্যদের উপর অপারেটিং করে।

— জ্যাক ভাইয়ার্স

তাহলে কী ধরণের কোড কলব্যাকের জন্য কার্যকর করা হয় on? অনুজ্ঞাসূচক.

— cwharris

এই অত্যাবশ্যক বনাম ঘোষণামূলক সত্যিই কেবল বিমূর্ততার প্রশ্ন। শেষ অবধি, সমস্ত ঘোষিত কোড (কী করবেন) কার্যকরভাবে প্রয়োগ করা হয় (এটি কীভাবে করা যায়) হয় বিকাশকারী একটি সাবস্ট্রাইনে নিম্ন বিমূর্ত স্তরে ফ্রেমওয়ার্ক বা সংকলক / দোভাষীর দ্বারা। সাধারণভাবে "jQuery অপরিহার্য" বলার জন্য এটি একটি অত্যন্ত বিজোড় বক্তব্য, বিশেষত বিবেচনা করে যে এটি "ম্যানুয়াল" ডিওএম-ম্যানিপুলেশনের ক্ষেত্রে আসলে আরও অনেক ঘোষিত এপিআই সরবরাহ করে।

— অ্যালেক্স

Answer 3

AngularJS বনাম jQuery

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

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

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

jQuery আপনাকে ডিওএমের স্বেচ্ছাসেবী বিট নির্বাচন করতে এবং এগুলিতে অ্যাড-হক পরিবর্তন করার জন্য একটি সরঞ্জামকিট দেয়। আপনি টুকরো টুকরো টুকরো টুকরো পছন্দ মতো কিছু করতে পারেন।

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

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

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

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

এর অর্থ অ্যাঙ্গুলারটি টেম্পলেট চালিত । আপনার টেম্পলেটটি জাভাস্ক্রিপ্টটিকে চালিত করে, অন্যভাবে নয়। এটি ভূমিকাগুলির একটি র‌্যাডিক্যাল বিপরীতমুখী, এবং আমরা গত ১০ বছর বা তার বেশি সময় ধরে লেখার মতো অবিচ্ছিন্ন জাভাস্ক্রিপ্টের সম্পূর্ণ বিপরীত। এটি কিছুটা অভ্যস্ত হয়ে যেতে পারে।

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

আসুন নীচে কৌতুক নেমে আসা যাক।

প্রথমত, কৌণিক jQuery প্রতিস্থাপন করে না

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

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

আপনি যদি jQuery ব্যবহার করেন তবে আপনার এটি সমস্ত জায়গায় ছিটানো উচিত নয়। অ্যাঙ্গুলারজেএস-এ ডিওএম ম্যানিপুলেশনের জন্য সঠিক জায়গাটি একটি দিকনির্দেশনায়। এগুলি সম্পর্কে আরও পরে।

নির্বাচক বনাম ঘোষণামূলক টেম্পলেটগুলির সাথে আপত্তিজনক জাভাস্ক্রিপ্ট

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

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

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

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

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

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

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

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

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

উদাহরণস্বরূপ এটি রেলের অন রুবির তুলনায় এটি এক্সএসএলটির সাথে আরও সমান ।

এটি নিয়ন্ত্রণের একটি র‌্যাডিক্যাল ইনভারস্শন যা কিছুটা অভ্যস্ত হয়ে যায়।

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

অর্থপূর্ণ এইচটিএমএল বনাম সিমেন্টিক মডেলগুলি

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

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

আপনার এইচটিএমএল উত্স আর শব্দার্থক নয়, পরিবর্তে, আপনার এপিআই এবং সংকলিত ডিওএম শব্দার্থক।

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

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

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

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

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

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

দেখে মনে হচ্ছে:

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

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

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

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

প্লাগইনগুলি jQuery প্রসারিত করে। কৌণিক জেএস নির্দেশিকা আপনার ব্রাউজারের সক্ষমতা বাড়ায়।

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

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

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

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

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

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

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

এটি AngularJS এ একটি ভুল।

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

যতক্ষণ না আপনি একটি ছোট পরিবর্তন করতে চান।

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

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

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

<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>

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

বন্ধ বনাম $ সুযোগ $

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

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

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

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

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

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

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

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

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

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

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

অনুরূপভাবে:

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

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

অজাক্স সময়

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

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

পরিষেবা বিষয়বস্তু বনাম সহায়ক কার্যাদি

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

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

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

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

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

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

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

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

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

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

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

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

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

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

অ্যাঙ্গুলারজেএস স্বীকৃতি দেবে যে ফ্লিকার সার্ভিস অবজেক্টটি নিয়ামককে ইনস্ট্যান্ট করার জন্য প্রয়োজন, এবং এটি আমাদের জন্য সরবরাহ করবে।

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

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

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

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

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

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

যোগফল

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

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

আপত্তিজনক জাভাস্ক্রিপ্ট সম্পর্কে কম চিন্তা করুন, এবং পরিবর্তে এইচটিএমএল এক্সটেনশনের বিবেচনা করুন।

আমার ছোট বই

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

Comments

"উদ্বেগের বিচ্ছেদ" "এমভিসি (মডেল, ভিউ, কন্ট্রোলার)" থেকে সম্পূর্ণ পৃথক ধারণাটি সম্পূর্ণ জাল og উদ্বেগগুলি পৃথক করার জন্য ওয়েব ভাষার মডেল (এইচটিএমএল, সিএসএস এবং জেএস) এটি কীভাবে দেখায় (স্টাইলিং / লেআউট / সিএসএস) বা এটি "কী করে" তার যত্ন ব্যতীত কোনও ওয়েব পৃষ্ঠায় (মার্কআপ / এইচটিএমএল) স্টাফ রাখার মাধ্যমে তা করে does (ডোম ইভেন্ট / এজেএক্স / জাভাস্ক্রিপ্ট)। এমভিসি উদ্বেগও আলাদা করে। এমভিসি প্যাটার্নের প্রতিটি "স্তর" এর একটি পৃথক ভূমিকা রয়েছে - হয় ডেটা, রাউটিং / লজিক বা রেন্ডারিং। স্তরগুলি কলব্যাক, রুট এবং মডেল বাইন্ডিংয়ের সাথে মিলিত হয়। তত্ত্বগতভাবে, একজন ব্যক্তি প্রতিটি স্তরে বিশেষজ্ঞ করতে পারেন, যা প্রায়শই ঘটে।

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

— সুপারলুমিনারি

আপনি সঠিক. এসওসি একটি বিস্তৃত শব্দ, তবে ওয়েব দুনিয়াতে এসওসি এর একটি খুব নির্দিষ্ট অর্থ (বা সম্ভবত ছিল): শব্দার্থক এইচটিএমএল, প্রেজেন্টাল সিএসএস এবং আচরণের জন্য জাভাস্ক্রিপ্ট। আমি আমার শ্রোতা সম্পর্কে কিছু অনুমান করছি যা সম্ভবত যুক্তিযুক্ত নয়, তাই আমারও ক্ষমা চাইতে হবে।

— সুপারলুমিনি

আমি আপনার উত্তরটি সবচেয়ে স্পষ্ট এবং আলোকিত বলে মনে করি। আমি এখানে বেশ নবাগত, সুতরাং, যদি আমার একটি বিদ্যমান পৃষ্ঠা (যা আমি নিয়ন্ত্রণ করি না) পরিবর্তন করার জন্য আমার একটি এক্সটেনশন থাকে, তবে আমি কি জিকুয়েরিকে রেখে দেব?

— ড্যানিয়েল মুলার

Answer 4

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

আবশ্যক বনাম ঘোষণা

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

আমি কীভাবে ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনগুলি আলাদাভাবে ডিজাইন করব এবং করব?

অ্যাঙ্গুলারজেএস একটি সম্পূর্ণ ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক যা এমভিসি প্যাটার্ন ব্যবহার করে (তাদের পরীক্ষা করে দেখুন) গ্রাফিকাল উপস্থাপনাটি দেখুন )। এটি উদ্বেগের বিভাজনকে ব্যাপকভাবে কেন্দ্র করে।

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

jQuery এর একটি গ্রন্থাগার

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

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

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

সার্ভার-সাইড বিবেচনা / বিধিনিষেধ আছে কি?

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

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

Comments

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

— Zando

আমার মনে হয় আপনিই বিভ্রান্ত হয়ে পড়ছেন। এই প্রশ্নটি ঠিক এই স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 7062775 ঠিক করে । এছাড়াও, এই উত্তরটি ফ্রেমওয়ার্ক এবং একটি লাইব্রেরির মধ্যে পার্থক্য কী তা স্পষ্ট করতে সহায়তা করতে পারে: stackoverflow.com/a/148759/620448

— 17-18 এ উলাইসেস

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

একটি লাইব্রেরি হল এমন কোড যা আপনি কল করেন। একটি কাঠামো এমন কোড যা আপনার কোডকে কল করে। এই সংজ্ঞা দ্বারা কৌণিক একটি কাঠামো হয়। আপনি এটি উপাদানগুলির সাথে সরবরাহ করেন এবং কৌনিকটি এটি দেখায় যে আপনার উপাদানগুলি তাদের প্রয়োজনীয় নির্ভরতাগুলির সাথে তাত্ক্ষণিকভাবে যুক্ত।

— সুপারলুমিনিয়ার

Answer 5

"দৃষ্টান্তের শিফট" বর্ণনা করার জন্য, আমি মনে করি একটি সংক্ষিপ্ত উত্তরই যথেষ্ট হতে পারে।

AngularJS পথ পরিবর্তন খুঁজে উপাদান

ইন jQuery এর , আপনি সাধারণত ব্যবহার নির্বাচকরা উপাদান খুঁজে পেতে, এবং তারপর তাদের ওয়্যার:
$('#id .class').click(doStuff);

ইন AngularJS , আপনি ব্যবহার নির্দেশনা সরাসরি উপাদান চিহ্নিত করতে তাদের টেলিগ্রাম পর্যন্ত:
<a ng-click="doStuff()">

AngularJS প্রয়োজন নেই (অথবা চান) আপনি নির্বাচকরা ব্যবহার উপাদান খুঁজে পেতে - AngularJS এর মধ্যে মূল পার্থক্য jqLite বনাম পূর্ণবিকশিত jQuery এর যে jqLite নির্বাচকরা সমর্থন করে না ।

সুতরাং লোকেরা যখন "jQuery মোটেও অন্তর্ভুক্ত করবেন না" বলে, এটি মূলত কারণ তারা আপনাকে নির্বাচক ব্যবহার করতে চান না; পরিবর্তে আপনি নির্দেশাবলী ব্যবহার করতে শিখতে চান তারা চায়। সরাসরি, নির্বাচন না!

Comments

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

— স্কট রিপ্পি

আমি ভুল হলে আমাকে ক্ষমা করুন, কিন্তু আমি ভেবেছিলাম যে কোনও নির্বাচক আপনি ডম উপাদানটি খুঁজে পেতে ব্যবহার করেন? আপনি নির্বাচিত ব্যবহার করে-অন-ফ্লাইতে ব্যবহারকারী ক্লিক করতে পারে এমন এক বা 2 উপাদান নির্বাচন না করে আপনি আপনার নতুন বোঝা UI- এর প্রতিটি অংশই রেফারেন্সে রাখতে পছন্দ করেন? আমার কাছে আরও কঠিন মনে হচ্ছে ..

— রোজ

@ আলেকজান্ডারপ্রিটচার্ড কৌণিকের বিন্দুটি হ'ল আপনি নিজের জাভাস্ক্রিপ্ট থেকে নির্বাচন করেন না, আপনি আপনার টেম্পলেট থেকে সরাসরি। এটি নিয়ন্ত্রণের একটি বিপরীত যা ডিজাইনারের হাতে শক্তি রাখে। এটি ইচ্ছাকৃতভাবে নকশার নীতি। সত্যই কৌণিক পেতে আপনাকে আপনার কোডটি সম্পর্কে এইভাবে ভাবতে হবে। এটি করা শক্ত শিফট।

— সুপারলুমিনিয়ার

@ সুপারলুমিনারি কি দুর্দান্ত উক্তি! "নির্বাচন করবেন না; সরাসরি!" সিরিয়াসলি, আমি এটি ব্যবহার করব।

— স্কট রিপ্পি

এটি AngularJS সম্পর্কে আমার প্রিয় জিনিসগুলির একটি। ইউএক্স টিমটি আমার কার্যকারিতা ভঙ্গ করে বা আমাকে তাদের শৈলী ভঙ্গ করে নিয়ে চিন্তা করার দরকার নেই। তারা ক্লাস ব্যবহার করে, আমি নির্দেশাবলী, সময়কাল ব্যবহার করি। আমি নির্বাচকদের কিছুটা মিস করি না।

— adam0101

Answer 6

jQuery এর

jQuery getElementByHerpDerpখাটো এবং ক্রস ব্রাউজারের মতো হাস্যকরভাবে দীর্ঘ জাভাস্ক্রিপ্ট কমান্ড তৈরি করে ।

AngularJS

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

সম্পাদনা:

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

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

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

Comments

@ রবার্ট নির্ভর করে আপনি কী করছেন। $(".myclass")অত্যন্ত সাধারণ এবং পিও-জাভাস্ক্রিপ্টের চেয়ে jQuery এ কিছুটা সহজ।

— রব গ্রান্ট

Answer 7

JQuery: আপনার সম্পর্কে 'অনুসন্ধান অনেক চিন্তা করি করে DOM DOM উপাদানে জন্য' এবং কিছু করছেন।

AngularJS: মডেলটি হ'ল সত্য এবং আপনি সর্বদা এই অ্যাঙ্গেল থেকে ভাবেন।

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

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

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

এবং অ্যাঙ্গুলারজেএস-এ ডিওএম ম্যানিপুলেশন সহ আপনি নিজেকে নির্দেশ এবং ফিল্টার যুক্ত করতে পারেন যা আপনি বৈধ এইচটিএমএল এক্সটেনশন হিসাবে ভাবতে পারেন।

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

Answer 8

এগুলি কিছু খুব সুন্দর, তবে দীর্ঘ উত্তর।

আমার অভিজ্ঞতা সংক্ষেপে:

1. কন্ট্রোলার এবং সরবরাহকারী (পরিষেবা, কারখানা ইত্যাদি) এইচটিএমএল নয়, ডেটা মডেলটি সংশোধন করার জন্য।
2. এইচটিএমএল এবং নির্দেশাবলী মডেলটির বিন্যাস এবং বাঁধাই সংজ্ঞায়িত করে।
3. আপনার যদি কন্ট্রোলারদের মধ্যে ডেটা ভাগ করে নেওয়া দরকার, একটি পরিষেবা বা কারখানা তৈরি করুন - এগুলি অ্যাপ্লিকেশন জুড়ে ভাগ করা সিঙ্গলটন।
4. আপনার যদি কোনও এইচটিএমএল উইজেট প্রয়োজন হয় তবে একটি নির্দেশিকা তৈরি করুন।
5. আপনার যদি কিছু ডেটা থাকে এবং এখন এইচটিএমএল আপডেট করার চেষ্টা করছেন ... থাম! মডেলটি আপডেট করুন এবং নিশ্চিত করুন যে আপনার এইচটিএমএল মডেলের সাথে আবদ্ধ।

Answer 9

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

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

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

একটি কাঠামো হওয়ার কারণে এটি আপনার কোডটিকে হোস্ট করে এবং কী কল করতে হবে এবং কখন সে বিষয়ে সিদ্ধান্ত নেওয়ার মালিকানা গ্রহণ করে!

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

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

AngularJS এর ​​মধ্যে কিছু শেখার বক্ররেখা জড়িত (jQuery :-) এর চেয়ে বেশি more

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

শুভকামনা।

Answer 10

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

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

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

কৌণিক আপনার অ্যাপ্লিকেশনটিকে বিচ্ছিন্ন করে - কন্ট্রোলার - পরিষেবাদি - দৃশ্য - ইত্যাদি etc.

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

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

Answer 11

পডকাস্ট শুনুন জাভাস্ক্রিপ্ট জ্যাবার: পর্ব # 32 যা অ্যাঙ্গুলারজেএস এর মূল নির্মাতাদের বৈশিষ্ট্যযুক্ত: মিসকো হেভারি এবং ইগর মিনার। অন্যান্য জাভাস্ক্রিপ্ট ব্যাকগ্রাউন্ড, বিশেষত jQuery থেকে অ্যাঙ্গুলারজেএস-এ আসতে কেমন লাগে সে সম্পর্কে তারা অনেক কথা বলে।

পডকাস্টে তৈরি একটি পয়েন্ট আপনার প্রশ্নের সাথে শ্রদ্ধার সাথে আমার জন্য অনেক কিছুই ক্লিক করেছে:

মিসকো : [...] অ্যাঙ্গুলার সম্পর্কে আমরা খুব কষ্টের সাথে ভাবলাম যেগুলির মধ্যে একটি হ'ল আমরা কীভাবে প্রচুর পালানোর হ্যাচ সরবরাহ করি যাতে আপনি বেরিয়ে আসতে পারেন এবং মূলত এ থেকে বেরিয়ে আসার উপায় বের করতে পারেন। আমাদের কাছে, উত্তরটি হ'ল "দিকনির্দেশক"। এবং নির্দেশাবলীর সাহায্যে আপনি মূলত একটি নিয়মিত ছোট jQuery জাভাস্ক্রিপ্ট হয়ে যান, আপনি যা খুশি তা করতে পারেন।

আইগোর : সুতরাং সংকলককে নির্দেশ হিসাবে বিবেচনা করুন যা আপনি যখনই এই টেমপ্লেটে এই নির্দিষ্ট উপাদানটি বা এই সিএসএস জুড়ে আসেন তখন এটি বলে দেয় এবং আপনি এই জাতীয় কোড রাখেন এবং সেই কোডটি উপাদানটির এবং সেই উপাদানটির নীচের সমস্ত কিছুর দায়িত্বে থাকবেন iler ডোম গাছে।

পুরো পর্বের একটি প্রতিলিপি উপরের লিঙ্কটিতে উপলব্ধ।

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

এটি মনের দুটি খুব ভিন্ন রাষ্ট্র।

Comments

আমি নিশ্চিত নই যে আমি কৌনিকটি খুব মতামত সহকারে একমত হব। আপনি মতামত চান, એમ્বার তাকান। আমি অ্যাঙ্গুলারকে সোনারিলকসের মতামত হিসাবে চিত্রিত করব - আমি যা দেখছি তার অনেক জন্য, jQuery এর খুব কম মতামত রয়েছে এবং অ্যাম্বারের অনেকগুলি রয়েছে। কৌনিকটি ঠিক ঠিক বলে মনে হচ্ছে।

— বোকা

Answer 12

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

Answer 13

AngularJS এবং jQuery:

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

AngularJs একটি ক্লায়েন্ট সাইড ফ্রেমওয়ার্ক যা স্বতন্ত্র ক্লায়েন্ট সাইড অ্যাপ্লিকেশনটি তৈরি করতে প্রস্তাব করে। জিকুয়েরি একটি ক্লায়েন্ট সাইড লাইব্রেরি যা ডিওএমের চারপাশে খেলা হয়।

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

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

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

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

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

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

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

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

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

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

Answer 14

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

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

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

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

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

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

Answer 15

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

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

গুগল করে, আমি দেখতে পাচ্ছি যে সেখানে স্ট্যান্ডসোনাল জিকুয়েরি সিলেক্টর মডিউল রয়েছে। এটা সিজল।

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

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