javascript - अगर मेरे पास jQuery पृष्ठभूमि है तो "AngularJS में सोच रहा है"?




(10)

क्या आप आवश्यक प्रतिमान शिफ्ट का वर्णन कर सकते हैं?

इंपीरेटिव बनाम घोषणात्मक

JQuery के साथ आप डोम को बताते हैं कि क्या कदम उठाने की ज़रूरत है। AngularJS साथ आप वर्णन करते हैं कि आप क्या परिणाम चाहते हैं लेकिन यह कैसे नहीं करना है। here पर और अधिक । इसके अलावा, मार्क राजकोक के जवाब की जांच करें।

मैं क्लाइंट-साइड वेब ऐप्स को अलग-अलग कैसे डिजाइन और डिज़ाइन करूं?

AngularJS एक संपूर्ण क्लाइंट-साइड फ्रेमवर्क है जो MVC पैटर्न का उपयोग करता है (उनके ग्राफिकल प्रतिनिधित्व की जांच करें )। यह चिंताओं को अलग करने पर केंद्रित है।

सबसे बड़ा अंतर क्या है? मुझे क्या करना / उपयोग करना बंद करना चाहिए; इसके बजाय मुझे क्या करना / उपयोग करना शुरू करना चाहिए?

jQuery एक पुस्तकालय है

AngularJS एक सुंदर क्लाइंट-साइड फ्रेमवर्क है, जो अत्यधिक टेस्टेबल है, जो एमवीसी, निर्भरता इंजेक्शन , डेटा बाध्यकारी और बहुत कुछ जैसे ठंडा सामान को जोड़ता है ।

यह चिंताओं और परीक्षण ( इकाई परीक्षण और अंत तक परीक्षण) को अलग करने पर केंद्रित है , जो परीक्षण संचालित विकास की सुविधा प्रदान करता है।

शुरू करने का सबसे अच्छा तरीका उनके अद्भुत ट्यूटोरियल के माध्यम से जा रहा है । आप कुछ घंटों में कदमों से गुजर सकते हैं; हालांकि, यदि आप दृश्यों के पीछे अवधारणाओं को मास्टर करना चाहते हैं, तो वे आगे पढ़ने के लिए संदर्भ के असंख्य शामिल हैं।

क्या कोई सर्वर-साइड विचार / प्रतिबंध हैं?

आप इसे मौजूदा अनुप्रयोगों पर उपयोग कर सकते हैं जहां आप पहले से ही शुद्ध jQuery का उपयोग कर रहे हैं। हालांकि, अगर आप AngularJS सुविधाओं का पूरी तरह से लाभ लेना चाहते हैं तो आप एक RESTful दृष्टिकोण का उपयोग कर सर्वर पक्ष को कोडिंग करने पर विचार कर सकते हैं ।

ऐसा करने से आप अपने लाभ उठाने के लिए अनुमति देगा संसाधन कारखाना है, जो आपके सर्वर साइड RESTful का एक अमूर्त बनाता API और सर्वर साइड कॉल (, मिल को बचाने, हटाने, आदि) अविश्वसनीय रूप से आसान बना देता है।

https://code.i-harness.com

मान लीजिए कि मैं jQuery में क्लाइंट-साइड अनुप्रयोगों के विकास से परिचित हूं, लेकिन अब मैं AngularJS का उपयोग शुरू करना चाहता हूं। क्या आप आवश्यक प्रतिमान शिफ्ट का वर्णन कर सकते हैं? यहां कुछ प्रश्न दिए गए हैं जो आपको उत्तर देने में मदद कर सकते हैं:

  • मैं क्लाइंट-साइड वेब अनुप्रयोगों को अलग-अलग कैसे डिजाइन और डिज़ाइन करूं? सबसे बड़ा अंतर क्या है?
  • मुझे क्या करना / उपयोग करना बंद करना चाहिए; इसके बजाय मुझे क्या करना / उपयोग करना चाहिए?
  • क्या कोई सर्वर-साइड विचार / प्रतिबंध हैं?

मैं jQuery और AngularJS बीच एक विस्तृत तुलना की तलाश नहीं कर रहा हूं।


1. अपने पेज को डिज़ाइन न करें, और उसके बाद इसे DOM मैनिपुलेशन के साथ बदलें

JQuery में, आप एक पृष्ठ तैयार करते हैं, और फिर आप इसे गतिशील बनाते हैं। ऐसा इसलिए है क्योंकि jQuery को बढ़ाने के लिए डिज़ाइन किया गया था और उस साधारण आधार से अविश्वसनीय रूप से उभरा है।

लेकिन AngularJS में, आपको अपने वास्तुकला के साथ जमीन से शुरू होना चाहिए। सोचने से शुरू करने के बजाय "मेरे पास डोम का यह टुकड़ा है और मैं इसे एक्स करना चाहता हूं", आपको जो करना है, उसे शुरू करना है, फिर अपने आवेदन को डिजाइन करने के बारे में जानें, और फिर अंततः अपने विचार को डिजाइन करने के बारे में जानें।

