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 assigning that controller to our repective Page .

Introduction

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



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 ?

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

Why is module required ?

Module is main() method in your AngularJS application .

For Example : A console application has a main() method which is your 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 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 also.

What is Controller in AngularJS ?

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

How to Create a Controller in AngularJS ?

Var myController=function($scope)
$scope.message=”Hlelo C-SharpCorner Team”;

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

So 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 databinding expression to display details. Here, we are passing message property to this $scope object  and it's storing a string.

$scope.message=”Hlelo C-SharpCorner Team”;

And displaying Hello C-sharpcorner Team.

Code Part

Let's go to the Visual Studio.

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



Name it as mytest.js.



Now, we create a module.

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



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.


Now, when I typed angular it got autocomplete.



Now, just write,

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

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

As we don’t have any dependencies,  we had 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);

My 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 of our script file.

<script src=”text/javascript” src=”mytest.js”></script>

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

<html ng-app="mymodule" >

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, withing the binding section {{}}, I am going to use message property.

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

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



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



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

 

• So, in this part, we learned
  
  
  
  OR,
  
  
  
  So, we have in final,

Conclusion: So, this was about modules and controllers in AngularJS. I hope this article was a helpful one.