AngularJS Modules

🔍 AngularJS में Module क्या होता है?

AngularJS में Module एक container (डिब्बा) होता है जिसमें हम अपने application के parts (जैसे controllers, services, filters, directives आदि) को logically organize करते हैं।

आसान भाषा में: एक module आपके पूरे AngularJS app का “main box” होता है जिसमें सभी building blocks रखे जाते हैं।

🧠 क्यों ज़रूरी हैं Modules?

App को अलग-अलग हिस्सों में बाँटना आसान होता है
Code को manage और reuse करना आसान होता है
Maintenance और testing बेहतर होती है

✍️ Syntax:

var app = angular.module("myApp", []);

"myApp" → आपके ऐप का नाम
[] → dependency array (इसमें अभी कोई external module नहीं जोड़ा)

📄 Simple HTML + JS Example:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Modules</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
  </script>
</head>
<body>

<h2>Welcome to My App!</h2>

</body>
</html>

🔍 Explanation:

ng-app="myApp" → बताता है कि AngularJS App का नाम myApp है
हम JS में भी "myApp" नाम से एक module create कर रहे हैं

⚙️ Module में Controller जोड़ना

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", function($scope) {
      $scope.name = "Amit";
    });
  </script>
</head>
<body ng-controller="myCtrl">

<h2>Hello, {{ name }}</h2>

</body>
</html>

✅ Output:

Hello, Amit

💡 Multiple Modules बनाना

आप चाहें तो कई छोटे modules बनाकर उन्हें एक main module में जोड़ सकते हैं।
यह बड़ी apps के लिए बेहतर तरीका होता है।

var loginModule = angular.module("loginModule", []);
var dashboardModule = angular.module("dashboardModule", []);

var mainApp = angular.module("mainApp", ["loginModule", "dashboardModule"]);

🧪 Module के Use-Cases:

Module नाम	Use
`ngRoute`	Routing के लिए
`ngAnimate`	Animation के लिए
`ngResource`	RESTful APIs से connect करने के लिए

इन modules को dependencies में add किया जाता है जैसे:

angular.module("myApp", ["ngRoute", "ngAnimate"]);

🧠 अभ्यास (Exercise)

AngularJS module का syntax क्या होता है?
ng-app="myApp" और angular.module("myApp", []) में क्या संबंध है?
क्या एक AngularJS application में multiple modules हो सकते हैं?

✅ आपने क्या सीखा?

AngularJS Module क्या होता है और क्यों ज़रूरी है
Module कैसे बनाया जाता है
Module में controller कैसे जोड़ा जाता है
Dependency injection और छोटे modules कैसे use होते हैं

🎯 अब आप AngularJS application structure को समझने लगे हैं।

← Previous Next →

Angular JS Tutorial