मेन्यू

AngularJS (उदाहरण के साथ ट्यूटोरियल) का उपयोग करके सिंगल पेज एप्लीकेशन का निर्माण

  • मुख्य
  • अन्य
  • AngularJS (उदाहरण के साथ ट्यूटोरियल) का उपयोग करके सिंगल पेज एप्लीकेशन का निर्माण

build single page application using angularjs

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

AngularJS का उपयोग करके एक सिंगल पेज एप्लीकेशन एसपीए बनाएँ:

हम सभी को AngularJS के बारे में जानना चाहिए हमारे पिछले ट्यूटोरियल में समझाया गया था। इस ट्यूटोरियल में, हमें AngularJS का उपयोग करके सिंगल पेज एप्लिकेशन विकसित करने के बारे में और जानना होगा।

क्या आप नेटफ्लिक्स के बारे में जानते हैं? क्या आप कभी इसकी वेबसाइट पर गए हैं?

यदि आपका उत्तर ‘हां’ है, तो आप जानते हैं कि एक पेज का आवेदन कैसा दिखता है! हमारा अन्वेषण करें AngularJS को पूरा गाइड AngularJS का स्पष्ट ज्ञान प्राप्त करने के लिए।

AngularJS का उपयोग करते हुए सिंगल पेज एप्लीकेशन

मुझे विस्तृत करने दो!

Netflix अपने वेब अनुप्रयोगों में उपयोगकर्ता की कार्यक्षमता को समृद्ध करने के लिए अपने क्लाइंट-साइड ढांचे में AngularJS का उपयोग करता है।

उन्होंने इसे बनाकर अपने UI को बहुत सरल बना दिया है स्पा (सिंगल पेज एप्लीकेशन)। इसका मतलब है कि नेटफ्लिक्स के भीतर नेविगेशन पूरे पृष्ठ को ताज़ा किए बिना किया जाता है।

आप क्या सीखेंगे:

सिंगल पेज एप्लीकेशन के लाभ

नीचे दिए गए सिंगल पेज एप्लिकेशन के कुछ फायदे हैं।

  • बेहतर उपयोगकर्ता अनुभव।
  • कम बैंडविड्थ का उपयोग होने के कारण वेब पेज तेजी से ताज़ा होते हैं।
  • उत्पादन में एप्लिकेशन - index.html, CSS बंडल और जावास्क्रिप्ट बंडल की तैनाती आसान हो जाती है।
  • बंडलों को कई भागों में विभाजित करने के लिए कोड विभाजन किया जा सकता है।

एंगुलरजेएस का उपयोग करके एसपीए का विकास क्यों करें?

आजकल, कई जावास्क्रिप्ट अनुप्रयोग हैं जो बाजार में उपलब्ध हैं जैसे कि ember.js, backbone.js, आदि। लेकिन फिर भी, बहुत सारे वेब अनुप्रयोग एसपीए बनाने के लिए अपने विकास में AngularJS को शामिल करते हैं।

नीचे दिए गए कारणों से कुछ कारण हैं कि क्यों AngularJS एक स्पष्ट विजेता है:

(1) निर्भरता मत करो

AngularJS के विपरीत, backbone.js की अंडरस्कोर। Js और jQuery पर निर्भरताएं हैं। जबकि, एम्बर जेएस में हैंडलबार और jQuery पर निर्भरता है।

डेटासटेज साक्षात्कार प्रश्न और उत्तर पीडीएफ

# 2) रूटिंग

AngularJS का उपयोग करके बनाए गए वेब पेजों के बीच नेविगेशन उन लोगों की तुलना में बहुत सरल है जो अन्य जावास्क्रिप्ट फ्रेमवर्क का उपयोग करके बनाए गए हैं। AngularJS में उपयोग किए जाने वाले निर्देश हल्के हैं, इसलिए AngularJS का प्रदर्शन मीट्रिक सराहनीय है।

# 3) परीक्षण

एक बार AngularJS के उपयोग से एप्लिकेशन के निर्माण के बाद, सेलेनियम का उपयोग करके गुणवत्ता आश्वासन के लिए स्वचालित परीक्षण किया जा सकता है। यह AngularJS विकास का उपयोग करके निर्मित अनुप्रयोगों की भयानक विशेषताओं में से एक है।