2. AngularJS के साथ jQuery को बढ़ाएं नहीं

इसी प्रकार, इस विचार से शुरू न करें कि jQuery एक्स, वाई, और जेड करता है, इसलिए मैं मॉडल और नियंत्रकों के लिए इसके ऊपर एंगुलरजेएस जोड़ दूंगा। यह वास्तव में आकर्षक है जब आप अभी शुरू कर रहे हैं, यही कारण है कि मैं हमेशा अनुशंसा करता हूं कि नए एंगुलरजेएस डेवलपर्स कम से कम jQuery का उपयोग न करें, कम से कम जब तक वे "कोणीय मार्ग" करने के लिए उपयोग न करें।

मैंने यहां और मेलिंग सूची पर कई डेवलपर्स को देखा है, कोड के 150 या 200 लाइनों के jQuery प्लगइन्स के साथ इन विस्तृत समाधानों को बनाते हैं, फिर वे कॉलबैक के संग्रह के साथ एंगुलरजेएस में चिपकते हैं और $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 नामक एक निर्देश है जिस पर इसका संचालन होता है; उसे किसी भी कोड के माध्यम से सही जवाब या छेड़छाड़ करने की आवश्यकता नहीं है। विचार ने हमें बताया कि क्या होना चाहिए था। बहुत साफ

AngularJS के लिए नए डेवलपर्स अक्सर एक प्रश्न पूछते हैं: मैं एक विशिष्ट प्रकार के सभी लिंक कैसे ढूंढूं और उन पर निर्देश जोड़ें। जब हम उत्तर देते हैं तो डेवलपर हमेशा झटकेदार होता है: आप नहीं करते हैं। लेकिन कारण यह नहीं है कि यह आधा-jQuery, आधा-कोणीय जेएस, और कोई अच्छा नहीं है। यहां समस्या यह है कि डेवलपर AngularJS के संदर्भ में "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 में, डोम मॉडल की तरह है। लेकिन AngularJS में, हमारे पास एक अलग मॉडल परत है जिसे हम किसी भी तरह से प्रबंधित कर सकते हैं, पूरी तरह स्वतंत्र रूप से दृश्य से। यह उपरोक्त डेटा बाध्यकारी के लिए मदद करता है, चिंताओं को अलग करता है , और बहुत अधिक टेस्टेबिलिटी पेश करता है। अन्य उत्तरों ने इस बिंदु का उल्लेख किया है, इसलिए मैं इसे छोड़ दूंगा।

चिंताओ का विभाजन

और उपरोक्त सभी इस अति-संग्रह विषय में बंधे हैं: अपनी चिंताओं को अलग रखें। आपका विचार आधिकारिक रिकॉर्ड के रूप में कार्य करता है जो होने वाला है (अधिकांश भाग के लिए); आपका मॉडल आपके डेटा का प्रतिनिधित्व करता है; आपके पास पुन: प्रयोज्य कार्य करने के लिए एक सेवा परत है; आप डोम हेरफेर करते हैं और निर्देशों के साथ अपना विचार बढ़ाते हैं; और आप इसे सभी नियंत्रकों के साथ चिपकाते हैं। यह अन्य उत्तरों में भी उल्लेख किया गया था, और केवल एक चीज जो मैं जोड़ता हूं वह टेस्टेबिलिटी से संबंधित है, जिसे मैं नीचे दिए गए दूसरे खंड में चर्चा करता हूं।

निर्भरता अन्तःक्षेपण

चिंताओं को अलग करने में हमारी मदद करने के लिए निर्भरता इंजेक्शन (डीआई) है। यदि आप सर्वर-साइड भाषा ( Java से PHP ) से आते हैं तो आप शायद इस अवधारणा से पहले ही परिचित हैं, लेकिन यदि आप क्लाइंट-साइड लड़के हैं जो jQuery से आ रहे हैं, तो यह अवधारणा बेवकूफ से कुछ हिपस्टर तक अनावश्यक हो सकती है । लेकिन ऐसा नहीं है। :-)

एक व्यापक परिप्रेक्ष्य से, डी का मतलब है कि आप घटकों को बहुत आसानी से घोषित कर सकते हैं और फिर किसी भी अन्य घटक से, बस इसके उदाहरण के लिए पूछें और इसे दिया जाएगा। आपको ऑर्डर लोड करने, या फ़ाइल स्थानों या उसके जैसा कुछ भी नहीं पता है। शक्ति तुरंत दिखाई नहीं दे सकती है, लेकिन मैं केवल एक (सामान्य) उदाहरण प्रदान करूंगा: परीक्षण।

