Module and Controller in AngularJS

Rekha Kulkarni
8y
2.6k
0
1

Blog

Please refer to the following article for the basics:

Introduction to AngularJS

In this blog we will see,

What is module and what is a controller
How to create a module and controller
How it works

What is Module and how to create it?

Module is a kind of Main () method in AngularJS which contains controllers, services, directives etc.
Module in AngularJS can be created by using following syntax.
Module is used with ng-app.

A Module can be dependent on another module like ngRoute, ui.bootstrap.

What is a controller and how to create a controller?

Controller is a function which defines the data for view to display.
It can retrieve data from the database by calling a service. Controller is used with ng-controller.
The syntax to create controller is,

$scope is an object to which the data is attached and it is then retrieved and displayed.

Here message is attached to $scope object. So in the Html page which is using this controller by using double curly braces {{message}} the message will be displayed.

The controller needs to be registered with a module like this

Complete Code for Creating Module, Controller and registering Controller with Module is,

varmyApp = angular.module("myModule", [])
varmyController = function ($scope) {
$scope.message = "Welcome to angular JS";
};
myApp.controller("myController", myController);

varmyApp = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.message = "Welcome to angular JS";
});

Steps to Create Application,

Step 1

Download Angular.JS file from AngularJS.org.

Step 2

Create a website in Visual Studio. Add Angular.js file in it.

Find the below screenshots for reference.

Now add one html page and just drag and drop angular.min.js in your HTML page. It will look like this.
1. <head>
2. <scriptsrc="Scripts/angular.js"></script>
3. </head>
Now add one Javascript file and just drag and drop angular.js in your JS file. It will look like this.
1. /// <reference path="angular.js" />
Following is the code for the Javascript file .
1. varmyApp = angular.module("myModule", [])
2. .controller("myController", function($scope)
3. {
4. var employee = {
5. firstName: "rekha",
6. lastName: "Kulkarni",
7. gender: "f→emale",
8. };
9. var country = {
10. Name: "India",
11. Capital: "delhi",
12. };
13. // Attaching to $scope Object
14. $scope.message = "Welcome to angular JS";
15. $scope.country = country;
16. $scope.employee = employee;
17. });
Following is the code for html file.
1. <!DOCTYPEhtml>
2. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <script src="Scripts/angular.js"></script>
6. <script src="Scripts/JavaScript.js"></script>
7. </head>
9. <body ng-app="myModule">
11. <div ng-controller="myController">
12. {{message}}
13. <br/>
14. <br/>
15. </div>
16. <hr/>
17. <div ng-controller="myController">
18. <div>
19. Country Name: {{country.Name}}
20. <br/>
21. <br/> Country Capital: {{country.Capital}}
22. </div>
23. <hr/>
24. <div>
25. Employee FirstName :{{employee.firstName}}
26. <br/> Employee LastName :{{employee.lastName}}
27. <br/> Gender :{{employee.gender}}
29. </div>
31. </div>
33. </body>
35. </html>
The result of the program is:

Up Next

Pass Data from Parent Controller to Child Controller in AngularJS

Ebook Download

View all

Azure in 24 Days

Read by 0 people

Download Now!

Learn

View all