Course Progress 11%

AngularJS Modules

← AngularJS Expressions AngularJS Directives →

AngularJS Module किसी भी AngularJS application की foundation होता है। Module पूरे application के components को organize और manage करने का काम करता है। Controllers, directives, services, filters और अन्य parts सभी module के अंदर define किए जाते हैं।

अगर AngularJS application को एक container माना जाए, तो module उस container का entry point होता है।

Module क्या है

AngularJS module एक JavaScript object होता है जिसे angular.module() function के जरिए बनाया जाता है। यह application के अलग-अलग parts को एक साथ जोड़ने का काम करता है।

एक AngularJS app में कम से कम एक module जरूर होता है।

AngularJS Module बनाने का Syntax

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

यहाँ:

  • "myApp" module का नाम है
  • [] dependencies को represent करता है

खाली array का मतलब है कि यह नया module create किया जा रहा है।

Existing Module को Access करना

अगर module पहले से बना हुआ है, तो उसे access करने के लिए dependencies array नहीं दिया जाता।

var app = angular.module("myApp");

अगर आप dependencies array दोबारा दे देते हैं, तो module reset हो जाएगा।

Module और ng-app Directive

AngularJS को यह बताने के लिए कि कौन सा module use करना है, ng-app directive का उपयोग किया जाता है।

<div ng-app="myApp">
  ...
</div>

AngularJS इसी element से application को bootstrap करता है।

Multiple Modules का Concept

Large applications में एक से ज़्यादा modules बनाए जाते हैं।

Example:

  • Main module
  • Feature modules
  • Shared module
var app = angular.module("mainApp", ["userModule", "adminModule"]);

यहाँ mainApp दो दूसरे modules पर depend करता है।

Module के अंदर Controller Define करना

Controllers हमेशा module के अंदर define किए जाते हैं।

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

app.controller("myCtrl", function($scope) {
  $scope.message = "Hello AngularJS";
});

Module के अंदर Directive Define करना

Custom directives भी module के अंदर register किए जाते हैं।

app.directive("myDirective", function() {
  return {
    template: "<h3>This is a custom directive</h3>"
  };
});

Module के अंदर Service Define करना

Services reusable logic और data को handle करती हैं।

app.service("myService", function() {
  this.sayHello = function() {
    return "Hello from Service";
  };
});

Module Dependencies

Module dependencies का मतलब है कि एक module दूसरे module की functionality use कर सकता है।

angular.module("appOne", []);
angular.module("appTwo", ["appOne"]);

AngularJS पहले dependency modules को load करता है, फिर main module को।

Module Naming Best Practices

  • Module name unique होना चाहिए
  • Meaningful और readable name रखें
  • camelCase या PascalCase follow करें
  • Project structure के अनुसार name रखें

Common Module Errors

Modules के साथ आने वाली common problems:

  • ng-app में गलत module name
  • JavaScript file load order गलत होना
  • Module dependencies missing होना
  • Console में Module is not available error

Summary

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

  • AngularJS module क्या होता है
  • Module कैसे बनाया और access किया जाता है
  • ng-app और module का relation
  • Multiple modules और dependencies
  • Module के अंदर controller, directive और service define करना
← AngularJS Expressions AngularJS Directives →
  • Home