AngularJS
AngularJS getchas और जाल

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
खोज…


दो-तरफ़ा डेटा बाइंडिंग काम करना बंद कर देती है

एक को ध्यान में रखना चाहिए कि:

  1. कोणीय का डेटा बाइंडिंग जावास्क्रिप्ट के प्रोटोटाइप विरासत पर निर्भर करता है, इस प्रकार यह परिवर्तनशील छायांकन के अधीन है।
  2. एक बच्चा गुंजाइश आम तौर पर प्रोटोटाइप अपने मूल दायरे से विरासत में मिलती है। इस नियम का एक अपवाद एक निर्देश है जिसमें अलग-अलग गुंजाइश है क्योंकि यह प्रोटोटाइपिक रूप से विरासत में नहीं है।
  3. कुछ निर्देश हैं जो एक नया चाइल्ड स्कोप बनाते हैं: ng-repeat , ng-switch , ng-view , ng-if ng-controller , ng-controller , ng-include आदि।

इसका मतलब यह है कि जब आप किसी डेटा को दो-तरफ़ा बाँधने का प्रयास करते हैं, तो यह एक आदिम के लिए होता है, जो कि चाइल्ड स्कोप (या इसके विपरीत) के अंदर होता है, चीजें उम्मीद के मुताबिक काम नहीं कर सकती हैं। यहाँ एक उदाहरण है कि कितनी आसानी से " कोणीय " को "तोड़" दिया जाता है ।

इस समस्या को इन चरणों के बाद आसानी से टाला जा सकता है:

  1. लीजिये "।" जब भी आप कुछ डेटा बांधते हैं तो अपने HTML टेम्पलेट के अंदर
  2. controllerAs सिंटैक्स का उपयोग करें क्योंकि यह "डॉटेड" ऑब्जेक्ट के लिए बाइंडिंग के उपयोग को बढ़ावा देता है
  3. $ पेरेंट का उपयोग चाइल्ड स्कोप के बजाय पैरेंट scope वैरिएबल को एक्सेस करने के लिए किया जा सकता है। ng-if अंदर की तरह ng-if हम ng-model="$parent.foo" उपयोग कर सकते हैं ng-model="$parent.foo" ।।

उपरोक्त के लिए एक विकल्प ngModel को एक गेटर / सेटर फ़ंक्शन से बांधना है जो मॉडल के कैश्ड संस्करण को अपडेट करेगा जब उसे तर्कों के साथ बुलाया जाएगा, या बिना तर्कों के कॉल किए जाने पर उसे वापस किया जाएगा। एक गेटटर / सेटर फ़ंक्शन का उपयोग करने के लिए, आपको ng-model-options="{ getterSetter: true }" को ngModal विशेषता वाले तत्व में ngModal की ngModal है, और यदि आप अपने मूल्य को अभिव्यक्ति में प्रदर्शित करना चाहते हैं तो ngModal फ़ंक्शन को कॉल करें। ( काम करने का उदाहरण )।

उदाहरण

राय: 

<div ng-app="myApp" ng-controller="MainCtrl">
    <input type="text" ng-model="foo" ng-model-options="{ getterSetter: true }">
    <div ng-if="truthyValue">
        <!-- I'm a child scope (inside ng-if), but i'm synced with changes from the outside scope -->
        <input type="text" ng-model="foo">
    </div>
    <div>$scope.foo: {{ foo() }}</div>
</div>

नियंत्रक: 

angular.module('myApp', []).controller('MainCtrl', ['$scope', function($scope) {
    $scope.truthyValue = true;
      
    var _foo = 'hello'; // this will be used to cache/represent the value of the 'foo' model 
      
    $scope.foo = function(val) {
        // the function return the the internal '_foo' varibale when called with zero arguments,
        // and update the internal `_foo` when called with an argument
        return arguments.length ? (_foo = val) : _foo;
    };
}]);

सर्वश्रेष्ठ अभ्यास : गेटर्स को तेजी से रखना सबसे अच्छा है क्योंकि कोणीय आपके कोड ( संदर्भ ) के अन्य भागों की तुलना में उन्हें अधिक बार कॉल करने की संभावना है।

HTML5Mode का उपयोग करते समय की जाने वाली बातें

html5Mode([mode]) का उपयोग करते html5Mode([mode]) यह आवश्यक है कि:

  1. आप अपने index.html के प्रमुख में <base href=""> साथ आधार URL को निर्दिष्ट करते हैं।

  2. यह महत्वपूर्ण है कि base टैग यूआरएल अनुरोधों के साथ किसी भी टैग से पहले आता है। अन्यथा, इस त्रुटि के परिणामस्वरूप हो सकता है - "Resource interpreted as stylesheet but transferred with MIME type text/html" । उदाहरण के लिए: 

    <head>
    <meta charset="utf-8">
    <title>Job Seeker</title>

    <base href="/">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/styles/main.css">
