Post
Ask Question

Modules And Controllers In AngularJS

In this article, we will see the role of Modules, Controllers, $scope in AngularJS Application. Here's the link for previous article:
Module: Module in AngularJS application is a container for controllers, directive, filters, services, etc and helps in packaging code as reusable modules.
 
Creating/Defining a Module
 
The first parameter in angular.module() function is the name of the module and the second parameter is an array in which we can add dependencies. Here, we have not added any external modules/dependencies as we are trying to make this example as simple as possible.
 
Controller

Controller is defined by a JavaScript constructor function. Controller controls and acts as a brain for the View in AngularJS Application. Controller is attached to the DOM using the ng-controller directive. Controllers should only contain business logic.
 
Adding a Controller in our angular module
 
In the above code, we have added a controller with our angular module (i.e. myApp) using Controller method of the module. In Controller method, the first parameter is name of the controller and second is function representing the controller.
 
$scope acts as a glue between application controller and the view. $scope is dynamically injected into controller's function. We have added some data to $scope properties.
 
Here, we have added our module and controller in View using ng-App and ng-controller directive of AngularJS. 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Working with Controller</title>  
  5.     <script src="Script/angular.js"></script>  
  6.     <script>  
  7.         // Declare a module  
  8.         var myApp = angular.module('myApp', []);  
  9.         //Registering a controller in myApp module  
  10.         myApp.controller('myController', function ($scope) {  
  11.             $scope.Name = "Anoop Kumar Sharma";  
  12.             $scope.Website = "www.ittutorialswithexample.com";  
  13.         });  
  14.     </script>  
  15. </head>  
  16. <body ng-app="myApp">  
  17.     <div ng-controller="myController">  
  18.         Name:{{Name}}<br />  
  19.         Website:{{Website}}  
  20.     </div>  
  21. </body>  
  22. </html>  
Let's save and run the application.

Preview

 
Let's move the entire <script> to new file i.e. controller.js and add reference of that script after the angular script.

Example2.html
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Working with Controller</title>  
  5.     <script src="Script/angular.js"></script>  
  6.     <script src="Script/controller.js"></script>  
  7. </head>  
  8. <body ng-app="myApp">  
  9.     <div ng-controller="myController">  
  10.         Name:{{Name}}<br />  
  11.         Website:{{Website}}  
  12.     </div>  
  13. </body>  
  14. </html>  
Script/controller.js 
  1. // Declare a module  
  2. var myApp = angular.module('myApp', []);  
  3. //Registering a controller in myApp module  
  4. myApp.controller('myController', function ($scope) {  
  5.     $scope.Name = "Anoop Kumar Sharma";  
  6.     $scope.Website = "www.ittutorialswithexample.com";  
  7. });  
Preview
 
 
Hope you liked it. Thanks!


Similar Articles