AngularJS हैलो वर्ल्ड एप्लीकेशन: आपका पहला उदाहरण प्रोग्राम
जेम्स हार्टमैन
AngularJS एप्लिकेशन की शक्ति को देखने का सबसे अच्छा तरीका Angular.JS में अपना पहला बुनियादी प्रोग्राम "हैलो वर्ल्ड" ऐप बनाना है।
AngularJS विकास के लिए आप कई एकीकृत विकास वातावरण का उपयोग कर सकते हैं, उनमें से कुछ लोकप्रिय नीचे दिए गए हैं। हमारे उदाहरण में, हम उपयोग कर रहे हैं Webstorm हमारे आईडीई के रूप में.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- विजुअल स्टूडियो
नमस्ते दुनिया, AngularJS
नीचे दिया गया उदाहरण AngularJS में अपना पहला “Hello world” एप्लिकेशन बनाने का सबसे आसान तरीका दिखाता है।
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
कोड स्पष्टीकरण:
- "एनजी-ऐप” कीवर्ड का उपयोग यह दर्शाने के लिए किया जाता है कि इस एप्लिकेशन को एक एंगुलर js एप्लिकेशन माना जाना चाहिए। इस एप्लिकेशन को कोई भी नाम दिया जा सकता है।
- कंट्रोलर वह है जिसका उपयोग व्यावसायिक तर्क को रखने के लिए किया जाता है। h1 टैग में, हम कंट्रोलर तक पहुँचना चाहते हैं, जिसमें “HelloWorld” प्रदर्शित करने का तर्क होगा, इसलिए हम कह सकते हैं, इस टैग में हम “HelloWorldCtrl” नामक कंट्रोलर तक पहुँचना चाहते हैं।
- हम “message” नामक एक सदस्य चर का उपयोग कर रहे हैं जो “Hello World” संदेश प्रदर्शित करने के लिए एक प्लेसहोल्डर के अलावा कुछ नहीं है।
- “स्क्रिप्ट टैग” का उपयोग एंगुलर.js स्क्रिप्ट को संदर्भित करने के लिए किया जाता है जिसमें एंगुलर js के लिए सभी आवश्यक कार्यक्षमता होती है। इस संदर्भ के बिना, यदि हम किसी भी AngularJS फ़ंक्शन का उपयोग करने का प्रयास करते हैं, तो वे काम नहीं करेंगे।
- “कंट्रोलर” वह स्थान है जहाँ हम वास्तव में अपना व्यावसायिक तर्क बना रहे हैं, जो हमारा नियंत्रक है। प्रत्येक कीवर्ड की बारीकियों को बाद के अध्यायों में समझाया जाएगा। यह ध्यान रखना महत्वपूर्ण है कि हम 'HelloWorldCtrl' नामक एक नियंत्रक विधि को परिभाषित कर रहे हैं जिसका संदर्भ चरण 2 में दिया जा रहा है।
- हम एक "फ़ंक्शन" बना रहे हैं जिसे तब कॉल किया जाएगा जब हमारा कोड इस कंट्रोलर को कॉल करेगा। $scope ऑब्जेक्ट AngularJS में एक विशेष ऑब्जेक्ट है जो Angular.js के भीतर उपयोग किया जाने वाला एक वैश्विक ऑब्जेक्ट है। $scope ऑब्जेक्ट का उपयोग कंट्रोलर और व्यू के बीच डेटा को प्रबंधित करने के लिए किया जाता है।
- हम "संदेश" नामक एक सदस्य चर बना रहे हैं, इसे "हैलोवर्ल्ड" का मान दे रहे हैं और सदस्य चर को स्कोप ऑब्जेक्ट से जोड़ रहे हैं।
ध्यान दें: एनजी-कंट्रोलर निर्देश एक कीवर्ड है जिसे परिभाषित किया गया है AngularJS (चरण #2) और इसका उपयोग आपके एप्लिकेशन में नियंत्रकों को परिभाषित करने के लिए किया जाता है। यहाँ हमारे एप्लिकेशन में, हमने 'HelloWorldCtrl' नामक नियंत्रक को परिभाषित करने के लिए ng-controller कीवर्ड का उपयोग किया है। नियंत्रक के लिए वास्तविक तर्क (चरण #5) में बनाया जाएगा।
यदि कमांड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।
आउटपुट:
'हैलो वर्ल्ड' संदेश प्रदर्शित होगा।