मान लें कि हमारे आवेदन में, हमें ऐसी सेवा की आवश्यकता है जो एक REST एपीआई के माध्यम से सर्वर-साइड स्टोरेज लागू करे और आवेदन स्थिति, स्थानीय भंडारण के आधार पर भी। हमारे नियंत्रकों पर परीक्षण चलाते समय, हम सर्वर के साथ संवाद नहीं करना चाहते हैं - हम नियंत्रक का परीक्षण कर रहे हैं, आखिरकार। हम अपने मूल घटक के समान नाम की एक नकली सेवा जोड़ सकते हैं, और इंजेक्टर यह सुनिश्चित करेगा कि हमारे नियंत्रक को नकली स्वचालित रूप से मिल जाए - हमारे नियंत्रक को अंतर नहीं पता और आवश्यकता नहीं है।

परीक्षण की बात कर रहे हैं ...

4. परीक्षण संचालित विकास - हमेशा

यह वास्तुकला पर धारा 3 का वास्तव में हिस्सा है, लेकिन यह इतना महत्वपूर्ण है कि मैं इसे अपने स्वयं के शीर्ष-स्तर अनुभाग के रूप में डाल रहा हूं।

आपके द्वारा देखे गए, उपयोग किए गए या लिखे गए कई jQuery प्लगइनों में से, उनमें से कितने परीक्षण सूट के साथ थे? बहुत ज्यादा नहीं क्योंकि jQuery उस के लिए बहुत अनुकूल नहीं है। लेकिन AngularJS है।

JQuery में, परीक्षण करने का एकमात्र तरीका अक्सर नमूना / डेमो पृष्ठ के साथ घटक को स्वतंत्र रूप से बनाने के लिए होता है जिसके विरुद्ध हमारे परीक्षण डोम मैनिपुलेशन कर सकते हैं। तो फिर हमें एक घटक को अलग से विकसित करना होगा और फिर इसे हमारे आवेदन में एकीकृत करना होगा। कितना असुविधाजनक! इतना समय, jQuery के साथ विकास करते समय, हम परीक्षण संचालित विकास के बजाय पुनरावृत्ति का विकल्प चुनते हैं। और कौन हमें दोषी ठहरा सकता है?

लेकिन क्योंकि हम चिंताओं को अलग करते हैं, हम कोणीय जेएस में परीक्षण-आधारित विकास कर सकते हैं! उदाहरण के लिए, मान लें कि हम अपने मेनू में इंगित करने के लिए एक सुपर-सरल निर्देश चाहते हैं कि हमारा वर्तमान मार्ग क्या है। हम घोषणा कर सकते हैं कि हम अपने आवेदन के मुताबिक क्या चाहते हैं:

<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 को पैक नहीं किया जाता है

आप अक्सर "निर्देश में केवल डोम हेरफेर करते हैं" सुनेंगे। यह एक आवश्यकता है। उचित सम्मान के साथ इसका इलाज करें!

लेकिन चलो थोड़ा गहरा गोता लगाएँ ...

कुछ निर्देश केवल पहले से ही ngClass गए हैं (सोचें ngClass ) और इसलिए कभी-कभी डोम मैनिपुलेशन को तुरंत करते हैं और फिर मूल रूप से किए जाते हैं। लेकिन यदि कोई निर्देश "विजेट" जैसा है और इसमें एक टेम्पलेट है, तो इसे चिंताओं को अलग करने का भी सम्मान करना चाहिए। यही है, टेम्पलेट भी लिंक और नियंत्रक कार्यों में इसके कार्यान्वयन से काफी हद तक स्वतंत्र होना चाहिए।

AngularJS यह बहुत आसान बनाने के लिए उपकरणों के एक पूरे सेट के साथ आता है; ngClass साथ हम गतिशील रूप से कक्षा को अद्यतन कर सकते हैं; ngModel दो तरफा डेटा बाध्यकारी की अनुमति देता है; ngShow और ngHide प्रोग्रामेटिक रूप से तत्व को दिखाएं या छिपाएं; और कई और - जिनमें हम खुद को लिखते हैं। दूसरे शब्दों में, हम डीओएम हेरफेर के बिना सभी प्रकार की उत्कृष्टता कर सकते हैं। कम डोम हेरफेर, आसान निर्देश परीक्षण करना है, जितना आसान वे शैली के लिए हैं, भविष्य में उन्हें बदलने के लिए आसान है, और वे फिर से उपयोग करने योग्य और वितरित करने योग्य हैं।

मैं jQuery के एक गुच्छा फेंकने के स्थान के रूप में निर्देशों का उपयोग कर AngularJS के लिए नए डेवलपर्स को नया देखता हूं। दूसरे शब्दों में, वे सोचते हैं "चूंकि मैं नियंत्रक में डोम हेरफेर नहीं कर सकता, इसलिए मैं उस कोड को निर्देश में रखूंगा"। हालांकि यह निश्चित रूप से बहुत बेहतर है, यह अक्सर अभी भी गलत है

हमने खंड 3 में प्रोग्राम किए गए लॉगर के बारे में सोचें। भले ही हम इसे निर्देश में डाल दें, फिर भी हम इसे "कोणीय मार्ग" करना चाहते हैं। यह अभी भी कोई डोम हेरफेर नहीं लेता है! ऐसे कई बार होते हैं जब डोम हेरफेर आवश्यक होता है, लेकिन यह आपके विचार से बहुत दुर्लभ है! अपने आवेदन में कहीं भी डोम हेरफेर करने से पहले, खुद से पूछें कि आपको वास्तव में क्या करना है। एक बेहतर तरीका हो सकता है।

