डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Modules

Module ये AngularJS Application के अलग-अलग हिस्सों का container होता है | ये अलग-अलग हिस्से controller, filters, services, directives और factories होते है |

Module ये case-sensitive होता है |

AngularJS Application Module

Application पर module को create करने के लिए angular.module() function का इस्तेमाल किया जाता है |

Example में HTML Element पर ng-app के 'app' इस parameter को दिया गया है जिसमे application को run किया जायेगा |

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

<script type="text/javascript">
var myapp = angular.module("app", []); 
</script>

Adding Controller to Module

Controller ये हमेशा module से सम्बंधित होता है | controller() function से controller को AngularJS Application पर add किया जाता है | उस controller को ng-controller directive से HTML Element पर दिया गया है |

<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>

<script type="text/javascript">

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

myapp.controller("ctrl", function($scope){
    $scope.message = "Hello World";
});

</script>

Adding User-Defined Directive in Module

Example पर AngularJS Application पर module का इस्तेमाल करके user-defined directive को add किया गया है |

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app">
<my-Directive></my-Directive>
</div>

<script>
var myapp = angular.module("app", []);
myapp.directive("myDirective", function() {
    return {template : "Hello World" };
});
</script>

</body>
</html>

Example for Module in AngularJS

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>

<script type="text/javascript">
var myapp = angular.module("app", []);

myapp.controller("ctrl", function($scope){
	$scope.message = "Hello World";
});
</script>

</body>
</html>
Output :
Hello World

Same As


निचे दिए हुए Example पर application.js file पर application module को define किया गया है और controller.js file पर controller दिया गया है | उसके बाद उन दोनों js files को main file पर include किया गया है |

application.js
var myapp = angular.module("app", []);
controller.js
myapp.controller("ctrl", function($scope){
    $scope.message = "Hello World";
});
Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>

</body>
</html>
Output :
Hello World