</head>

  3. यदि आप base टैग निर्दिष्ट नहीं करना चाहते हैं, तो $locationProvider को कॉन्फ़िगर करें। किसी आवश्यक वस्तु के साथ परिभाषा ऑब्जेक्ट पास करके base टैग की आवश्यकता नहीं होती है: इस तरह से $locationProvider.html5Mode() requireBase:false : 

    $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

  4. HTML5 URL के प्रत्यक्ष लोडिंग का समर्थन करने के लिए, आपको सर्वर-साइड URL पुनर्लेखन की आवश्यकता होगी। AngularJS / डेवलपर गाइड / $ स्थान का उपयोग करने से

    इस मोड का उपयोग करने के लिए सर्वर साइड पर URL पुनर्लेखन की आवश्यकता होती है, मूल रूप से आपको अपने आवेदन के प्रवेश बिंदु (जैसे index.html ) के लिए अपने सभी लिंक को फिर से लिखना होगा। इस मामले के लिए एक <base> टैग की आवश्यकता भी महत्वपूर्ण है, क्योंकि यह एंगुलर को यूआरएल के उस हिस्से के बीच अंतर करने की अनुमति देता है जो कि आवेदन का आधार है और जिस मार्ग को एप्लिकेशन द्वारा नियंत्रित किया जाना चाहिए।

    विभिन्न HTTP सर्वर कार्यान्वयन के लिए अनुरोधों को फिर से लिखने के लिए एक उत्कृष्ट संसाधन यूआई-राउटर FAQ में पाया जा सकता है - How to: अपने सर्वर को HTML5Mode के साथ काम करने के लिए कॉन्फ़िगर करें । उदाहरण के लिए, अपाचे 

     RewriteEngine on

 # Don't rewrite files or directories
 RewriteCond %{REQUEST_FILENAME} -f [OR]
 RewriteCond %{REQUEST_FILENAME} -d
 RewriteRule ^ - [L]

 # Rewrite everything else to index.html to allow html5 state links
 RewriteRule ^ index.html [L]

    nginx 

     server {
     server_name my-app;

     root /path/to/app;

     location / {
         try_files $uri $uri/ /index.html;
     }
 }

    एक्सप्रेस 

     var express = require('express');
 var app = express();

 app.use('/js', express.static(__dirname + '/js'));
 app.use('/dist', express.static(__dirname + '/../dist'));
 app.use('/css', express.static(__dirname + '/css'));
 app.use('/partials', express.static(__dirname + '/partials'));

 app.all('/*', function(req, res, next) {
     // Just send the index.html for other files to support HTML5Mode
     res.sendFile('index.html', { root: __dirname });
 });

 app.listen(3006); //the port you want to use

7 एंगुलरजेएस के घातक पाप

नीचे कुछ गलतियों की सूची दी गई है जो डेवलपर अक्सर AngularJS फंक्शंस के उपयोग के दौरान करते हैं, कुछ ने उन्हें सबक और समाधान सीखा।

1. नियंत्रक के माध्यम से हेरफेर डोम

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

link: function($scope, element, attrs) {
    //The best place to manipulate DOM
}

आप कई तत्वों के माध्यम से फंक्शन को जोड़ने के लिए DOM एलिमेंट्स को एक्सेस कर सकते हैं, जैसे element पैरामीटर, angular.element() मेथड या प्योर जावास्क्रिप्ट।

2. ट्रांसकॉक्शन में डेटा बाइंडिंग

AngularJS अपने दो-तरफ़ा डेटा बाइंडिंग के साथ प्रसिद्ध है। हालाँकि कभी-कभी आपका सामना हो सकता है कि आपका डेटा केवल एक ही तरह से निर्देशों के अंदर बंधा हो। वहाँ रुकें, AngularJS गलत नहीं है, लेकिन शायद आप। निर्देश एक छोटे से खतरनाक स्थान हैं क्योंकि बच्चे के स्कोप और अलग-थलग स्कोप शामिल हैं। मान लें कि आपके पास एक हस्तांतरण के साथ निम्नलिखित निर्देश हैं 

<my-dir>
    <my-transclusion>
    </my-transclusion>
</my-dir>

और मेरे स्थानांतरण के अंदर, आपके पास कुछ तत्व हैं जो बाहरी दायरे में डेटा के लिए बाध्य हैं। 

<my-dir>
    <my-transclusion>
        <input ng-model="name">
    </my-transclusion>
</my-dir>

उपरोक्त कोड सही तरीके से काम नहीं करेगा। यहां, ट्रांसकॉक्शन एक चाइल्ड स्कोप बनाता है और आप नाम वेरिएबल को प्राप्त कर सकते हैं, ठीक है, लेकिन इस वेरिएबल में आप जो भी बदलाव करेंगे वह वहीं रहेगा। तो, आप इस चर को वास्तव में $ parent.name के रूप में ले सकते हैं । हालाँकि, यह उपयोग सबसे अच्छा अभ्यास नहीं हो सकता है। एक बेहतर दृष्टिकोण एक वस्तु के अंदर चर को लपेटना होगा। उदाहरण के लिए, नियंत्रक में आप बना सकते हैं: 

$scope.data = {
    name: 'someName'
}

फिर ट्रांसकॉर्पोरेशन में, आप इस चर को 'डेटा' ऑब्जेक्ट के माध्यम से एक्सेस कर सकते हैं और देख सकते हैं कि दो-तरफ़ा बाइंडिंग पूरी तरह से काम करती है! 

