सवाल अगर मेरे पास jQuery पृष्ठभूमि है तो "AngularJS में सोच रहा है"? [बन्द है]


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

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

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


4525
2018-02-21 04:09


मूल


"एएसपी.नेट एमवीसी" या "आरओआर" से परिचित लोगों के लिए - केवल "क्लाइंट-साइड एमवीसी" के रूप में कोणीय के बारे में सोचें और यह है। - Serge Shultz


जवाब:


1. अपने पेज को डिज़ाइन न करें, और उसके बाद इसे बदलें डोम जोड़ - तोड़

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

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

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

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

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

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

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

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

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) और इसलिए कभी-कभी डोम मैनिपुलेशन को तुरंत करते हैं और फिर मूल रूप से किया जाता है। लेकिन अगर कोई निर्देश "विजेट" जैसा है और इसमें एक टेम्पलेट है, तो इसे चाहिए भी चिंताओं को अलग करने का सम्मान करें। वह है, टेम्पलेट बहुत लिंक और नियंत्रक कार्यों में इसके कार्यान्वयन से काफी हद तक स्वतंत्र होना चाहिए।

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 तत्वों को लपेटने की आवश्यकता नहीं है $ - द 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 में कैसे हल करें, इससे पहले कि आप पहुंच जाएं $, AngularJS को सीमित करने के भीतर इसे कैसे करें इसके बारे में सोचने का प्रयास करें। अगर आपको नहीं पता, पूछो! 20 में से 1 9 बार, इसे करने का सबसे अच्छा तरीका jQuery की आवश्यकता नहीं है और इसे आपके लिए अधिक काम में jQuery परिणामों के साथ हल करने का प्रयास करने की आवश्यकता नहीं है।


7187
2018-02-21 21:26



मुझे लगता है कि एक कोणीय ऐप के भीतर JQuery के साथ काम करना शामिल है जो सभी मौजूदा JQuery प्लगइन्स लिखे गए हैं क्योंकि महत्वपूर्ण उपयोग-मामले है। मैं एक शुद्ध कोणीय ऐप रखने के लिए jQuery में FancyBox को फिर से लिख नहीं रहा हूं। - taudep
@taudep मुझे नहीं लगता कि हम जितना सोचते हैं उससे असहमत हैं। अधिकांश jQuery प्लगइन्स को AngularJS में सस्ते में लिखा जा सकता है, और उन मामलों में हमें ऐसा करना चाहिए। कुछ जटिल के लिए जिसके लिए समकक्ष नहीं है, उसके लिए इसके लिए जाएं। धारा 2 से उद्धरण के लिए: 'नीचे की रेखा यह है: समाधान करते समय, पहले "AngularJS में सोचें"; यदि आप समाधान के बारे में नहीं सोच सकते हैं, तो समुदाय से पूछें; अगर उसके बाद कोई आसान समाधान नहीं है, तो jQuery के लिए पहुंचने के लिए स्वतंत्र महसूस करें। लेकिन jQuery को एक क्रच बनने दें या आप कभी भी AngularJS को मास्टर नहीं करेंगे। ' [महत्व दिया] - Josh David Miller
एक चीनी इस महान उत्तर में अनुवाद, आशा की उम्मीद है। hanzheng.github.io/tech/angularjs/2013/10/28/... - Han Zheng
@ बेनो उसका मतलब है "नो डोम मैनिपुलेशन" का अर्थ यह है कि निर्देश में आपका कोड सीधे डोम मैनिपुलेशन नहीं कर रहा है। वह कोड डोम के बारे में कुछ भी नहीं जानता है, यह सिर्फ आपके मॉडल में जेएस चर को संशोधित कर रहा है। हां, अंत परिणाम यह है कि डीओएम संशोधित हो जाता है, लेकिन ऐसा इसलिए है क्योंकि हमारे द्वारा लिखे गए कोड के बाहर, बाइंडिंग हैं जो हमारे चर बदलते हैं, लेकिन निर्देश के अंदर हम इसके बारे में कुछ भी नहीं जानते हैं, डीओएम हेरफेर के बीच एक साफ अलगाव बनाते हैं और व्यापार का तर्क। अपने jQuery उदाहरण में आप सीधे इस स्रोत को "इस पाठ में संलग्न करें" कहकर डीओएम बदल रहे हैं - wired_in
@trusktr अगर कोई एंजुलरजेएस एप्लिकेशन में jQuery का उपयोग करके कभी भी इनपुट तत्व का मान सेट करता है, तो वह एक क्षतिकर त्रुटि। एकमात्र प्रकार का अपवाद जिसे मैं सोच सकता हूं वह एक मौजूदा jQuery प्लगइन है जो बंदरगाह के लिए बहुत मुश्किल है जो इनपुट को स्वचालित रूप से बदलता है, जिस स्थिति में कॉलबैक में घुसपैठ करना या घड़ी को सेट करना बिल्कुल भी आवश्यक है, वैसे भी एप्लिकेशन के साथ इनलाइन परिवर्तन लाने के लिए बिल्कुल जरूरी है। - Josh David Miller


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

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

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

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

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

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

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

