AngularJSशुरुआत AngularJS से हुई


टिप्पणियों

AngularJS एक वेब एप्लीकेशन फ्रेमवर्क है जो अमीर क्लाइंट-साइड एप्लिकेशन डेवलपमेंट को आसान बनाने के लिए बनाया गया है। यह दस्तावेज़ कोणीय 1.x के लिए है , जो कि अधिक आधुनिक कोणीय 2 का पूर्ववर्ती है या कोणीय 2 के लिए स्टैक ओवरफ़्लो दस्तावेज़ देखें।

संस्करण

संस्करण रिलीज़ की तारीख
1.6.5 2017/07/03
1.6.4 2017/03/31
1.6.3 2017/03/08
1.6.2 2017/02/07
1.5.11 2017/01/13
1.6.1 2016/12/23
1.5.10 2016/12/15
1.6.0 2016/12/08
1.6.0-rc.2 2016/11/24
1.5.9 2016/11/24
1.6.0-rc.1 2016/11/21
1.6.0-rc.0 2016/10/26
1.2.32 2016/10/11
1.4.13 2016/10/10
1.2.31 2016/10/10
1.5.8 2016/07/22
1.2.30 2016/07/21
1.5.7 2016/06/15
1.4.12 2016/06/15
1.5.6 2016/05/27
1.4.11 2016/05/27
1.5.5 2016/04/18
1.5.4 2016/04/14
1.5.3 2016/03/25
1.5.2 2016/03/19
1.4.10 2016/03/16
1.5.1 2016/03/16
1.5.0 2016/02/05
1.5.0-rc.2 2016/01/28
1.4.9 2016/01/21
1.5.0-rc.1 2016/01/16
1.5.0-rc.0 2015/12/09
1.4.8 2015/11/20
1.5.0-beta.2 2015/11/18
1.4.7 2015/09/30
1.3.20 2015/09/30
1.2.29 2015/09/30
1.5.0-beta.1 2015/09/30
1.5.0-beta.0 2015/09/17
1.4.6 2015/09/17
1.3.19 2015/09/17
1.4.5 2015/08/28
1.3.18 2015/08/19
1.4.4 2015/08/13
1.4.3 2015/07/15
1.3.17 2015/07/07
1.4.2 2015/07/07
1.4.1 2015/06/16
1.3.16 2015/06/06
1.4.0 2015/05/27
1.4.0-rc.2 2015/05/12
1.4.0-rc.1 2015/04/24
1.4.0-rc.0 2015/04/10
1.3.15 2015/03/17
1.4.0-beta.6 2015/03/17
1.4.0-beta.5 2015-02-24
1.3.14 2015-02-24
1.4.0-beta.4 2015-02-09
1.3.13 2015-02-09
1.3.12 2015-02-03
1.4.0-beta.3 2015-02-03
1.3.11 2015-01-27
1.4.0-beta.2 2015-01-27
1.4.0-beta.1 2015-01-20
1.3.10 2015-01-20
1.3.9 2015-01-15
1.4.0-beta.0 2015-01-14
1.3.8 2014-12-19
1.2.28 2014-12-16
1.3.7 2014-12-15
1.3.6 2014-12-09
1.3.5 2014-12-02
1.3.4 2014-11-25
1.2.27 2014-11-21
1.3.3 2014-11-18
1.3.2 2014-11-07
1.3.1 2014-10-31
1.3.0 2014-10-14
1.3.0-rc.5 2014-10-09
1.2.26 2014-10-03
1.3.0-rc.4 2014-10-02
1.3.0-rc.3 2014-09-24
1.2.25 2014-09-17
1.3.0-rc.2 2014-09-17
1.2.24 2014-09-10
1.3.0-rc.1 2014-09-10
1.3.0-rc.0 2014-08-30
1.2.23 2014-08-23
1.3.0-beta.19 2014-08-23
1.2.22 2014-08-12
1.3.0-beta.18 2014-08-12
1.2.21 2014-07-25
1.3.0-beta.17 2014-07-25
1.3.0-beta.16 2014-07-18
1.2.20 2014-07-11
1.3.0-beta.15 2014-07-11
1.2.19 2014-07-01
1.3.0-beta.14 2014-07-01
1.3.0-beta.13 2014-06-16
1.3.0-beta.12 2014-06-14
1.2.18 2014-06-14
1.3.0-beta.11 2014-06-06
1.2.17 2014-06-06
1.3.0-beta.10 2014-05-24
1.3.0-beta.9 2014-05-17
1.3.0-beta.8 2014-05-09
1.3.0-beta.7 2014-04-26
1.3.0-beta.6 2014-04-22
1.2.16 2014-04-04
1.3.0-beta.5 2014-04-04
1.3.0-beta.4 2014-03-28
1.2.15 2014-03-22
1.3.0-beta.3 2014-03-21
1.3.0-beta.2 2014-03-15
1.3.0-beta.1 2014-03-08
1.2.14 2014-03-01
1.2.13 2014-02-15
1.2.12 2014-02-08
1.2.11 2014-02-03
1.2.10 2014-01-25
1.2.9 2014-01-15
1.2.8 2014-01-10
1.2.7 2014-01-03
1.2.6 2013-12-20
1.2.5 2013-12-13
1.2.4 2013-12-06
1.2.3 2013-11-27
1.2.2 2013-11-22
1.2.1 2013-11-15
1.2.0 2013-11-08
1.2.0-rc.3 2013-10-14
1.2.0-rc.2 2013-09-04
1.0.8 2013-08-22
1.2.0rc1 2013-08-13
1.0.7 2013-05-22
1.1.5 2013-05-22
1.0.6 2013-04-04
1.1.4 2013-04-04
1.0.5 2013-02-20
1.1.3 2013-02-20
1.0.4 2013-01-23
1.1.2 2013-01-23
1.1.1 2012-11-27
1.0.3 2012-11-27
1.1.0 2012-09-04
1.0.2 2012-09-04
1.0.1 2012-06-25
1.0.0 2012-06-14
v1.0.0rc12 2012-06-12
v1.0.0rc11 2012-06-11
v1.0.0rc10 2012-05-24
v1.0.0rc9 2012-05-15
v1.0.0rc8 2012-05-07
v1.0.0rc7 2012-05-01
v1.0.0rc6 2012-04-21
v1.0.0rc5 2012-04-12
v1.0.0rc4 2012-04-05
v1.0.0rc3 2012-03-30
v1.0.0rc2 2012-03-21
G3-v1.0.0rc1 2012-03-14
G3-v1.0.0-rc2 2012-03-16
1.0.0rc1 2012-03-14
0.10.6 2012-01-17
0.10.5 2011-11-08
0.10.4 2011-10-23
0.10.3 2011-10-14
0.10.2 2011-10-08
0.10.1 2011-09-09
0.10.0 2011-09-02
0.9.19 2011-08-21
0.9.18 2011-07-30
0.9.17 2011-06-30
0.9.16 2011-06-08
0.9.15 2011-04-12
0.9.14 2011-04-01
0.9.13 2011-03-14
0.9.12 2011-03-04
0.9.11 2011-02-09
0.9.10 2011-01-27
0.9.9 2011-01-14
0.9.7 2010-12-11
0.9.6 2010-12-07
0.9.5 2010-11-25
0.9.4 2010-11-19
0.9.3 2010-11-11
0.9.2 2010-11-03
0.9.1 2010-10-27
0.9.0 2010-10-21

