Learning AngularJS Basics | Part 2

Application / Module / Controller

In out previous lesson we discussed how to add AngularJS in to your HTML page, what are some basic AngularJS attributes, what are Directives, Expressions and what’s the difference between them.


Objective

In this lesson, we are intended to learn the following:

  1. AngularJS Module
  2. AngularJS Controller

So let’s get right into it!

AngularJS Application

Any AngularJS application revolves around these two components:

  1. Modules
  2. Controllers

So the question arises, what are Modules and Controllers? Let’s try to understand them.

> Module

A module is a container for different parts of an application. Its job is to define the application and serve as a container for all the controllers of that application.

To create a module, let’s look at the following code:

<script>
var app = angular.module(“appModule”, []);
</script>

This is the syntax to create an AngularJS module. In the above line of code, we made a variable called app and to this variable, we assign an AngularJS module called appModule.

Please note that whenever we want to use our AngularJS code with some HTML elements, those HTML elements must be enclosed by the appModule parameter. To achieve this, let’s enclose our HTML application in the appModule parameter by using the following code:

<script>
var app = angular.module(“appModule”, []);
</script>
<body ng-app="appModule">
...
</body>

As you can see, I’ve used the ng-app directive to enclose the <body></body> of my HTML with the myModule that we created earlier in our <script></script> tag.

Our Module is now ready to use!

> Controller

As the name suggests, the job of an AngularJS Controller is to control your application. Sounds easy, right? Let’s start creating a controller by understanding the following code:

<script>
var app = angular.module(“appModule”, []);
app.controller('appController', function($scope) {
// Code inside the controller
};
</script>

Let’s understand the above syntax.

The code app.controller means that our controller belongs to the app module that we created earlier. The parameter appController is the name of our controller, which can be anything that you want. The following part of our code marks the boundary our our controller:

function($scope){
// Code inside the controller
}

Let’s ignore the $scope object for now, we’ll understand that in the later lessons.

To start controlling your HTML using this controller, we must enclose the HTML tags which we intend to control. That can be done using the ng-controller directive.

<script>
var app = angular.module(“appModule”, []);
app.controller('appController', function($scope) {
// Code inside the controller
};
</script>
<body ng-app="appModule" ng-controller="appController">
...
</body>

Our controller is now controlling this <body> ... </body> tag.

Example | AngularJS Module and Controller

Problem statement: We have to create a Module named appModule. That module will contain a controller called appController. Since all of this code in primarily JavaScript, we must have to create a variable called name and show that variable in the <body></body> of our HTML.

Assumptions: For now, just assume that $scope is a magic object that takes your variables from Controller to HTML file. Don’t worry, I’ve explained this exact example in the next lesson.

Solution: Here’s the solution to this problem statement, I encourage you to try it yourself before looking at the solution:

<script>
var app = angular.module(“appModule”, []);
app.controller('appController', function($scope) {
$scope.name = "Fahad A. Chaudhry";
};
</script>
<body ng-app="appModule" ng-controller="appController">
{{ name }}
</body>

Conclusion

In this article, we tried to cover the following areas:

  1. AngularJS Module
  2. AngularJS Controller

In the next Article

In the next article, we’ll try to understand the following topics:

  1. AngularJS Scopes


Thank you for reading this article. Hope it was helpful. If you liked it, please give it a ❤ and I’ll see you next time…

Get in touch

Email: sh.fahadashraf@gmail.com | Facebook | Instagram | About