<input ng-model="data.name">

न केवल transclusions में, बल्कि पूरे ऐप में, बिंदीदार नोटेशन का उपयोग करना एक अच्छा विचार है।

3. एक साथ कई निर्देश

यह वास्तव में एक ही तत्व के भीतर एक साथ दो निर्देशों का उपयोग करने के लिए कानूनी है, जब तक आप नियम का पालन करते हैं: दो पृथक स्कोप एक ही तत्व पर मौजूद नहीं हो सकते। सामान्यतया, एक नया कस्टम निर्देश बनाते समय, आप आसान पैरामीटर पासिंग के लिए एक अलग गुंजाइश आवंटित करते हैं। यह मानते हुए कि myDirA और myDirB के निर्देशों में आइसोलेटेड स्कोप्स हैं और myDirC में निम्नलिखित तत्व मान्य नहीं होंगे: 

<input my-dir-a my-dirc>

जबकि निम्न तत्व कंसोल त्रुटि का कारण होगा: 

<input my-dir-a my-dir-b>

इसलिए, निर्देशों को बुद्धिमानी से उपयोग किया जाना चाहिए, स्कॉप्स को ध्यान में रखते हुए।

4. $ उत्सर्जन का दुरुपयोग

$ emit, $ प्रसारण और $ पर, ये एक प्रेषक-रिसीवर सिद्धांत में काम करते हैं। दूसरों के शब्दों में, वे नियंत्रकों के बीच संचार का एक साधन हैं। उदाहरण के लिए, निम्नलिखित लाइन नियंत्रक ए से 'someEvent' का उत्सर्जन करती है, संबंधित नियंत्रक बी द्वारा पकड़ा जाना है। 

$scope.$emit('someEvent', args);

और निम्नलिखित पंक्ति 'someEvent' को पकड़ती है 

$scope.$on('someEvent', function(){});

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

5. $ गुंजाइश का दुरुपयोग। $ घड़ी

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

$scope.$watch('myCtrl.myVariable', function(newVal) {
    this.myVariable++;
});

इसलिए उपरोक्त फ़ंक्शन में, सुनिश्चित करें कि आपके पास myVariable और newVal पर कोई संचालन नहीं है।

6. विचारों को बांधने के तरीके

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

<input ng-disabled="myCtrl.isDisabled()" ng-model="myCtrl.name">

यहाँ आप विधि के माध्यम से दृश्य की अक्षम स्थिति की जाँच कर सकते हैं। नियंत्रक myCtrl में, आपके पास: 

vm.isDisabled = function(){
    if(someCondition)
        return true;
    else
        return false;
}

सिद्धांत रूप में, यह सही लग सकता है लेकिन तकनीकी रूप से यह एक अधिभार का कारण होगा, क्योंकि विधि अनगिनत बार चलेगी। इसे हल करने के लिए, आपको एक चर बांधना चाहिए। आपके नियंत्रक में, निम्न चर मौजूद होना चाहिए: 

vm.isDisabled

आप नियंत्रक के सक्रियण में इस चर को फिर से शुरू कर सकते हैं 

if(someCondition)
    vm.isDisabled = true
else
    vm.isDisabled = false

यदि स्थिति स्थिर नहीं है, तो आप इसे किसी अन्य ईवेंट में बाँध सकते हैं। तब आपको इस चर को देखने के लिए बांधना चाहिए: 

<input ng-disabled="myCtrl.isDisabled" ng-model="myCtrl.name">

अब, दृश्य की सभी विशेषताओं के पास वही है जो वे अपेक्षा करते हैं और विधियाँ केवल जब भी आवश्यक हों, चलेंगी।

7. कोणीय की कार्यक्षमता का उपयोग नहीं करना

AngularJS अपनी कुछ कार्यप्रणालियों के साथ न केवल आपके कोड को सरल बनाता है बल्कि इसे और अधिक कुशल बनाता है। इनमें से कुछ विशेषताएं नीचे सूचीबद्ध हैं:

  1. छोरों के लिए angular.forEach (सावधानी, आप "ब्रेक नहीं कर सकते हैं" यह, आप केवल शरीर में जाने से रोक सकते हैं, इसलिए यहां प्रदर्शन पर विचार करें।)
  2. DOM चयनकर्ताओं के लिए कोणीय
  3. angular.copy : इसका उपयोग तब करें जब आपको मुख्य ऑब्जेक्ट को संशोधित नहीं करना चाहिए
  4. फॉर्म सत्यापन पहले से ही भयानक हैं। गंदे, प्राचीन, छुआ हुआ, वैध, आवश्यक और इतने पर का उपयोग करें।
  5. Chrome डीबगर के अलावा, मोबाइल विकास के लिए भी दूरस्थ डीबगिंग का उपयोग करें।
  6. और सुनिश्चित करें कि आप बतरंग का उपयोग करें। यह एक निशुल्क क्रोम एक्सटेंशन है जहां आप आसानी से स्कोप का निरीक्षण कर सकते हैं
    7. ।


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow