Creating a Controller in AngularJS

In this post I am going to explain, how we can create a simple controller in AngularJS. This is my second blog in AngularJS series.

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. So, basically controllers are where we define our app’s behavior by defining some functions and some values. To make it simple, let’s say we have a simple object like this:

var obj = {
  name: 'Test Controller',
  result: 100
};

Now how can we display this object data in our web page? This is where the power of Controller comes in. Firstly, we need to create a module. You can see my previous blog on Creating a Module in AngularJS for full detailed explanation about it. Now, lets create a module using the below code:-

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

In my previous post, I had created a module like above. But, we will make slight modifications to it by putting our module code inside a closure. Closures mainly helps us in data encapsulation and it is a good habit to wrap our javascript code inside a closure. So, our modified module code is now like:-

(function() {
  var app = angular.module('myModule', []);
})();

Next, we will create a controller named myController by using the below code:-

(function() {
  var obj = {
    name: 'Test Controller',
    result: 100
  };

  var app = angular.module('myModule', []);
  app.controller('myController', function() {
    this.prop = obj;
  });
})();

Here, we have created the controller and then attached a property named prop containing our object that we are going to display.

Now, let’s see our current html page, where we want to display our object data:-

<!DOCTYPE html>
<html ng-app="myModule">
    
    <head>
        <link rel="stylesheet" href="bootstrap.min.css" type="text/css" />
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    
    <body>
        <div class="well">
             <h3> Object Name</h3>
             <h4> Object Result </h4>
        </div>
    </body>

</html>

In our current HTML markup, we have already added our module that we had created as the first step, as you can also see it in the html tag using ng-app="myModule". I have already explained about it my previous post. Please have a look at it once for more details.

Next, we will display the name and result data in our object inside the <h3> & <h4> tags in our current HTML markup. So, in order to achieve that we will have to first attach our controller myController to the HTML page by using the ng-controller directive and then in double quotes we will add our controller name and add alias to it. Lets call the alias here as controller for demo purpose. We will add it to the body tag like:-

<body ng-controller="myController as controller">

Once again, here ng-controller is the directive, myController is our controller name and controller is the alias used for it.

Next, we will add our objects data inside the <h3> & <h4> tags using the expressions like:-

<h3>{{controller.prop.name}}</h3>
<h4>{{controller.prop.result}}</h4>

Here, controller is the alias for our controller, prop is the property that we had created inside our controller code in app.js and name and result are the keys of our object obj that we had mentioned in the top. So, our final HTML code would be like:-

<!DOCTYPE html>
<html ng-app="myModule">
    
    <head>
        <link rel="stylesheet" href="bootstrap.min.css" type="text/css" />
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    
    <body ng-controller="myController as controller">
        <div class="well">
             <h3>{{controller.prop.name}}</h3>
             <h4>{{controller.prop.result}}</h4>
        </div>
    </body>

</html>

Demo:
Working Demo on Plunker

That’s it! We have finally created our first simple controller. If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

4 thoughts on “Creating a Controller in AngularJS

  1. Pingback: NgShow and NgHide directive in AngularJS | jQuery Tips and Tricks

  2. Pingback: Creating a Custom Directive in AngularJS | jQuery Tips and Tricks

  3. Pingback: Conditionally add a CSS class in AngularJS | jQuery Tips and Tricks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s