Modules And Controller In AngularJS

Overview

In an earlier article, we saw what AngularJS is, why AngularJS is used, what benefits it provides over other JavaScript frameworks, how to include AngularJS in your page, and its various directives. For more details, kindly refer to this article.

Overview Of AngularJS

In this article, we will see what modules and controllers are in AngularJS. In this part, we will see.

What are modules and Controllers in AngularJS?
How to create a module in AngularJS
How to create a Controller in AngularJS
How to register a controller with a Module and then assign that controller to our respective Page.

Introduction

Just kindly create a simple solution called AngularJS. Download Angular JS scripts from the official website. You can also download it from NuGet packages.

Download Angular JS

Search AngularJS.

Click on Install and it will install the AngularJS in your application.

Now, right-click on the solution and add html or aspx page.

What are modules in AngularJS?

Modules are nothing but containers for different parts of your application, like directives, filters, etc.

Why is a module required?

The module is the main() method in your AngularJS application.

For Example

A console application has a main() method which is the entry point of your application. Similarly, a module in AngularJS is your main entry point of your application.

Modules specify how the angular application will bootstrap.

How to Create a Module in Angular?

We will use the angular object method() to create a module

var mypartone = angular.module("mymodule", []);

You will notice that angular.module(“mumodule”,[]); are having two parameters at the moment.

The first parameter specifies the name of the module and the second parameter specifies the dependencies which are associated with that module.

Note. A module can depend on another module too.

What is a Controller in AngularJS?

In AngularJS, the controller is a JS function. The main part of the controller is to build a model for viewing, to display various details on the page. Here, the model is nothing but data. A controller may call a web Server which retrieves data from a database.

How to Create a Controller in AngularJS?

var myController = function($scope) {
    $scope.message = "Hello C-SharpCorner Team";
};

Note. We are creating an anonymous function here, which is a function($scope) and we are assigning it to a variable here. Here, we are passing a parameter called $scope.

What is $Scope?

$Scope is nothing but an angular object that is passed to the controller function by the angular framework, automatically. We attached the model to this $scope object which will be then available in the respective views.

Now, in the view, we are using a data-binding expression to display details. Here, we are passing message property to this $scope object and it's storing a string.

$scope.message = "Hello C-SharpCorner Team";

And displaying Hello C-sharp corner Team.

Code Part

Let's go to the Visual Studio.

Now, we add a simple JavaScript file, first, in our Script Folder.

Script Folder

Name it mytest.js.

Mytest.js

Now, we create a module.

When you start creating a module, you will notice that in intelligence AngularJS is not coming.

Intelligence AngularJS

Now, we will add an AngularJS reference to our script file here. Now, just drag and drop the script file reference i.e. angular.min.js here, and you will see a reference has been added.

Script file

Now, when I typed angular it got autocomplete.

Autocomplete

Now, just write,

/// <reference path="angular.min.js" />

var mypartone = angular.module("mymodule", []);

As we don’t have any dependencies, we created a blank array.

Now, we will create a controller.

var myController = function ($scope) {
    $scope.message = "Hello C-SharpCorner";
};

Now, we will register our controller with our respective module.

mypartone.controller("myController", myController);

The name of the controller is my controller and I am passing the function. We can also write it as,

mypartone.controller("myController", function ($scope) {  
    $scope.message = "Hello C-SharpCorner";  
});

Now, let's go back to our page and we add a reference to our script file.

<script type="text/javascript" src="mytest.js"></script>

Now, we will add our module name in HTML ng-app. What this ng-app will do is it will bootstrap our AngularJS application.

<html ng-app="mymodule">
</html>

Now, we have already registered our controller, and what our controller is doing is displaying the hello message.

Now, we will display that in our div element.

<div ng-controller="myController">
    {{ }}
</div>

Now, within the binding section {{}}, I am going to use the message property.

<div ng-controller="myController">
    {{ message }}
</div>

Now, let's run our application and we will see the output as Hello C-sharpCorner.

Hello C-sharpCorner

Now, look at the screenshot below. I had mentioned ng-controller in the first div and not in the second div. Whatever message I had written in the first div, it will render that within seconds.

Ng-controller

Now, if I move the ng-controller section to the body section and pass that message to div also, what we see in the below output, is that we got the hello message twice. That means, in the body section of ng-controller, it gets implemented in the child tags also.

Controller section