angularjs directive with our first angularjs example
पहले कोणीयजेएस उदाहरण के साथ कोणीयजेएस निर्देश:
हमारे पास AngularJS का संक्षिप्त परिचय हमारे पिछले ट्यूटोरियल में। यह ट्यूटोरियल आपको उन महत्वपूर्ण तथ्यों की व्याख्या करेगा, जिन्हें आपको AngularJS के बारे में जानना होगा।
AngularJS जावास्क्रिप्ट पर आधारित एक ओपन-सोर्स वेब एप्लिकेशन फ्रेमवर्क है।
इसका रखरखाव Google Corporation और एक बड़े समुदाय द्वारा किया जाता है। AngularJS एकल पृष्ठ अनुप्रयोगों को तैयार करने के लिए आने वाली विभिन्न कमियों का जवाब है।
हमारे माध्यम से पढ़ें संपूर्ण एंगुलरजेएस श्रृंखला AngularJS अवधारणा पर गहराई से ज्ञान के लिए।
सबसे लोकप्रिय बड़े डेटा विश्लेषिकी उपकरण
AngularJS एप्लिकेशन फ्रेमवर्क एक टेम्पलेट के रूप में कार्य करता है और वेब एप्लिकेशन के विकास के दौरान आने वाली चुनौतियों को कम कर सकता है।
आप क्या सीखेंगे:
- AngularJS का अवलोकन
- AngularJS का उपयोग क्यों करें?
- AngularJS का उपयोग कैसे करें?
- एंगुलरजेएस के निर्देश
- AngularJS उदाहरण
- निष्कर्ष
- अनुशंसित पाठ
AngularJS का अवलोकन
20 द्वारा Google द्वारा AngularJS जारी किया गया थावेंअक्टूबर 2010, और आज यह विभिन्न एकल-पृष्ठ इंटरफ़ेस अनुप्रयोगों के लिए एक महत्वपूर्ण ढांचा बन गया है।
यही वह कारण है जिसके कारण एंगुलरजेएस ने तकनीकी विकास के बावजूद अपनी गति को रोक दिया है। क्रॉस-प्लेटफ़ॉर्म इंटरफ़ेस आधारित प्रणाली इसे और अधिक कुशल बनाती है।
AngularJS अपाचे कॉर्डोवा का पूरक और लाभ उठाता है, जो एक फ्रेमवर्क है जो क्रॉस-प्लेटफॉर्म मोबाइल ऐप के लिए उपयोग किया जाता है। इसमें अनुभव को बेहतर बनाने और वेब ऐप्स के परीक्षण और विकास को आसान बनाने की दृष्टि है और यह उनके AngularJS एप्लिकेशन विकास के लिए एक मजबूत ढांचा प्रदान करता है।
AngularJS का उपयोग क्यों करें?
नीचे सूचीबद्ध विभिन्न विशेषताएं और कारण हैं जिनके लिए AngularJS का उपयोग वेब अनुप्रयोग विकास में किया जाना चाहिए।
- डेटा बाइंडिंग: मंच मॉडल और दृश्य सामग्री के बीच डेटा का स्वचालित सिंक प्रदान करता है और परिणामस्वरूप, यह आपके समय के साथ-साथ बहुत हद तक प्रयास को बचाता है।
- नियंत्रक: ये जावास्क्रिप्ट हैं जो एक विशेष दायरे के लिए बाध्य हैं।
- सेवाएं: AngularJS में कई अंतर्निहित सेवाएँ हैं। उदाहरण के लिए: $ https
- फिल्टर: यह एक सरणी से आइटम के सबसेट को चुनने में मदद करता है और इसे एक नए सरणी में लौटाता है।
- निर्देश: वे डोम तत्वों जैसे विशेषता, सीएसएस तत्वों आदि पर मार्कर हैं। इन्हें HTML के कस्टम टैग के रूप में उपयोग किया जा सकता है।
- रूटिंग: सिंगल पेज एप्लिकेशन बनाने में मदद करता है। यह # साइन के बाद URL में निर्दिष्ट है और आपको अपने एप्लिकेशन में अलग-अलग सामग्री के लिए अलग URL बनाने में सक्षम बनाता है।
- MVC: मॉडल, दृश्य और नियंत्रक के लिए खड़ा है। यह एक डिज़ाइन पैटर्न है और इसका उपयोग ऐप के विभिन्न भागों में विभाजन के लिए किया जाता है, अर्थात्, मॉडल, दृश्य और नियंत्रक।
- गहरी जोड़ने: ऐप फ्रेमवर्क की यह सुविधा आपको बुकमार्क करने के लिए URL में एप्लिकेशन की स्थिति को एनकोड करने में मदद करती है। बाद में, एप्लिकेशन को उसी स्थिति में URL से भी पुनर्स्थापित किया जा सकता है।
- डिपेंडेंसी इंजेक्शन: AngularJS में एक इन-बिल्ट डिपेंडेंसी इंजेक्शन सब-सिस्टम भी है जो डेवलपर के लिए विकास और परीक्षण की प्रक्रिया को आसान, सामंजस्यपूर्ण और सीधा बनाने में मददगार हो सकता है।
- स्कोप: ये ऐसी वस्तुएं हैं जो नियंत्रक और दृश्य के बीच गोंद के रूप में कार्य करती हैं।
AngularJS का उपयोग कैसे करें?
व्यक्तिगत रूप से, मेरा मानना है कि शायद ही कोई बेहतर फ्रंट-एंड वेब ऐप डेवलपिंग फ्रेमवर्क है जो आज बाजार में AngularJS की तुलना में उपलब्ध है।
AngularJS का उपयोग करने के तरीके के बारे में ट्यूटोरियल निराशाजनक रूप से जटिल नहीं हैं, और मुझे वास्तव में उनका अनुसरण करना काफी आसान लगा। आप टू-वे बाइंडिंग सिस्टम, टेम्प्लेटिंग सुविधाओं, मॉडर्नाइजेशन, डिपेंडेंसी इंजेक्शन सिस्टम, AJAX हैंडलिंग फंक्शन और इस फ्रेमवर्क की अन्य विशेषताओं का भी लाभ उठा सकते हैं।
कोडिंग शुरू करने से पहले, आपको एमवीसी अवधारणा (मॉडल, व्यू, और कंट्रोलर), 'हैलो वर्ल्ड' स्क्रिप्ट और एंगुलरजेएस की विभिन्न विशेषताओं के बारे में पता होना चाहिए।
एंगुलरजेएस के निर्देश
AngularJS आपको बड़ी संख्या में प्रदान करता है निर्देशों जो आपको एप्लिकेशन डेटा के साथ विभिन्न HTML तत्वों को जोड़ने में सक्षम बनाता है। वे मूल गुण हैं जो कीवर्ड से शुरू होते हैं एनजी- ।
AngularJS का उपयोग करते समय आपको किसी भी पृष्ठ पर शामिल होने वाला सबसे महत्वपूर्ण निर्देश नीचे दिया गया है।
ng-app - यह एंगुलरजेएस एप्लिकेशन का शुरुआती बिंदु है और इसे किसी भी तत्व में जोड़ा जाना चाहिए जो पेज के बाकी हिस्से को बॉडी पार्ट एलिमेंट की तरह कवर करता है। जब भी पृष्ठ लोड होता है और कोड में सभी विभिन्न निर्देशों का मूल्यांकन करने के लिए जाता है तो AngularJS इस पहलू की तलाश करता है।
AngularJS के निर्देशों में शामिल हैं:
(1) एनजी-ऐप :इसका उपयोग AngularJS एप्लिकेशन को शुरू करने के लिए किया जाता है। जब AngularJS एप्लिकेशन युक्त वेब पेज लोड होता है, तो यह मूल तत्व को परिभाषित करके एप्लिकेशन को स्वचालित रूप से बूटस्ट्रैप करता है। आपके HTML कोड में केवल एक ng-app निर्देश का उपयोग किया जाना चाहिए।
हालाँकि, यदि HTML कोड में एक से अधिक एनजी ऐप निर्देश पाए जाते हैं, तो पहली उपस्थिति का उपयोग किया जाएगा।
वाक्य - विन्यास:
{body of the HTML code} गर्मी के # 2) :इसका उपयोग एप्लिकेशन को इनिशियलाइज़ करने के लिए किया जाता है।
यह उन मानों का एक समूह प्रदान करता है जिन्हें प्रारंभिक उद्देश्यों के लिए चर के साथ जोड़ा जाना है। यह निर्देश अक्सर उपयोग नहीं किया जाता है क्योंकि चर का आरंभ आमतौर पर परियोजना के भीतर विशिष्ट कार्यों के माध्यम से होता है।
वाक्य - विन्यास:
# 3) एनजी-नियंत्रक: इसका उपयोग तब किया जाता है जब किसी फ़ंक्शन के आधार पर चर का आरंभीकरण किया जाना होता है; यानी, प्रत्येक वैरिएबल को फ़ंक्शन लॉजिक के आधार पर आरंभीकृत किया जाना है। एंगुलरजेएस एनजी-कंट्रोलर निर्देश में निर्दिष्ट फ़ंक्शन को एक वस्तु के साथ आमंत्रित करता है।
वाक्य - विन्यास:
app.controller(‘name of your function’,function($object){ Body of the controller/function}); # 4) एनजी-मॉडल :यह अनुप्रयोग द्वारा प्रदान किए गए नियंत्रणों को AngularJS के मूल्यों को बांधने के लिए उपयोग किया जाता है। विशिष्ट होने के लिए, नियंत्रक और मॉडल के माध्यम से इनपुट द्वारा प्राप्त किया गया डेटा उपयोगकर्ता के लिए प्रस्तुत किए जाने वाले दृश्य (w.r.t. MVC मॉडल) के लिए बाध्य होगा।
वाक्य - विन्यास:
Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate')); एनजी-शो और एनजी-छिपाने: ये कमांड तत्वों को छिपाते और दिखाते हैं, जो कि सीएसएस डिस्प्ले स्टाइल सेट करके हासिल किया जाता है।
AngularJS भी आपको कस्टम निर्देशों को परिभाषित करने देता है। वे HTML की कार्यक्षमता का विस्तार करने के लिए उपयोग किए जाते हैं और 'निर्देश' फ़ंक्शन का उपयोग करके परिभाषित किए जाते हैं। वे बस उस तत्व को प्रतिस्थापित करते हैं जिसके लिए वे सक्रिय हैं।
AngularJS धोखा शीट मेरे लिए एक जीवन रक्षक था। कई अन्य दिशा-निर्देश हैं जिन्हें आप चीट शीट पर देख सकते हैं। आप यह भी सीख सकते हैं कि एंगुलरजेएस के उपयोग के माध्यम से कस्टम निर्देशों का निर्माण कैसे करें। मुझे कई मुद्दों को आसान बनाने के लिए चीट शीट पर एंगुलरजेएस प्लेटफॉर्म के सभी निर्देश और निर्देश मिले।
AngularJS उदाहरण
एक सरल AngularJS उदाहरण इस प्रकार लिखा जा सकता है:
आपको एक HTML फ़ाइल बनाने की आवश्यकता है, उदाहरण के लिए , angularjsexample.html नीचे दिखाए गए रूप में।
Welcome {{helloTo.title}} to the world of Tutorialspoint!
angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; }); उपर्युक्त उदाहरण में, पटकथाएं AngularJS जावास्क्रिप्ट।
आपको यह जानकर आश्चर्य होगा कि आप रोजाना कितने ऐप इस्तेमाल करते हैं जो कि AngularJS प्लेटफॉर्म पर विकसित किए गए हैं।
यहाँ कुछ नाम दिए गए हैं:
- अभिभावक
- पेपैल
- जेटब्लू
- लेगो
- ऊपर का काम
- Netflix
- फ्रीलांसर
- iStock
उपरोक्त नामों से यह स्पष्ट है कि आप इस रूपरेखा का उपयोग करने के लिए किस ऊंचाई तक पहुँच सकते हैं। ये साइटें उनके खेल में सबसे ऊपर हैं, और उनकी सफलता का एक बड़ा हिस्सा निश्चित रूप से साइटों की दक्षता के लिए जाता है, क्योंकि वे एंगुलरजेएस पर विकसित किए गए हैं।
निष्कर्ष
यदि आप मोबाइल या यहां तक कि वेबसाइटों के लिए सिंगल-पेज ऐप बनाने और विकसित करने के लिए देख रहे हैं, जैसे कि मैं एक बार कैसे था - तो आगे नहीं देखें।
AngularJS आपके लिए वन-स्टॉप शॉप है, क्योंकि यह साइट मदद करती है और अनुप्रयोगों के विकास को अधिक आरामदायक और सामंजस्यपूर्ण बनाती है। यह शुरुआती लोगों के लिए बहुत अच्छा नहीं है, लेकिन जैसे-जैसे आप इसमें गहराई से उतरेंगे, आप अनुभव के साथ सीखेंगे और शानदार ऐप विकसित करेंगे।
इस बीच, यदि आप अधिक हाल के संस्करणों में अपग्रेड करते हैं, तो आपको बहुत अधिक प्रयासों में जाने की आवश्यकता नहीं है। बस कुछ नए आदेशों को सीखने और नए मोड़ को समझने से, आप नए संस्करणों में भी एप्लिकेशन विकसित करना शुरू कर सकते हैं।
AngularJS का उपयोग करके सिंगल पेज वेब एप्लिकेशन विकसित करने के बारे में अधिक जानने के लिए हमारे आगामी ट्यूटोरियल देखें।
PREV ट्यूटोरियल | अगले ट्यूटोरियल
अनुशंसित पाठ
- AngularJS (उदाहरण के साथ ट्यूटोरियल) का उपयोग करके सिंगल पेज एप्लीकेशन का निर्माण
- निरपेक्ष शुरुआती के लिए AngularJS ट्यूटोरियल (इंस्टॉलेशन गाइड के साथ)
- कोणीय संस्करणों के बीच अंतर: कोणीय बनाम एंगुलरजेएस
- शुरुआती के लिए गहराई से ग्रहण ट्यूटोरियल
- 48 शीर्ष कोणीयजेएस साक्षात्कार प्रश्न और उत्तर (2021 सूची)
- एंगुलरजेएस एप्लिकेशन के एंड-टू-एंड परीक्षण के लिए प्रोटेक्टर परीक्षण उपकरण
- .NET वेब एप्लीकेशन को तैनात करने के लिए AWS इलास्टिक बीनस्टॉक ट्यूटोरियल
- टेस्ट मैसेजिंग क्यू टेस्ट कैसे करें: IBM WebSphere MQ Intro Tutorial