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




(10)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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 এর প্রয়োজন নেই এবং এটির জন্য আপনার কাজের আরও জাভাস্ক্রিপ্টের সাথে এটি সমাধান করার চেষ্টা করুন।


jQuery এর

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

AngularJS

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

সম্পাদনা:

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

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

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


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 এ স্কোপ প্রোটোটাইপ / প্রোটোটিকাল উত্তরাধিকারের বুদ্ধি কি?


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 গুলি কল করা খুব সহজ এবং

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

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


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

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

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

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

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

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

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

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

গুড লাক।


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 লাইট নির্মিত হয়েছে যা আপনাকে সম্পূর্ণ ফুটো jQuery সংস্করণ সহ এমনকি মৌলিক DOM ম্যানিপুলেশন সম্পাদন করতে দেয়।

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

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

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

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

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


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

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

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

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

পুরো পর্বের একটি প্রতিলিপি উপরে দেওয়া লিঙ্ক এ উপলব্ধ।

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

এটা সত্যিই মন দুটি খুব ভিন্ন রাজ্যের।





angularjs