AngularJS वीडियो ट्यूटोरियल शुरू करना

Egghead.io पर AngularJS फ्रेमवर्क के लिए बहुत सारे अच्छे वीडियो ट्यूटोरियल हैं

यहाँ छवि विवरण दर्ज करें

शुरू करना

एक नई HTML फ़ाइल बनाएँ और निम्नलिखित सामग्री पेस्ट करें:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>
 

लाइव डेमो

जब आप एक ब्राउज़र के साथ फ़ाइल खोलते हैं, तो आपको एक इनपुट फ़ील्ड दिखाई देगी, जिसके बाद Hello, World! । पूरे पृष्ठ को ताज़ा करने की आवश्यकता के बिना इनपुट में मूल्य को संपादित करना, वास्तविक समय में पाठ को अपडेट करेगा।


स्पष्टीकरण:

  1. सामग्री वितरण नेटवर्क से कोणीय ढांचे को लोड करें।

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
     
  2. ng-app अनुप्रयोग के साथ कोणीय अनुप्रयोग के रूप में HTML दस्तावेज़ को परिभाषित करें

    <html ng-app>
     
  3. ng-init का उपयोग करके name चर को प्रारंभ करें

    <body ng-init=" name = 'World' ">
     

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

  4. मॉडल से HTML नियंत्रण पर डेटा को बाइंड करें। ng-model साथ name संपत्ति के लिए एक <input> ng-model

    <input ng-model="name" />
     
  5. डबल ब्रेसेस {{ }} का उपयोग करके मॉडल से सामग्री प्रदर्शित {{ }}

    <span>Hello, {{ name }}</span>
     
  6. name प्रॉपर्टी को ng-bind करने का एक और तरीका है हैंडलबर्स "{{ }}" बजाय ng-bind का उपयोग करना।

     <span ng-bind="name"></span>
     

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