यहां एक त्वरित उदाहरण दिया गया है जो मैं अक्सर देखता हूं पैटर्न दिखाता है। हम एक टॉगल करने योग्य बटन चाहते हैं। (नोट: यह उदाहरण थोड़ा जटिल और स्कॉश वर्बोज़ है जो अधिक जटिल मामलों का प्रतिनिधित्व करता है जो ठीक उसी तरह हल होते हैं।)

.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 तत्वों को $ में लपेटा जाना आवश्यक नहीं है - 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;
            };
        }
    };
});

फिर, टेम्पलेट सामान टेम्पलेट में है, इसलिए आप (या आपके उपयोगकर्ता) आसानी से किसी भी शैली को पूरा करने वाले व्यक्ति के लिए इसे स्वैप कर सकते हैं, और तर्क को कभी छूना नहीं था। पुन: प्रयोज्यता - उछाल!

और अभी भी उन सभी अन्य लाभ हैं, जैसे परीक्षण - यह आसान है! कोई फर्क नहीं पड़ता कि टेम्पलेट में क्या है, निर्देशक की आंतरिक एपीआई कभी छुआ नहीं है, इसलिए रीफैक्टरिंग आसान है। आप निर्देश को छूए बिना जितना चाहें टेम्पलेट को बदल सकते हैं। और कोई फर्क नहीं पड़ता कि आप क्या बदलते हैं, आपके परीक्षण अभी भी पास हो जाते हैं।

w00t!

तो यदि निर्देश सिर्फ jQuery जैसी फ़ंक्शंस के संग्रह नहीं हैं, तो वे क्या हैं? निर्देश वास्तव में HTML के एक्सटेंशन हैं । यदि एचटीएमएल ऐसा कुछ नहीं करता है जिसे आपको करने की ज़रूरत है, तो आप इसे करने के लिए एक निर्देश लिखते हैं, और उसके बाद इसका उपयोग करें जैसे कि यह HTML का हिस्सा था।

एक और तरीका रखें, अगर AngularJS बॉक्स से कुछ नहीं करता है, तो सोचें कि टीम ngClick , ngClass , एट अल के साथ सही तरीके से फिट करने के लिए कैसे काम करेगी।

सारांश

JQuery का भी उपयोग न करें। इसे भी शामिल न करें। यह आपको वापस पकड़ देगा। और जब आप किसी समस्या पर आते हैं जो आपको लगता है कि आप पहले से ही jQuery में हल करने के बारे में जानते हैं, तो आप $$ तक पहुंचने से पहले, AngularJS को सीमित करने के तरीके के बारे में सोचने का प्रयास करें। अगर आपको नहीं पता, पूछो! 20 में से 1 9 बार, इसे करने का सबसे अच्छा तरीका jQuery की आवश्यकता नहीं है और इसे आपके लिए अधिक काम में jQuery परिणामों के साथ हल करने का प्रयास करने की आवश्यकता नहीं है।


jQuery

jQuery getElementByHerpDerpछोटे और क्रॉस-ब्राउज़र जैसे हास्यास्पद लंबे जावास्क्रिप्ट कमांड बनाता है।

AngularJS

AngularJS आपको अपने स्वयं के HTML टैग / विशेषताओं को बनाने की अनुमति देता है जो गतिशील वेब अनुप्रयोगों के साथ अच्छी तरह से काम करते हैं (क्योंकि HTML को स्थिर पृष्ठों के लिए डिज़ाइन किया गया था)।

संपादित करें:

कह रहा है "मेरे पास एक jQuery पृष्ठभूमि है, मैं एंगुलरजेएस में कैसे सोचूं?" यह कहने की तरह है "मेरे पास एक HTML पृष्ठभूमि है जो मुझे जावास्क्रिप्ट में कैसे लगता है?" तथ्य यह है कि आप सवाल पूछ रहे हैं कि आपको इन दो संसाधनों के मौलिक उद्देश्यों को समझने की संभावना नहीं है। यही कारण है कि मैंने सूची के माध्यम से मौलिक अंतर को इंगित करके प्रश्न का उत्तर देना चुना, "एंगुलरजेएस निर्देशों का उपयोग करता है जबकि jQuery एक jQuery ऑब्जेक्ट बनाने के लिए सीएसएस चयनकर्ताओं का उपयोग करता है जो यह और वह आदि करता है ...." । इस सवाल के लिए एक लंबा जवाब की आवश्यकता नहीं है।

jQuery ब्राउज़र में प्रोग्रामिंग जावास्क्रिप्ट को आसान बनाने का एक तरीका है। छोटे, क्रॉस-ब्राउज़र कमांड इत्यादि।

