एंगुलरजेएस परिचय
AngularJS एक जावास्क्रिप्ट फ्रेमवर्क है । इसे <script> टैग वाले HTML पेज में जोड़ा जा सकता है।
AngularJS डायरेक्टिव के साथ HTML विशेषताओं का विस्तार करता है, और डेटा को HTML के साथ एक्सप्रेशन से बांधता है ।
AngularJS एक जावास्क्रिप्ट फ्रेमवर्क है
AngularJS जावास्क्रिप्ट में लिखा गया एक जावास्क्रिप्ट फ्रेमवर्क है।
AngularJS को JavaScript फ़ाइल के रूप में वितरित किया जाता है, और इसे स्क्रिप्ट टैग वाले वेब पेज में जोड़ा जा सकता है:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS HTML का विस्तार करता है
AngularJS एनजी-निर्देशों के साथ HTML का विस्तार करता है ।
एनजी-ऐप निर्देश एक AngularJS एप्लिकेशन को परिभाषित करता है ।
एनजी-मॉडल निर्देश एप्लिकेशन डेटा के लिए एचटीएमएल नियंत्रण (इनपुट, चयन, टेक्स्टरेरा) के मूल्य को बांधता है।
एनजी-बाइंड निर्देश एप्लिकेशन डेटा को HTML दृश्य से बांधता है ।
एंगुलरजेएस उदाहरण
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
उदाहरण समझाया:
वेब पेज लोड होने पर AngularJS अपने आप शुरू हो जाता है।
एनजी-ऐप निर्देश एंगुलरजेएस को बताता है कि <div> तत्व एंगुलरजेएस एप्लिकेशन का "स्वामी" है ।
एनजी-मॉडल निर्देश इनपुट फ़ील्ड के मान को एप्लिकेशन चर नाम से बांधता है ।
एनजी-बाइंड निर्देश <p> तत्व की सामग्री को अनुप्रयोग चर नाम से बांधता है ।
AngularJS निर्देश
जैसा कि आप पहले ही देख चुके हैं, AngularJS निर्देश एक एनजी उपसर्ग के साथ HTML विशेषताएँ हैं ।
एनजी-इनिट निर्देश एंगुलरजेएस एप्लिकेशन वैरिएबल को इनिशियलाइज़ करता है ।
एंगुलरजेएस उदाहरण
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
वैकल्पिक रूप से मान्य HTML के साथ:
एंगुलरजेएस उदाहरण
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
यदि आप अपने पृष्ठ के HTML को मान्य बनाना चाहते हैं, तो आप ng- के बजाय data-ng- का उपयोग कर सकते हैं ।
आप इस ट्यूटोरियल में बाद में निर्देशों के बारे में बहुत कुछ जानेंगे।
एंगुलरजेएस एक्सप्रेशंस
एंगुलरजेएस एक्सप्रेशन डबल ब्रेसिज़ के अंदर लिखे गए हैं: {{एक्सप्रेशन}} ।
एंगुलरजेएस डेटा को "आउटपुट" करेगा जहां अभिव्यक्ति लिखी गई है:
एंगुलरजेएस उदाहरण
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
एंगुलरजेएस एक्सप्रेशन एंगुलरजेएस डेटा को एचटीएमएल से उसी तरह बांधता है जैसे एनजी-बाइंड निर्देश।
एंगुलरजेएस उदाहरण
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
आप इस ट्यूटोरियल में बाद में भावों के बारे में और जानेंगे।
एंगुलरजेएस एप्लीकेशन
AngularJS मॉड्यूल AngularJS अनुप्रयोगों को परिभाषित करता है।
AngularJS नियंत्रक AngularJS अनुप्रयोगों को नियंत्रित करते हैं।
एनजी-ऐप निर्देश एप्लिकेशन को परिभाषित करता है, एनजी -नियंत्रक निर्देश नियंत्रक को परिभाषित करता है।
एंगुलरजेएस उदाहरण
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS मॉड्यूल अनुप्रयोगों को परिभाषित करता है:
एंगुलरजेएस मॉड्यूल
var app = angular.module('myApp', []);
AngularJS नियंत्रक अनुप्रयोगों को नियंत्रित करते हैं:
एंगुलरजेएस नियंत्रक
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
आप इस ट्यूटोरियल में बाद में मॉड्यूल और नियंत्रकों के बारे में और जानेंगे।