Post
Ask Question

Introduction To AngularJS - Day 11

In the 10th day of AngularJS article series, we are going to learn next key players/concept of AngularJS, understanding the concept of Custom Filters in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10

Controller

In AngularJS framework controllers are the fundamental entry points to the presentation layer. We need some way to get data to and from the HTML document, that time we need to create a controller. Controller acts as ‘brain’ for a view.

  1. It defines the properties and methods.
  2. It defines the business logic.
  3. It handles the show/hide controls and data in view.
  4. It handle events triggered by view.
  5. It knows how to retrieve data to view.
  6. It interacts with the view using the $scope object.

For using this created controller in view HTML element we used ‘ng-controller’ directive, it tells the view which controller we are using. Using the $scope you can access the properties and methods of controller. $scope is injected in controller. The controllers contain all the functions that we need to call a page.

In order to create a controller first we need to create a module. In AngularJS framework, a module is like a namespace in C# or java. We see the concept of module in previous article. Using this module we can create directives, filters, controllers, constant, etc.

code

The above image shows, using module you can create controllers, config, constructors, etc. The following is the syntax of creating a controller with the help of module.

  1. <scripttype="text/javascript">  
  2.     var app = angular.module("myApp", []); app.controller("ctrlName", function ($scope) { });  
  3. </script>  
How we use this created controller in HTML elements, using the ‘ng-controller’ directive,

HTML code
  1. <!DOCTYPEhtml>  
  2. <htmlng-app="myApp">  
  3.   
  4.     <head>  
  5.         <title>Controllers in AngularJS</title>  
  6.         <scriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.   
  10.     <body>  
  11.         <divng-controller="ctrlName">  
  12.             <h1>Welcome to C# Corner!</h1>  
  13.             <h3>Creating Controller in AngularJS</h3>  
  14.   
  15.             </div>  
  16.             <scripttype="text/javascript">  
  17.                 var app = angular.module("myApp", []); app.controller("ctrlName", function ($scope) { });  
  18.                 </script>  
  19.     </body>  
  20.   
  21.     </html>  
html

You can create a ‘.js’ file and put this JavaScript or module and controller code and include in HTML file or you can create in same HTML file also as we saw in above image. Do not use an AngularJS controller for the following:
  1. Presentation logic, it will negatively affect the testability if we add the presentation logic in controller. A controller only contain the application logic.
  2. To format the input, instead of formatting in the controller, use AngularJS form controls instead use an AngularJS filters as we discussed in previous article.

Now we are going to create a simple example of controller. We are creating a module and controller and defining a property and methods / functions. Firstly, we are going to create two buttons and a <span>. We are creating a property named ‘laptop’ and this property is binding to the <span> with the help of {{expression}} by default it set to ‘Your Laptop Model is Samsung’ and using buttons we are changing the values of this property ‘laptop’. For better understanding we are going to create a separate file for JavaScript code. The following is the JavaScript code for creating module, controller, property and methods:

controller.js

  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3. app.controller("LaptopController", function($scope)   
  4. {  
  5.   
  6.     $scope.laptop = 'Your laptop model is Samsung!';  
  7.   
  8.     $scope.dell = function()  
  9.     {  
  10.         $scope.laptop = 'Your laptop model is Dell!';  
  11.     };  
  12.   
  13.     $scope.sony = function()  
  14.     {  
  15.         $scope.laptop = 'Your laptop model is Sony!';  
  16.     };  
  17. });  
js

Controller.html
  1. <!DOCTYPEhtml>  
  2. <htmlng-app="myApp">  
  3.   
  4.     <head>  
  5.         <title>Controllers in AngularJS</title>  
  6.         <scriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.             <scriptsrc="Scripts/controller.js">  
  9.                 </script>  
  10.     </head>  
  11.   
  12.     <body>  
  13.         <divng-controller="LaptopController">  
  14.             <h1>Learn Controller in AngularJS at C# Corner!</h1>  
  15.             <inputtype="button" ng-click="dell()" value="Dell" />       
  16.             <inputtype="button" ng-click="sony()" value="Sony" />  
  17.             <span><h2>{{laptop}}</h2></span>  
  18.             </div>  
  19.     </body>  
  20.   
  21.     </html>  
html

The following is the output when we run above code:

output

After clicking on Dell button the value changes as in the following output:

output

The above output is in debugging mode with the help of Chrome’s Developer Tool we opened, and set breakpoint under the controller method ‘dell()’. Next, we click on Dell button it will call the controller ‘dell()’ method and set the value to property ‘laptop’. Now the output will be like the following,

output

Same as when we click on Sony button you can see the following two output, first when we press Sony button and it calls the ‘sony()’ method in controller:

output

After continuing the debugging output is as follows:

output

Great, today we learned creating Controller in AngularJS with example created successfully.

Summary

I hope that beginners as well as students understood the concept of Controller in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

Thanks for reading. Learn it! Share it.


Similar Articles