AngularJS HTML को बढ़ाता है, इसलिए आपको <div>केवल एप्लिकेशन बनाने के लिए जगह पर रखना नहीं है । यह एचटीएमएल वास्तव में उन अनुप्रयोगों के लिए काम करता है जो इसके लिए डिजाइन किए गए थे, जो स्थैतिक, शैक्षणिक वेब पेज हैं। यह जावास्क्रिप्ट का उपयोग करके एक चौराहे के रास्ते में इसे पूरा करता है, लेकिन मूल रूप से यह HTML का विस्तार है, जावास्क्रिप्ट नहीं।


इंपीरेटिव → घोषणात्मक

JQuery में, चयनकर्ताओं का उपयोग DOM तत्वों को खोजने के लिए किया जाता है और फिर उन्हें ईवेंट हैंडलर को बाध्य / पंजीकृत करते हैं। जब कोई ईवेंट ट्रिगर होता है, तो वह (अनिवार्य) कोड DOM को अद्यतन / बदलने के लिए निष्पादित करता है।

AngularJS में, आप डीओएम तत्वों के बजाय विचारों के बारे में सोचना चाहते हैं। दृश्य (घोषणात्मक) HTML हैं जिसमें AngularJS निर्देश शामिल हैं। निर्देशों ने हमारे लिए दृश्यों के पीछे इवेंट हैंडलर स्थापित किए हैं और हमें गतिशील डाटाबेसिंग प्रदान करते हैं। चयनकर्ताओं का शायद ही कभी उपयोग किया जाता है, इसलिए आईडी (और कुछ प्रकार के वर्ग) की आवश्यकता बहुत कम हो जाती है। दृश्य मॉडल (स्कोप्स के माध्यम से) से बंधे हैं। दृश्य मॉडल का प्रक्षेपण है। घटनाक्रम मॉडल (यानी, डेटा, स्कोप गुण) बदलते हैं, और उन मॉडलों को प्रोजेक्ट करने वाले विचार "स्वचालित रूप से" अपडेट होते हैं।

AngularJS में, अपने डेटा को रखने वाले jQuery-चयनित DOM तत्वों की बजाय मॉडल के बारे में सोचें। उपयोगकर्ता द्वारा देखे जाने वाले कार्यों में हेरफेर करने के लिए कॉलबैक पंजीकृत करने के बजाय, उन मॉडलों के अनुमानों के रूप में विचारों के बारे में सोचें।

चिंताओ का विभाजन

jQuery अविभाज्य जावास्क्रिप्ट - व्यवहार (जावास्क्रिप्ट) संरचना (एचटीएमएल) से अलग है।

एंगुलरजेएस दृश्य / संरचना (एचटीएमएल) से व्यवहार को हटाने के लिए नियंत्रकों और निर्देशों का उपयोग करता है (जिनमें से प्रत्येक का अपना नियंत्रक हो सकता है, और / या संकलित और कार्यों को जोड़ना)। कोणीय में आपके आवेदन को अलग / व्यवस्थित करने में सहायता के लिए सेवाएं और फ़िल्टर भी हैं।

https://.com/a/14346528/215945 भी https://.com/a/14346528/215945

आवेदन डिजाइन

एक AngularJS आवेदन डिजाइन करने के लिए एक दृष्टिकोण:

  1. अपने मॉडल के बारे में सोचो। उन मॉडलों के लिए सेवाएं या अपनी खुद की जावास्क्रिप्ट ऑब्जेक्ट बनाएं।
  2. इस बारे में सोचें कि आप अपने मॉडल कैसे पेश करना चाहते हैं - आपके विचार। डायनामिक डाटाबेसिंग प्राप्त करने के लिए आवश्यक निर्देशों का उपयोग करके, प्रत्येक दृश्य के लिए HTML टेम्पलेट बनाएं।
  3. प्रत्येक दृश्य में नियंत्रक संलग्न करें (एनजी-व्यू और रूटिंग, या एनजी-कंट्रोलर का उपयोग करके)। नियंत्रक को केवल उस मॉडल डेटा को ढूंढें / प्राप्त करें जिसे दृश्य को अपना काम करने की आवश्यकता है। जितना संभव हो उतना पतला नियंत्रक बनाओ।

प्रोटोटाइप विरासत

जावास्क्रिप्ट प्रोटोटाइप विरासत कैसे काम करता है इस बारे में जानने के बिना आप jQuery के साथ बहुत कुछ कर सकते हैं। AngularJS अनुप्रयोगों को विकसित करते समय, यदि आप जावास्क्रिप्ट विरासत की अच्छी समझ रखते हैं तो आप कुछ सामान्य नुकसान से बचेंगे। अनुशंसित पढ़ने: AngularJS में स्कोप प्रोटोटाइप / प्रोटोटाइपिकल विरासत की बारीकियों क्या हैं?


कोणीय जेएस और jQuery:

AngularJs और JQuery JQLite कार्यक्षमता को छोड़कर प्रत्येक स्तर पर पूरी तरह से अलग हैं और आप इसे एंगुलरजेस कोर फीचर्स सीखने के बाद इसे देखेंगे (मैंने इसे नीचे समझाया है)।

