AngularJS First App

इस chapter में आप step-by-step अपना पहला proper AngularJS application बनाना सीखेंगे। यहाँ हम simple demo से आगे बढ़कर एक structured AngularJS app बनाएंगे, जिसमें module और controller का उपयोग किया जाएगा। यही तरीका real-world AngularJS applications में follow किया जाता है।

AngularJS Application के Main Parts

एक AngularJS application में आम तौर पर ये parts होते हैं:

  • Module
  • Controller
  • View (HTML)
  • Model (Data)

पहला AngularJS app बनाते समय इन सभी concepts को basic level पर समझना जरूरी है।

Step 1: AngularJS Library Include करें

सबसे पहले AngularJS library को HTML file में include करें।

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Step 2: AngularJS Module बनाना

AngularJS application की शुरुआत एक module से होती है। Module पूरे app का container होता है।

<script>
  var app = angular.module("myFirstApp", []);
</script>

यहाँ:

  • myFirstApp module का नाम है
  • खाली array [] dependencies को represent करता है

Step 3: AngularJS Controller बनाना

Controller application logic को handle करता है और data को View के साथ connect करता है।

<script>
  app.controller("myCtrl", function($scope) {
    $scope.name = "AngularJS";
    $scope.version = "1.x";
  });
</script>

यहाँ:

  • myCtrl controller का नाम है
  • $scope data को View तक पहुंचाने के लिए use होता है

Step 4: HTML View में Module और Controller Use करना

अब HTML में ng-app और ng-controller directives का उपयोग करें।

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module("myFirstApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.name = "AngularJS";
      $scope.version = "1.x";
    });
  </script>
</head>
<body>

<div ng-app="myFirstApp" ng-controller="myCtrl">
  <h2>Welcome to {{name}}</h2>
  <p>Framework Version: {{version}}</p>
</div>

</body>
</html>

Code Explanation

  • ng-app="myFirstApp" AngularJS को बताता है कि कौन सा module use करना है
  • ng-controller="myCtrl" View को controller से connect करता है
  • {{name}} और {{version}} controller से आने वाला data display करते हैं

First App with User Input

अब same app में user input जोड़ते हैं।

<div ng-app="myFirstApp" ng-controller="myCtrl">
  <p>Enter your favorite framework:</p>
  <input type="text" ng-model="name">
  <h3>You like {{name}}</h3>
</div>

यह example दिखाता है कि:

  • ng-model model को update करता है
  • View अपने आप refresh हो जाती है

AngularJS First App का Output

इस application में:

  • Page reload नहीं होता
  • Data real-time update होता है
  • JavaScript code minimal रहता है

यही AngularJS की power है।

Common Beginner Mistakes

पहला AngularJS app बनाते समय कुछ common mistakes होती हैं:

  • ng-app में गलत module name देना
  • Controller name mismatch होना
  • AngularJS library include करना भूल जाना
  • JavaScript error के कारण app load न होना

Summary

इस chapter में आपने सीखा:

  • AngularJS module कैसे बनाया जाता है
  • Controller कैसे define किया जाता है
  • Module और Controller को HTML से कैसे connect किया जाता है
  • Simple लेकिन proper AngularJS application कैसे बनाया जाता है
Share your love

Related Posts

  • Home