यह भी देखें https://stackoverflow.com/a/14346528/215945

आवेदन डिजाइन

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

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

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

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


408
2018-02-21 04:09



क्या आप pls कर सकते हैं समझाओ कि एक डोम तत्व एक दृश्य से अलग कैसे है? - rajkamal
@rajkamal, एक डीओएम तत्व (स्पष्ट रूप से) एक तत्व है, और jQuery में जो अक्सर हम चुनते हैं / लक्ष्य / हेरफेर करते हैं। एक कोणीय दृश्य संबंधित डीओएम तत्वों का एक संग्रह / टेम्पलेट है: मेनू दृश्य, शीर्षलेख दृश्य, पाद लेख दृश्य, दायां-साइडबार दृश्य, प्रोफ़ाइल दृश्य, शायद एकाधिक मुख्य सामग्री दृश्य (एनजी-व्यू के माध्यम से स्विच करने योग्य)। असल में, आप अपने पृष्ठ को अलग-अलग विचारों में तोड़ना चाहते हैं। प्रत्येक दृश्य का अपना संबंधित नियंत्रक होता है। प्रत्येक दृश्य आपके मॉडल का हिस्सा प्रोजेक्ट करता है। - Mark Rajcok
jQuery है नहीं अनिवार्य। on तथा when एक jQuery संग्रह ऑब्जेक्ट के सदस्यों पर काम कर रहे उच्च-ऑर्डर-फ़ंक्शंस हैं। - Jack Viers
तो कॉलबैक में किस तरह का कोड निष्पादित किया जाता है on? अनिवार्य। - cwharris
यह अनिवार्य बनाम घोषणात्मक वास्तव में केवल अमूर्तताओं का सवाल है। अंत में, सभी घोषणात्मक कोड (क्या करना है) ढांचे या संकलक / दुभाषिया द्वारा कम अवशोषण स्तर पर डेवलपर द्वारा अनिवार्य रूप से (इसे कैसे किया जाए) लागू किया जाता है। यह कहने के लिए कि "jQuery अनिवार्य है" सामान्य रूप से एक विषम बयान है, विशेष रूप से यह मानते हुए कि यह वास्तव में "मैनुअल" डोम-मैनिपुलेशन के संबंध में एक और अधिक घोषणात्मक API प्रदान करता है। - Alex


कोणीय जेएस बनाम jQuery

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

यह सामान्य है, आपको धक्का देना चाहिए। कोणीय इसके लायक है।

बड़ा अंतर (टीएलडीआर)

jQuery आपको डोम के मनमानी बिट्स चुनने और उनके लिए विज्ञापन-परिवर्तन करने के लिए टूलकिट देता है। आप टुकड़े से टुकड़े को पसंद करते हुए बहुत कुछ कर सकते हैं।

इसके बजाय AngularJS आपको एक देता है संकलक

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

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

निर्देशक बदले में अतिरिक्त कोणीय घटकों जैसे कि नियंत्रक, सेवाएं इत्यादि में खींच सकते हैं। कंपाइलर के नीचे क्या आता है, पूरी तरह से गठित वेब एप्लिकेशन है, वायर्ड अप और जाने के लिए तैयार है।

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

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

चलो नीची किरकिरा करने के लिए नीचे आ जाओ।

सबसे पहले, कोणीय jQuery को प्रतिस्थापित नहीं करता है

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

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

यदि आप jQuery का उपयोग करते हैं, तो आपको इसे जगह पर छिड़कना नहीं चाहिए। AngularJS में डीओएम हेरफेर के लिए सही जगह निर्देश में है। बाद में इन पर अधिक।

चयनकर्ता बनाम घोषणात्मक टेम्पलेट्स के साथ अविभाज्य जावास्क्रिप्ट

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

जावास्क्रिप्ट नियंत्रण में है। एचटीएमएल का एक पूरी तरह से स्वतंत्र अस्तित्व है। आपका एचटीएमए