हैंडलबार और ng-bind बिंद का उपयोग करने के बीच अंतर है। यदि आप हैंडलबार्स का उपयोग करते हैं, तो आप वास्तविक Hello, {{name}} देख सकते हैं Hello, {{name}} पेज के रूप में अभिव्यक्ति हल होने से पहले लोड होता है (डेटा लोड होने से पहले) जबकि यदि आप ng-bind उपयोग करते ng-bind , तो यह केवल डेटा दिखाएगा जब नाम सुलझ गया है। एक विकल्प के रूप में निर्देश ng-cloak का उपयोग हैंडलबार्स को संकलित करने से पहले प्रदर्शित करने के लिए किया जा सकता है।

कोणीय में न्यूनतम

न्यूनतमकरण क्या है?

यह अपनी कार्यक्षमता को बदले बिना सभी अनावश्यक वर्णों को स्रोत कोड से हटाने की प्रक्रिया है।

सामान्य सिंटेक्स

यदि हम एक नियंत्रक लिखने के लिए सामान्य कोणीय वाक्यविन्यास का उपयोग करते हैं तो हमारी फ़ाइलों को छोटा करने के बाद यह हमारी कार्यक्षमता को तोड़ने वाला है।

नियंत्रक (खनन से पहले):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});
 

न्यूनतम उपकरण का उपयोग करने के बाद, इसे नीचे की तरह छोटा किया जाएगा।

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})
 

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

सेवा नाम की जानकारी के साथ अपने कोड को एनोटेट करने के दो तरीके हैं जो न्यूनतम सुरक्षित हैं:

इनलाइन एनोटेशन सिंटैक्स

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);
 

$ इंजेक्शन संपत्ति एनोटेशन सिंटैक्स

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);
 

मिनिफिकेशन के बाद, यह कोड होगा

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);
 

यहां, कोणीय चर 'a' को $ स्कोप माना जाएगा, और यह आउटपुट को 'हैलो वर्ल्ड' के रूप में प्रदर्शित करेगा।

सभी सामान्य कोणीय निर्माण दिखाते हुए

निम्न उदाहरण एक फ़ाइल में सामान्य AngularJS निर्माण दिखाता है:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>
 

फ़ाइल की हर पंक्ति को नीचे समझाया गया है:

लाइव डेमो

  1. ng-app="myDemoApp" , ngApp निर्देश देता है जो एप्लिकेशन को बूटस्ट्रैप करता है और कोणीय बताता है कि एक DOM तत्व "myDemoApp" नाम के एक विशिष्ट angular.module द्वारा नियंत्रित होता है;
  2. <script src="angular.min.js"> AngularJS लाइब्रेरी को बूटस्ट्रैप करने में पहला कदम है;