AngularJs एक क्लाइंट साइड फ्रेमवर्क है जो स्वतंत्र क्लाइंट साइड एप्लिकेशन बनाने की पेशकश करता है। JQuery एक क्लाइंट साइड लाइब्रेरी है जो डोम के आसपास खेलती है।

AngularJs कूल सिद्धांत - यदि आप अपने यूआई पर कुछ बदलाव चाहते हैं तो मॉडल डेटा परिवर्तन परिप्रेक्ष्य से सोचें। अपना डेटा बदलें और यूआई खुद को फिर से प्रस्तुत करेगा। आपको हर बार डोम के आसपास खेलने की जरूरत नहीं है जब तक कि इसकी आवश्यकता नहीं होती है और इसे कोणीय निर्देशों के माध्यम से भी संभाला जाना चाहिए।

इस सवाल का जवाब देने के लिए, मैं अपने अनुभव को AngularJS के साथ पहले एंटरप्राइज़ एप्लिकेशन पर साझा करना चाहता हूं। ये सबसे शानदार विशेषताएं हैं जो एंगुलर प्रदान करते हैं जहां हम अपनी jQuery मानसिकता को बदलना शुरू करते हैं और हमें कोणीय को ढांचे की तरह मिलता है, न कि लाइब्रेरी।

दो-तरफा डेटा बाइंडिंग अद्भुत है: मेरे पास सभी कार्यक्षमता अद्यतन, DELTE, INSERT के साथ ग्रिड था। मेरे पास एक डेटा ऑब्जेक्ट है जो ग्रिड के मॉडल को एनजी-दोहराने का उपयोग करके बांधता है। आपको केवल हटाने और डालने के लिए सरल जावास्क्रिप्ट कोड की एक पंक्ति लिखनी होगी और यही वह है। ग्रिड स्वचालित रूप से अपडेट होने के रूप में ग्रिड स्वचालित रूप से अद्यतन होता है। अद्यतन कार्यक्षमता वास्तविक समय है, इसके लिए कोई कोड नहीं है। तुम्हे बड़ा अच्छा लग रहा है!!!

पुन: प्रयोज्य निर्देश सुपर हैं: एक ही स्थान पर निर्देश लिखें और पूरे एप्लिकेशन में इसका उपयोग करें। हे भगवान!!! मैंने पेजिंग, रेगेक्स, सत्यापन आदि के लिए इन निर्देशों का उपयोग किया। यह वास्तव में अच्छा है!

रूटिंग मजबूत है: यह आपके कार्यान्वयन पर निर्भर है कि आप इसका उपयोग कैसे करना चाहते हैं, लेकिन HTML और नियंत्रक (जावास्क्रिप्ट) निर्दिष्ट करने के अनुरोध को रूट करने के लिए कोड की बहुत कम पंक्तियों की आवश्यकता होती है।

नियंत्रक बहुत अच्छे हैं: नियंत्रक अपने स्वयं के एचटीएमएल का ख्याल रखते हैं, लेकिन यह अलगाव सामान्य कार्यक्षमता के लिए अच्छी तरह से काम करता है। यदि आप मास्टर एचटीएमएल पर एक बटन के क्लिक पर एक ही फ़ंक्शन को कॉल करना चाहते हैं, तो बस प्रत्येक नियंत्रक में एक ही फ़ंक्शन नाम लिखें और व्यक्तिगत कोड लिखें।

प्लगइन्स: आपके ऐप में ओवरले दिखाने जैसी कई अन्य समान विशेषताएं हैं। आपको इसके लिए कोड लिखने की आवश्यकता नहीं है, बस एक ओवरले प्लगइन का उपयोग करें जो wc-overlay के रूप में उपलब्ध है, और यह स्वचालित रूप से सभी XMLHttpRequest (XHR) अनुरोधों का ख्याल रखेगा ।

RESTful आर्किटेक्चर के लिए आदर्श : एक पूर्ण रूपरेखा होने के नाते AngularJS को एक शानदार वास्तुकला के साथ काम करने के लिए महान बनाता है। रीस्ट सीआरयूडी एपीआई कॉल करने के लिए बहुत आसान है और

सेवाएं : सेवाओं का उपयोग करके सामान्य कोड लिखें और नियंत्रकों में कम कोड लिखें। नियंत्रकों के बीच सामान्य कार्यक्षमताओं को साझा करने के लिए सेवा का उपयोग किया जा सकता है।

विस्तारशीलता : कोणीय ने कोणीय निर्देशों का उपयोग करके HTML निर्देशों को बढ़ाया है। एचटीएमएल के अंदर अभिव्यक्ति लिखें और रनटाइम पर उनका मूल्यांकन करें। अपने स्वयं के निर्देश और सेवाएं बनाएं और बिना किसी अतिरिक्त प्रयास के किसी अन्य परियोजना में उनका उपयोग करें।


jQuery एक डोम हेरफेर पुस्तकालय है।

