AngularJS परिचय (Introduction to Angular.js)

इस अध्याय में हम AngularJS का परिचय कराएंगे। AngularJS एक शक्तिशाली फ्रेमवर्क है जो जावास्क्रिप्ट पर आधारित है और इसे वेब एप्लिकेशन को डायनामिक बनाने के लिए डिज़ाइन किया गया है। इसके उपयोग से डेवलपर्स सिंगल-पेज एप्लिकेशन (SPA) और इंटरएक्टिव वेब एप्लिकेशन बना सकते हैं।

आप सीखेंगे:

• AngularJS क्या है और इसे क्यों उपयोग किया जाता है
• AngularJS की प्रमुख विशेषताएं
• AngularJS के साथ काम शुरू करने के लिए आवश्यक सेटअप
• AngularJS का उपयोग करके पहला एप्लिकेशन कैसे बनाएं

यह अध्याय आपको AngularJS की बुनियादी जानकारी देगा, जो आगे के अध्यायों को बेहतर समझने में मदद करेगा। चाहे आप बिल्कुल नए हों या कुछ अनुभव रखते हों, यह अध्याय आपको शुरुआत में सही मार्गदर्शन करेगा।

AngularJS क्या है और इसे क्यों उपयोग किया जाता है?

AngularJS एक फ्रेमवर्क है जो जावास्क्रिप्ट पर आधारित है और इसका उपयोग वेब एप्लिकेशन को अधिक डायनामिक और इंटरएक्टिव बनाने के लिए किया जाता है। इसे Google द्वारा विकसित किया गया है और मुख्य रूप से सिंगल-पेज एप्लिकेशन (SPA) के निर्माण के लिए इस्तेमाल किया जाता है। AngularJS का उद्देश्य HTML को एक अधिक एक्सप्रेसिव और इंटरएक्टिव तरीके से उपयोग करना है, जिससे बड़ी और कॉम्प्लेक्स एप्लिकेशंस को मैनेज करना आसान हो जाता है।

AngularJS का उपयोग क्यों किया जाता है?

1. डेटा बाइंडिंग (Data Binding): AngularJS के साथ, डेटा और UI के बीच दो-तरफ़ा डेटा बाइंडिंग संभव है, जिससे डेटा और UI को मैन्युअली अपडेट करने की आवश्यकता नहीं होती।
2. MVC आर्किटेक्चर (MVC Architecture): AngularJS मॉडल-व्यू-कंट्रोलर (MVC) आर्किटेक्चर को फॉलो करता है, जिससे एप्लिकेशन के विभिन्न हिस्सों को अलग करके इसे बेहतर ढंग से मैनेज किया जा सकता है।
3. डायरेक्टिव्स (Directives): AngularJS आपको कस्टम HTML टैग्स और एट्रिब्यूट्स बनाने की सुविधा देता है, जिससे आप अपने वेब एप्लिकेशन को अधिक इंटरएक्टिव बना सकते हैं।
4. डिपेंडेंसी इंजेक्शन (Dependency Injection): यह फीचर एप्लिकेशन को मॉड्यूलर और स्केलेबल बनाता है। डिपेंडेंसी इंजेक्शन की मदद से एप्लिकेशन की विभिन्न सर्विसेज़ और कम्पोनेंट्स के बीच कॉम्युनिकेशन बेहतर होता है।
5. रूटिंग (Routing): AngularJS का उपयोग सिंगल-पेज एप्लिकेशन्स में नेविगेशन को बेहतर बनाने के लिए किया जाता है, जिससे यूजर्स को अलग-अलग पेज पर जाने का अहसास होता है, जबकि असल में वे एक ही पेज पर होते हैं।

AngularJS की प्रमुख विशेषताएं

AngularJS एक पॉपुलर जावास्क्रिप्ट फ्रेमवर्क है जो वेब एप्लिकेशन डेवलपमेंट के लिए कई शक्तिशाली टूल्स और फीचर्स प्रदान करता है। यहाँ इसकी कुछ प्रमुख विशेषताएं हैं:

1. दो-तरफ़ा डेटा बाइंडिंग (Two-way Data Binding):

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

2. डायरेक्टिव्स (Directives):

AngularJS में डायरेक्टिव्स का उपयोग HTML के व्यवहार को बढ़ाने के लिए किया जाता है। डायरेक्टिव्स, जैसे ng-model, ng-bind, ng-repeat आदि, HTML को अधिक इंटरएक्टिव बनाते हैं और HTML टैग्स को कस्टमाइज़ करने की क्षमता देते हैं। आप अपनी खुद की कस्टम डायरेक्टिव्स भी बना सकते हैं।

3. MVC आर्किटेक्चर (MVC Architecture):

AngularJS एक मॉडल-व्यू-कंट्रोलर (MVC) आर्किटेक्चर का पालन करता है। इससे डेवलपर्स के लिए एप्लिकेशन को छोटे-छोटे मॉड्यूल में बाँटना आसान हो जाता है, जिससे एप्लिकेशन अधिक स्केलेबल और मेंटेन करने में आसान बनता है।

4. टेम्पलेट्स (Templates):

AngularJS में टेम्पलेट्स HTML पेज होते हैं जिनमें Angular-specific मार्कअप होता है। ये टेम्पलेट्स DOM के साथ मिलकर डेटा को प्रस्तुत करते हैं। AngularJS टेम्पलेट्स क्लाइंट-साइड पर रेंडर होते हैं, जिससे लोडिंग स्पीड बढ़ जाती है।

5. डिपेंडेंसी इंजेक्शन (Dependency Injection):

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

6. सर्विसेज़ और फैक्ट्रीज़ (Services and Factories):

AngularJS में सर्विसेज़ और फैक्ट्रीज़ का उपयोग डेटा शेयरिंग और पुन: प्रयोज्य लॉजिक बनाने के लिए किया जाता है। यह एप्लिकेशन के विभिन्न हिस्सों के बीच साझा किया जा सकता है, जिससे कोड का पुन: उपयोग बढ़ता है।

7. रूटिंग (Routing):

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

8. फिल्टर्स (Filters):

AngularJS में फिल्टर्स का उपयोग डेटा को प्रस्तुत करने से पहले संशोधित करने के लिए किया जाता है। यह डेटा को फॉर्मेट करने, सॉर्ट करने, या विशिष्ट मानदंडों के आधार पर फ़िल्टर करने के लिए उपयोगी होता है। उदाहरण के लिए, currency, date, और uppercase जैसे बिल्ट-इन फिल्टर्स का उपयोग किया जा सकता है।

9. टेस्टिंग (Testing):

AngularJS यूनिट टेस्टिंग और एंड-टू-एंड टेस्टिंग दोनों के लिए बहुत ही मजबूत टूल्स प्रदान करता है। इसकी डिपेंडेंसी इंजेक्शन और मॉड्यूलर आर्किटेक्चर इसे टेस्ट करना आसान बनाते हैं।

AngularJS का इतिहास (Development Journey of AngularJS)

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

1. शुरुआत (2009):

• Misko Hevery और Adam Abrons ने मिलकर AngularJS का पहला वर्शन विकसित किया। इसे पहले GetAngular के नाम से जाना जाता था।
• इसका मुख्य उद्देश्य HTML के साथ काम करना आसान बनाना और डेवलपर्स को डायनामिक वेब एप्लिकेशन बनाने के लिए एक सरल तरीके से समर्थन देना था।
• इस वर्जन में मुख्य रूप से डेटा बाइंडिंग और डायरेक्टिव्स जैसी सुविधाओं पर ध्यान दिया गया था।

2. Google द्वारा अपनाया जाना (2010):

• Google ने AngularJS को अपनाया और इसे एक पूर्ण फ्रेमवर्क के रूप में विकसित किया।
• इसकी ओपन-सोर्स प्रकृति ने इसे डेवलपर्स के बीच बहुत लोकप्रिय बनाया। AngularJS ने वेब एप्लिकेशन डेवलपमेंट को मॉड्यूलर और सरल बनाया, जिससे सिंगल-पेज एप्लिकेशन (SPA) का विकास बढ़ा।

3. AngularJS 1.0 रिलीज़ (2012):

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

4. समुदाय का विस्तार और योगदान (2012-2014):

• AngularJS का ओपन-सोर्स समुदाय बहुत तेजी से बढ़ा, जिससे कई डेवलपर्स ने इसमें योगदान दिया और इसे अधिक शक्तिशाली बनाया।
• विभिन्न कंपनियों और संगठनों ने AngularJS को अपनाना शुरू कर दिया क्योंकि यह एक स्थिर और स्केलेबल फ्रेमवर्क साबित हुआ।
• Google ने इसे लगातार अपडेट किया और बग्स को ठीक करने और नई सुविधाओं को जोड़ने के लिए रिलीज़ किए।

5. AngularJS 1.x और चुनौतियाँ (2014-2015):

• हालांकि AngularJS 1.x संस्करण बहुत सफल था, लेकिन जैसे-जैसे एप्लिकेशन की जटिलता बढ़ी, यह वर्शन कुछ मामलों में सीमित महसूस होने लगा।
• परफॉर्मेंस से संबंधित समस्याएँ और स्केलेबिलिटी पर ध्यान देने की आवश्यकता महसूस हुई। बड़े एप्लिकेशनों में जटिलता को संभालने के लिए इसमें कुछ सुधारों की आवश्यकता थी।

6. Angular 2 का आगमन (2016):

• 2015 के दौरान, Google ने यह घोषणा की कि AngularJS को पूरी तरह से पुनः डिज़ाइन किया जाएगा और एक नया संस्करण लॉन्च किया जाएगा जिसे Angular 2 कहा जाएगा।
• Angular 2 एक पूर्ण परिवर्तन था और इसे जावास्क्रिप्ट के नवीनतम मानकों, जैसे कि TypeScript और ES6, के साथ लिखा गया। यह पूरी तरह से AngularJS से अलग था।
• Angular 2 में नए आर्किटेक्चर, बेहतर परफॉर्मेंस और मॉड्यूलर सिस्टम की सुविधा थी। इसने रिएक्टिव प्रोग्रामिंग और मोबाइल सपोर्ट को भी प्राथमिकता दी।

7. AngularJS से Angular में संक्रमण:

• Angular 2 और उसके बाद के संस्करणों को “Angular” के रूप में जाना जाता है। AngularJS को पुराने संस्करण के रूप में देखा जाता है और इसकी जगह Angular ने ले ली।
• हालांकि AngularJS अभी भी उपयोग में है, Google ने 2021 में इसके लिए आधिकारिक रूप से लॉन्ग-टर्म सपोर्ट (LTS) को समाप्त कर दिया। अब AngularJS से Angular में माइग्रेशन को प्रोत्साहित किया जा रहा है।

8. AngularJS का अंतिम समर्थन (2021):

• AngularJS का अंतिम लॉन्ग-टर्म सपोर्ट (LTS) दिसंबर 2021 में समाप्त हो गया, जिसका मतलब है कि अब इसके लिए नए फीचर्स या अपडेट्स नहीं आएंगे।
• इसके बाद से डेवलपर्स को Angular (वर्जन 2 और उससे ऊपर) पर माइग्रेट करने की सलाह दी जाती है, क्योंकि यह नए तकनीकी मानकों और अधिक फीचर्स को सपोर्ट करता है।

AngularJS के साथ काम शुरू करने के लिए आवश्यक सेटअप

AngularJS के साथ काम शुरू करना बहुत सरल है और इसे किसी भी जटिल कॉन्फ़िगरेशन की आवश्यकता नहीं होती है। यहाँ AngularJS के साथ काम शुरू करने के लिए आवश्यक सेटअप के चरण दिए गए हैं:

1. विकास परिवेश (Development Environment) तैयार करें

AngularJS के साथ काम शुरू करने के लिए आपको कुछ बुनियादी टूल्स की आवश्यकता होगी:

• Text Editor या IDE:
  एक अच्छा टेक्स्ट एडिटर या आईडीई चुनें जिसमें जावास्क्रिप्ट और HTML कोडिंग सपोर्ट हो। कुछ लोकप्रिय विकल्प हैं:
  • Visual Studio Code
  • Sublime Text
  • Atom
  • WebStorm
• वेब ब्राउज़र:
  किसी भी आधुनिक वेब ब्राउज़र का उपयोग किया जा सकता है। आमतौर पर Google Chrome या Mozilla Firefox का उपयोग किया जाता है क्योंकि इनके पास अच्छे डेवलपर टूल्स होते हैं।
• वेब सर्वर (Optional):
  AngularJS क्लाइंट-साइड फ्रेमवर्क है, इसलिए आप इसे सीधे HTML पेज में जोड़ सकते हैं। लेकिन बड़े प्रोजेक्ट्स के लिए, आप Node.js, Apache, या Python SimpleHTTPServer जैसे लोकल वेब सर्वर का उपयोग कर सकते हैं।

2. AngularJS लाइब्रेरी को शामिल करना

AngularJS के साथ काम करने के लिए सबसे पहले AngularJS की लाइब्रेरी को अपने प्रोजेक्ट में जोड़ना होता है। यह लाइब्रेरी आप दो तरीकों से शामिल कर सकते हैं:

(a) CDN के माध्यम से:

AngularJS की फाइलें CDN (Content Delivery Network) से सीधे आपके प्रोजेक्ट में जोड़ी जा सकती हैं। इसके लिए आपको अपने HTML फाइल में नीचे दिए गए कोड को जोड़ना होगा:

<!DOCTYPE html>
<html>
<head>
  <title>My AngularJS App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <!-- Your AngularJS Code Here -->
</body>
</html>

इस कोड में, angular.min.js AngularJS की मिनिफाइड लाइब्रेरी है जो Google CDN से लोड की जाती है।

(b) लोकल फाइल के माध्यम से:

अगर आप इंटरनेट कनेक्शन के बिना AngularJS का उपयोग करना चाहते हैं, तो आप AngularJS की फाइल को डाउनलोड करके अपने प्रोजेक्ट में रख सकते हैं:

1. AngularJS डाउनलोड करें:
   AngularJS.org से AngularJS की फाइल डाउनलोड करें।
2. लोकल फाइल जोड़ें:
   AngularJS की फाइल को अपने प्रोजेक्ट के फ़ोल्डर में रखें और HTML में इस तरह से जोड़ें:

   <!DOCTYPE html>
   <html>
   <head>
     <title>My AngularJS App</title>
     <script src="path/to/angular.min.js"></script>
   </head>
   <body ng-app="myApp">
     <!-- Your AngularJS Code Here -->
   </body>
   </html>
   

    

3. AngularJS एप्लिकेशन सेटअप करें

AngularJS के साथ काम शुरू करने के लिए आपको एक बेसिक ऐप बनाना होगा। नीचे दिए गए कोड के उदाहरण में आप देख सकते हैं कि AngularJS एप्लिकेशन कैसे सेट किया जाता है:

<!DOCTYPE html>
<html>
<head>
  <title>My First AngularJS App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = "AngularJS में आपका स्वागत है!";
    });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <h1>{{ message }}</h1>
</body>
</html>

इस उदाहरण में:

• ng-app: HTML में इस एट्रिब्यूट के द्वारा आप AngularJS एप्लिकेशन को परिभाषित करते हैं।
• ng-controller: यह AngularJS कंट्रोलर का उपयोग करता है, जो डेटा और व्यू को मैनेज करता है।
• {{ message }}: यह एक AngularJS एक्सप्रेशन है, जो कंट्रोलर में परिभाषित डेटा को HTML में प्रदर्शित करता है।

4. AngularJS डेवलपर टूल्स (Optional)

आपके ब्राउज़र के लिए AngularJS Batarang जैसे डेवलपर टूल्स इंस्टॉल कर सकते हैं, जो AngularJS एप्लिकेशन को डिबग और प्रोफाइल करने में मदद करेंगे। इसे आप Google Chrome के एक्सटेंशन स्टोर से डाउनलोड कर सकते हैं।