कोणीयजेएस विशेषताएं

(छवि स्रोत edureka.co)

# 4) डेटा बाइंडिंग

AngularJS टू-वे डेटा बाइंडिंग का समर्थन करता है, यानी, जब भी मॉडल को अपडेट किया जाता है, तो दृश्य भी अपडेट हो जाता है क्योंकि AngularJS MVC आर्किटेक्चर का अनुसरण करता है।

इसलिए, डेटा को उपयोगकर्ता द्वारा उसकी वरीयताओं के आधार पर देखा जा सकता है।

# 5) ब्राउज़र के लिए समर्थन

AngularJS IE संस्करण 9 और ऊपर सहित अधिकांश ब्राउज़रों में समर्थित है। यह मोबाइल, टैबलेट और लैपटॉप पर भी काम कर सकता है।

# 6) चपलता

AngularJS चपलता का समर्थन करता है जिसका अर्थ है कि यह व्यवसायों से नए अनुरोधों को पूरा कर सकता है जब वे प्रतिस्पर्धी कार्य वातावरण में आते हैं। इन अनुरोधों को पूरा करने के लिए MVC आर्किटेक्चर में नियंत्रकों को लागू किया जा सकता है।

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

इसके अलावा, AngularJS में योगदानकर्ता और विशेषज्ञ संख्या में हैं, इसलिए आपको चर्चा के मंचों पर पोस्ट किए गए किसी भी प्रश्न का त्वरित जवाब मिलेगा।

AngularJS का उपयोग करके सिंगल पेज एप्लीकेशन कैसे विकसित करें?

नीचे सूचीबद्ध विभिन्न कदम एंगुलरजेएस का उपयोग करके एसपीए को विकसित करने में शामिल हैं।

चरण 1: एक मॉड्यूल बनाएँ

हम सभी जानते हैं कि AngularJS MVC आर्किटेक्चर का अनुसरण करता है। इसलिए, हर AngularJS एप्लिकेशन में नियंत्रक, सेवाओं आदि से युक्त एक मॉड्यूल होता है।

var app = angular.module('myApp', ());

चरण 2: एक साधारण नियंत्रक को परिभाषित करें

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

चरण 3: HTML कोड में AngularJS स्क्रिप्ट शामिल करें

मॉड्यूल निर्दिष्ट करें (चरण 1 में बनाया गया) एनजी-ऐप विशेषता और नियंत्रक (चरण 2 में परिभाषित) एनजी-नियंत्रक विशेषता।

{{message}}

First Second Third

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

एक बार HTML को लोकलहोस्ट पर चलाने के बाद, निम्न पेज प्रदर्शित होता है।

पहला वेब पेज

निरीक्षण करें कि हाइपरलिंक प्रथम, द्वितीय तृतीय पृष्ठ पर राउटर हैं और जब आप उन पर क्लिक करते हैं, तो संबंधित वेब पृष्ठों पर नेविगेशन ताज़ा किए बिना होता है।

दूसरा वेब पेज

तीसरा वेब पेज

यह बात है! आशा है कि आप इस ब्लॉग में दिखाए गए अनुसार एक साधारण एसपीए बना सकते हैं। एक बार जब आप आउटपुट सफलतापूर्वक प्राप्त कर लेते हैं, तो आप उसी तर्ज पर जटिल एसपीए की कोशिश कर सकते हैं।

निष्कर्ष

आजकल नेटफ्लिक्स जैसे ब्रांडों के साथ सिंगल पेज एप्लिकेशन बहुत लोकप्रिय हैं।

यदि आप एसपीए का विकास कर रहे हैं, तो एंगुलरजेएस स्पष्ट विकल्प है। हालाँकि, AngularJS का नया संस्करण, यानी, Angular अधिक कार्यक्षमता प्रदान करता है। इसके अलावा, विभिन्न तकनीकों जैसे कि नोड जेएस एप्लीकेशन डेवलपमेंट आदि हैं।

कोणीय संस्करण के उन्नयन के बारे में पता लगाने के लिए हमारे आगामी ट्यूटोरियल के लिए बने रहें!

PREV ट्यूटोरियल | अगले ट्यूटोरियल

अनुशंसित पाठ

^