AngularJS एक एमवी * ढांचा है।

वास्तव में, AngularJS कुछ जावास्क्रिप्ट एमवी * ढांचे में से एक है (कई जावास्क्रिप्ट एमवीसी उपकरण अभी भी श्रेणी पुस्तकालय के अंतर्गत आते हैं)।

एक ढांचा होने के नाते, यह आपके कोड को होस्ट करता है और कॉल करने के लिए और कब के बारे में निर्णय लेने का स्वामित्व लेता है!

AngularJS में स्वयं के भीतर एक jQuery-लाइट संस्करण शामिल है। तो कुछ बुनियादी डोम चयन / हेरफेर के लिए, आपको वास्तव में jQuery लाइब्रेरी को शामिल करने की आवश्यकता नहीं है (यह नेटवर्क पर चलाने के लिए कई बाइट्स बचाता है।)

एंगुलरजेएस में डीओएम मैनिपुलेशन और पुन: प्रयोज्य यूआई घटकों को डिजाइन करने के लिए "निर्देश" की अवधारणा है, इसलिए जब भी आपको डोम मैनिपुलेशन से संबंधित सामान करने की आवश्यकता महसूस होती है तो आपको इसका उपयोग करना चाहिए (निर्देश केवल वही स्थान हैं जहां आपको कोणीयजेएस का उपयोग करते समय jQuery कोड लिखना चाहिए)।

AngularJS में कुछ सीखने की अवस्था शामिल है (jQuery से अधिक :-)।

-> jQuery पृष्ठभूमि से आने वाले किसी भी डेवलपर के लिए, मेरी पहली सलाह "एंगुलरजेएस जैसे समृद्ध ढांचे पर कूदने से पहले जावास्क्रिप्ट को प्रथम श्रेणी की भाषा के रूप में सीखना होगा!" मैंने उपरोक्त तथ्य को कठिन तरीके से सीखा।

सौभाग्य।


jQuery: आप डोम तत्वों के लिए 'QUERYING DOM ' के बारे में बहुत कुछ सोचते हैं और कुछ कर रहे हैं।

AngularJS: मॉडल सच है, और आप हमेशा उस एंगल से सोचते हैं।

उदाहरण के लिए, जब आप सर्वर से डेटा प्राप्त करते हैं जिसे आप डीओएम में कुछ प्रारूप में प्रदर्शित करना चाहते हैं, तो jQuery में, आपको '1' की आवश्यकता होती है। FIND 'जहां डोम में आप यह डेटा रखना चाहते हैं,' 2। अद्यतन / एक नए नोड बनाने या सिर्फ अपनी स्थापना करके जोड़ें 'यह वहाँ innerHTML । फिर जब आप इस दृश्य को अपडेट करना चाहते हैं, तो आप '3'। 'स्थान' और '4 खोजें। अद्यतन करें'। सर्वर से डेटा प्राप्त करने और स्वरूपण के समान संदर्भ में किए गए सभी को ढूंढने और अपडेट करने का यह चक्र AngularJS में चला गया है।

AngularJS के साथ आपके पास आपका मॉडल (जावास्क्रिप्ट ऑब्जेक्ट्स जिसका आप पहले से उपयोग कर रहे हैं) और मॉडल का मान आपको मॉडल (स्पष्ट रूप से) और दृश्य के बारे में बताता है, और मॉडल पर एक ऑपरेशन स्वचालित रूप से दृश्य को प्रसारित करता है, इसलिए आप ' इसके बारे में सोचना नहीं है। आप स्वयं को AngularJS में पाएंगे जो अब डोम में चीजें नहीं ढूंढ रहा है।

किसी अन्य तरीके से कहें, jQuery में, आप CSS चयनकर्ताओं के बारे में सोचना, जरूरत है कि है, जहां है divया tdकि, एक वर्ग या विशेषता, आदि है, ताकि मैं अपने HTML या रंग या मूल्य प्राप्त कर सकते हैं, लेकिन AngularJS में, आप खुद को इस तरह सोचेंगे: मैं किस मॉडल से निपट रहा हूं, मैं मॉडल के मूल्य को सत्य पर सेट करूंगा। आप इस बात को परेशान नहीं कर रहे हैं कि इस मूल्य को दर्शाने वाला दृश्य एक चेक बॉक्स है या tdतत्व में रहता है (विवरण जिन्हें आप अक्सर jQuery में सोचने के लिए आवश्यक होते हैं)।

और AngularJS में डोम हेरफेर के साथ, आप अपने आप को निर्देश और फ़िल्टर जोड़ते हैं, जिन्हें आप वैध HTML एक्सटेंशन के रूप में सोच सकते हैं।