तीन फ़ंक्शन ( MyDataService , DemoController , और startup ) घोषित किए जाते हैं, जिनका उपयोग (और समझाया गया) नीचे किया गया है।

  1. दूसरे तर्क के रूप में एक सरणी के साथ उपयोग किया जाने वाला angular.module(...) एक नया मॉड्यूल बनाता है। मॉड्यूल निर्भरता की सूची की आपूर्ति करने के लिए इस सरणी का उपयोग किया जाता है। इस उदाहरण में हम module(...) फ़ंक्शन के परिणाम पर श्रृंखला कॉल करते हैं;

  2. .service(...) एक कोणीय सेवा बनाता है और चैनिंग के लिए मॉड्यूल लौटाता है;

  3. .controller(...) एक कोणीय नियंत्रक बनाता है और .controller(...) लिए मॉड्यूल लौटाता है;

  4. .config(...) काम को पंजीकृत करने के लिए इस पद्धति का उपयोग करें जिसे मॉड्यूल लोडिंग पर करने की आवश्यकता है।

  5. .run(...) सुनिश्चित करता है कि कोड स्टार्टअप समय पर चलाया जाता है और एक पैरामीटर के रूप में मदों की एक सरणी लेता है। काम को पंजीकृत करने के लिए इस पद्धति का उपयोग करें जो तब किया जाना चाहिए जब इंजेक्टर सभी मॉड्यूल को लोड करने के लिए किया जाता है।

  6. ng-class है ngClass निर्देश एक गतिशील स्थापित करने के लिए class , और इस उदाहरण में इस्तेमाल hasStarted पर $rootScope गतिशील

  7. ng-cloak अनियंत्रित कोणीय एचटीएमएल टेम्पलेट (जैसे " {{ msg }} ") को रोकने के लिए एक निर्देश है जिसे एंगुलर ने पूरी तरह से लोड करने से पहले दिखाया है।

  8. ng-controller वह निर्देश है जो एंगुलर को डोम के उस हिस्से को ऑर्केस्ट्रेट करने के लिए विशिष्ट नाम के एक नए नियंत्रक को तुरंत करने के लिए कहता है;

  9. ng-repeat एक संग्रह पर कोणीय पुनरावृति बनाने और प्रत्येक आइटम के लिए एक डोम टेम्पलेट क्लोन करने का निर्देश है;

  10. {{ msg }} शोकेस इंटरपोलेशन : स्कोप या कंट्रोलर के एक हिस्से का ऑन-द-स्पॉट रेंडरिंग;

गुंजाइश का महत्व

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

हालांकि, जल्द या बाद में, यह समझना महत्वपूर्ण है कि वास्तव में यह $scope क्या है। यह उदाहरणों में दिखाता रहेगा इसलिए कुछ समझ होना जरूरी है।

अच्छी खबर यह है कि यह एक सरल लेकिन शक्तिशाली अवधारणा है।

जब आप निम्नलिखित बनाएँ:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>
 

नाम कहाँ रहता है?

इसका उत्तर यह है कि $rootScope एक $rootScope वस्तु बनाता है। यह बस एक नियमित जावास्क्रिप्ट ऑब्जेक्ट है और इसलिए नाम $rootScope ऑब्जेक्ट पर एक संपत्ति है:

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });
 

और जावास्क्रिप्ट में वैश्विक गुंजाइश के साथ के रूप में, यह आमतौर पर वैश्विक दायरे या $rootScope आइटम जोड़ने के लिए इतना अच्छा विचार नहीं है।

बेशक, ज्यादातर समय, हम एक नियंत्रक बनाते हैं और अपनी आवश्यक कार्यक्षमता को उस नियंत्रक में डालते हैं। लेकिन जब हम एक नियंत्रक बनाते हैं, तो कोणीय जादू करता है और उस नियंत्रक के लिए $scope वस्तु बनाता है। इसे कभी-कभी स्थानीय दायरे के रूप में जाना जाता है।

तो, निम्न नियंत्रक बना रहा है:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>
 

