AngularJs Module



A Module is a container of the different parts of an application such as controller, service, filters, directives, factories etc. It supports separation of concern using modules. 

AngularJS stops polluting global scope by containing AngularJS specific functions in a module. A module is a collection of services, directives, controllers, filters, and configuration information.  angular.module is used to configure the $injector. 

var app= angular.module('app',['dependency1','dependency2']); 
Example:- 
  
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
<script src="~/Scripts/angular.js"></script 
</head> 
<body ng-app="app"> 
  
      <!-- HTML content --> 
<script> 
        var app = angular.module('app', []); 
</script> 
</body> 
</html> 
  

In this example, the angular.module() method creates an application module, where the first parameter defines the module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In this example there is no dependency because we are passing an empty array . 

Module define in separate files:-

Example:-


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="~/Scripts/angular.js"></script
</head>
<body ng-app="app">
   <div ng-controller="mycontroller">
      Name : {{Name}}
   </div>
<script src= "app.js"></script>
<script src= "controller.js"></script>
</body>
</html>


app.Js:-

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


Controller.js:-

app.controller("mycontroller" , function($scope) {
   $scope.Name = "The Unified Solution";
});


Thanks!

Post a Comment

0 Comments