AngularJS में एक और चीज आपको अनुभव होगी: jQuery में आप jQuery कार्यों को बहुत कुछ कहते हैं, AngularJS में, AngularJS आपके कार्यों को कॉल करेगा, इसलिए AngularJS आपको बताएगा कि चीजें कैसे करें, लेकिन लाभ इसके लायक हैं, इसलिए AngularJS सीखना आम तौर पर एंगुलरजेएस चाहता है या जिस तरह से AngularJS की आवश्यकता है उसे सीखने का मतलब है कि आप अपने कार्यों को प्रस्तुत करते हैं और यह तदनुसार इसे कॉल करेगा। यह उन चीजों में से एक है जो एंगुलरजेएस को पुस्तकालय के बजाय एक ढांचा बनाता है।


असल में, यदि आप AngularJS का उपयोग कर रहे हैं, तो आपको अब jQuery की आवश्यकता नहीं है। AngularJS में बाध्यकारी और निर्देश है, जो कि आप jQuery के साथ कर सकते हैं ज्यादातर चीजों के लिए एक बहुत अच्छा "प्रतिस्थापन" है।

मैं आमतौर पर AngularJS और Cordova का उपयोग कर मोबाइल एप्लिकेशन विकसित करता हूं । JQuery की केवल एक चीज मुझे चयनकर्ता है।

गुगल करके, मैं देखता हूं कि वहाँ एक स्टैंडअलोन jQuery चयनकर्ता मॉड्यूल है। यह झींगा है।

और मैंने एक छोटा कोड स्निपेट बनाने का फैसला किया जो मुझे jQuery चयनकर्ता (Sizzle का उपयोग करके) के साथ AngularJS का उपयोग कर वेबसाइट शुरू करने में मदद करता है।

मैंने अपना कोड यहां साझा किया: https://github.com/huytd/Sizzular


पॉडकास्ट जावास्क्रिप्ट जैबर को सुनें : एपिसोड # 32 जिसमें एंगुलरजेएस के मूल निर्माता शामिल हैं: मिस्को हेवरी और इगोर मिनार। वे अन्य जावास्क्रिप्ट पृष्ठभूमि, विशेष रूप से jQuery से AngularJS पर आने के बारे में बहुत कुछ बोलते हैं।

पॉडकास्ट में किए गए अंकों में से एक ने आपके प्रश्न के सम्मान के साथ कई चीजें मेरे लिए क्लिक की हैं:

मिस्को : [...] अंगुलर में बहुत मुश्किल से हमने जो चीजों के बारे में सोचा था, उनमें से एक है, हम कितने बचने की टोपी प्रदान करते हैं ताकि आप बाहर निकल सकें और मूल रूप से इसका एक तरीका पता लगा सकें। तो हमारे लिए, जवाब यह है कि "निर्देश" कहा जाता है। और निर्देशों के साथ, आप अनिवार्य रूप से एक नियमित छोटी jQuery जावास्क्रिप्ट बन जाते हैं, आप जो चाहें कर सकते हैं।

IGOR : तो संकलक के निर्देश के रूप में निर्देश के बारे में सोचें जो इसे बताता है जब भी आप इस निश्चित तत्व या टेम्पलेट में इस सीएसएस में आते हैं, और आप इस तरह के कोड को रखते हैं और वह कोड तत्व के प्रभारी और उस तत्व के नीचे सबकुछ है डोम पेड़ में।

पूरे एपिसोड की एक प्रतिलिपि ऊपर दिए गए लिंक पर उपलब्ध है।

तो, सीधे अपने प्रश्न का उत्तर देने के लिए: AngularJS - हर राय है और एक असली एमवी * ढांचा है। हालांकि, आप अभी भी सभी वास्तव में अच्छी चीजें कर सकते हैं जिन्हें आप जानते हैं और निर्देशों के अंदर jQuery के साथ प्यार करते हैं। यह कोई फर्क नहीं पड़ता कि "मैं jQuery में क्या करता हूं?" जितना अधिक है, "मैं एंजुलरजेएस को उन सभी चीजों के साथ कैसे पूरक करूं जो मैं jQuery में करता था?"

यह वास्तव में दिमाग के दो बहुत अलग राज्य हैं।


मुझे यह प्रश्न दिलचस्प लगता है, क्योंकि जावास्क्रिप्ट प्रोग्रामिंग के लिए मेरा पहला गंभीर जोखिम Node.js और AngularJS था। मैंने jQuery कभी नहीं सीखा, और मुझे लगता है कि यह एक अच्छी बात है, क्योंकि मुझे कुछ भी बेकार नहीं करना है। असल में, मैं सक्रिय रूप से अपनी समस्याओं के लिए jQuery समाधान से बचता हूं, और इसके बजाय, उन्हें हल करने के लिए पूरी तरह से "एंगुलरजेएस रास्ता" ढूंढें। तो, मुझे लगता है कि इस सवाल का मेरा जवाब अनिवार्य रूप से उबाल जाएगा, "किसी ऐसे व्यक्ति की तरह सोचें जो कभी भी jQuery नहीं सीखा" और सीधे jQuery को शामिल करने के लिए किसी भी प्रलोभन से बचें (जाहिर है अंगुलरजेएस दृश्यों के पीछे कुछ हद तक इसका उपयोग करता है)।





angularjs