$scope पैरामीटर के माध्यम से स्थानीय स्कोप को एक्सेस करने की अनुमति देगा।

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });
 

$scope पैरामीटर के बिना एक नियंत्रक को किसी कारण से इसकी आवश्यकता नहीं हो सकती है। लेकिन यह महसूस करना महत्वपूर्ण है कि, नियंत्रक सिंटैक्स के साथ भी , स्थानीय गुंजाइश मौजूद है।

जैसे कि $scope एक जावास्क्रिप्ट ऑब्जेक्ट है, कोणीय जादुई रूप से इसे $rootScope से प्रोटोटाइपिक रूप से इनहेरिट करने के लिए सेट करता है। और जैसा कि आप कल्पना कर सकते हैं, स्कोप की एक श्रृंखला हो सकती है। उदाहरण के लिए, आप एक पेरेंट कंट्रोलर में एक मॉडल बना सकते हैं और इसे पेरेंट कंट्रोलर के दायरे में $scope.model रूप में $scope.model

फिर प्रोटोटाइप श्रृंखला के माध्यम से, एक बच्चा नियंत्रक स्थानीय रूप से $scope.model साथ उसी मॉडल तक पहुंच सकता है।

इसमें से कोई भी शुरू में स्पष्ट नहीं है, क्योंकि यह सिर्फ कोणीय पृष्ठभूमि में अपना जादू कर रहा है। लेकिन $scope को समझना यह जानना एक महत्वपूर्ण कदम है कि कोणीय कैसे काम करता है।

सरलतम संभव कोणीय नमस्ते विश्व।

कोणीय 1 दिल में एक डोम कंपाइलर है। हम इसे HTML या तो एक टेम्पलेट के रूप में या केवल एक नियमित वेब पेज के रूप में पारित कर सकते हैं, और फिर इसे एक ऐप संकलित कर सकते हैं।

हम पृष्ठ के एक क्षेत्र को {{ }} हैंडलबर्स शैली के सिंटैक्स का उपयोग करते हुए एक अभिव्यक्ति के रूप में इलाज करने के लिए कोणीय बता सकते हैं। घुंघराले ब्रेसिज़ के बीच कुछ भी संकलित किया जाएगा, जैसे:

{{ 'Hello' + 'World' }}
 

यह आउटपुट होगा:

HelloWorld
 

एनजी-ऐप

हम एनजीओ को बताते हैं कि हमारे डोम के किस हिस्से को ng-app निर्देश का उपयोग करके मास्टर टेम्पलेट के रूप में माना जाता है। एक निर्देश एक कस्टम विशेषता या तत्व है जिसे कोणीय टेम्पलेट संकलक जानता है कि कैसे निपटना है। आइए अब एक एनजी-ऐप निर्देश जोड़ें:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>
 

मैंने अब शरीर तत्व को रूट टेम्प्लेट बताया है। इसमें कुछ भी संकलित किया जाएगा।

निर्देशों

निर्देशक संकलक निर्देश हैं। वे कोणीय डोम कंपाइलर की क्षमताओं का विस्तार करते हैं। यही कारण है कि एंगुलर के निर्माता मिस्को ने एंगुलर का वर्णन इस प्रकार किया है:

"क्या एक वेब ब्राउज़र यह वेब अनुप्रयोगों के लिए बनाया गया होता।

हम शाब्दिक रूप से नए HTML विशेषताओं और तत्वों को बनाते हैं, और उन्हें कोणीय एक ऐप में संकलित करते हैं। ng-app एक निर्देश है जो बस संकलक को चालू करता है। अन्य निर्देशों में शामिल हैं:

  • ng-click , जो एक क्लिक हैंडलर जोड़ता है,
  • ng-hide , जो सशर्त रूप से एक तत्व छुपाता है, और
  • <form> , जो मानक HTML फॉर्म एलिमेंट में अतिरिक्त व्यवहार जोड़ता है।

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

हम HTML के साथ मिलकर वायर्ड निर्देशों की एक श्रृंखला से एक कोणीय ऐप बनाते हैं।