एंजुलरजेएस इंट्रॉडक्शन
- पिछला पृष्ठ एंजुलरजेएस ट्यूटोरियल
- अगला पृष्ठ एंजुलरजेएस एक्सप्रेशन
AngularJS एक JavaScript फ्रेमवर्क। यह एक <script> टैग के द्वारा HTML पेज में जोड़ा जा सकता है।
AngularJS द्वाराआदेशHTML गुण को विस्तारित करता है और इसका उपयोगएक्सप्रेशनडाटा को HTML से बांधता है
AngularJS एक JavaScript फ्रेमवर्क है
AngularJS JavaScript से लिखा हुआ JavaScript फ्रेमवर्क है।
AngularJS JavaScript फाइल के रूप में वितरित करता है और यह एक <script> टैग के द्वारा वेब पेज में जोड़ा जा सकता है:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS HTML को विस्तारित करता है
AngularJS द्वारा ng-आदेशHTML को विस्तारित किया है।
ng-app इस आदेश ने एक AngularJS अनुप्रयोग वर्णित किया है。
ng-model इस आदेश ने HTML नियंत्रक (input, select, textarea) के मूल्य को अनुप्रयोग डाटा से बांधा है।
ng-bind इस आदेश ने अनुप्रयोग डाटा को HTML दृश्य से बांधा है।
एंजुलरजेएस इंस्टांस
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>नाम: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
उदाहरण व्याख्या:
जब वेब पेज लोड हो जाए, AngularJS स्वचालित रूप से चालू होता है।
ng-app इसके बाद AngularJS को बताता है कि <div> एलिमेंट AngularJS अनुप्रयोगका 'मालिक'।
ng-model आदेश इनपुट फील्ड के मूल्य को अनुप्रयोग वेरियेबल से बांधता है name。
ng-bind डिरेक्टिव <p> एलीमेंट की सामग्री को अनुप्रयोग परिमाण से बांधता है}} name。
एंजुलरजेएस इन्स्ट्रक्शन
जैसा कि आप देखते हैं, AngularJS डिरेक्टिव बड़े बांधनों के साथ है ng पूर्व-संयोजक HTML गुण
ng-init डिरेक्टिव AngularJS अनुप्रयोग परिमाण को चालू करता है。
एंजुलरजेएस इंस्टांस
<div ng-app="" ng-init="firstName='Bill'"> <p>नाम है <span ng-bind="firstName"></span></p> </div>
या फिर वैध HTML का उपयोग करें:
एंजुलरजेएस इंस्टांस
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>नाम है <span data-ng-bind="firstName"></span></p> </div>
अगर आप पृष्ठ HTML को वैध बनाना चाहते हैं तो आप data-ng- बजाय ng-。
आप इस शिक्षण पटल के बाद डिरेक्टिव के बारे में अधिक जानेंगे。
एंजुलरजेएस एक्सप्रेशन
AngularJS एक्सप्रेशन दो बड़े बांधनों में लिखी जाती है：{{ एक्सप्रेशन }}。
AngularJS एक्सप्रेशन के स्थान पर "आउटपुट" डाटा करेगा：
एंजुलरजेएस इंस्टांस
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>मेरा पहला एक्सप्रेशन:{{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS एक्सप्रेशन AngularJS डाटा को HTML से बांधता है，जैसे ng-bind डिरेक्टिव के तरीके से ही है。
एंजुलरजेएस इंस्टांस
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>नाम: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
आप इस शिक्षण पटल के बाद एक्सप्रेशन के बारे में अधिक जानेंगे。
एंजुलरजेएस अनुप्रयोग
AngularJS मॉड्यूलAngularJS अनुप्रयोग को परिभाषित करता है。
AngularJS नियंत्रकAngularJS अनुप्रयोग को नियंत्रित करता है。
ng-app डिरेक्टिव एक अनुप्रयोग को परिभाषित करता है，ng-controller डिरेक्टिव नियंत्रक विभाग को परिभाषित करता है。
एंजुलरजेएस इंस्टांस
<div ng-app="myApp" ng-controller="myCtrl">
नाम：<input type="text" ng-model="firstName"><br>
वर्गण: <input type="text" ng-model="lastName"><br>
<br>
पूर्ण नाम:{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
एंजुलरजेएस मॉड्यूल अनुप्रयोग को परिभाषित करता है:
एंजुलरजेएस मॉड्यूल
var app = angular.module('myApp', []);
एंजुलरजेएस कंट्रोलर अनुप्रयोग को नियंत्रित करता है:
एंजुलरजेएस कंट्रोलर
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
आप इस ट्यूटोरियल के बाद मॉड्यूल और कंट्रोलर के बारे में अधिक जानेंगे。
- पिछला पृष्ठ एंजुलरजेएस ट्यूटोरियल
- अगला पृष्ठ एंजुलरजेएस एक्सप्रेशन
