In this post I'll go through some basics of AngularJS.
I am covering the following:
What is Module?
Why you need Module?
How to create Module?
What is controller?
How to create controller?
What is $scope?
How to register a controller with module?
What is Module?
A module is container of different
parts of out angular application.
E.g. controllers, directives, services,
filters.
In other types of applications you have main method as entry point of
application.
Why you need Module?
Angular apps don't have a main
method.
Modules declarative specify how
an application should be bootstrapped.
You can think of module as main
method of angular apps.
How to create Module?
A module is created by using AngularJS
‘module’ method of ‘angular’ object.
Open the 'script.js' file which you added in scripts folder of 'AngularJSDemo' folder.
Start writing the code in the file.
Example:
var myApp =
angular.module("myModule", []);
module() takes 2 parameters first
is the name of module and second is empty [] , which is
dependencies on other
module.
What is controller?
In Angular, controller is a
JavaScript construction function.
Controller control the data of AngularJS
application.
Controller builds model for view
and then view display the data. Model is data.
Typically in large applications,
controller calls the services and gets the data from database
and pass it to
view.
How to create controller?
Create a JavaScript function and
assign it to a variable
Example:
Example:
var myController = function ($scope) {
$scope.message = “Learning AngularJS “;
}
$scope.message = “Learning AngularJS “;
}
Here we are creating an anonymous
function in which we are passing $scope as parameter.
And in body part of
function we are assigning $scope object’s message property with string
value
“Learning AngularJS”.
What is $scope?
$scope is a bridge between
application controller and view.
You attach the model to scope
object and it is then available in view.
In view, you can retrieve the data
from scope object and display whatever format you want.
How to register a controller with module?
Module object has ‘controller’
method, which is used to register controller with module.
Example:
myApp.controller("myController", myController);
Here is complete code for creation of module, creation of controller and register controller to
module.
var myApp = angular.module("myModule", []);
var myController = function ($scope) {
$scope.message = “Learning AngularJS ";
}
$scope.message = “Learning AngularJS ";
}
myApp.controller("myController", myController);
AngularJS is on action in view?
Add a Html Page – Index.html
Right mouse click on Index.html page- select ‘Set As Start
Page’.
Replace the code below in index.html
<!DOCTYPE html>
<html data-ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<div data-ng-controller="myController">
{{message}}
</div>
</body>
</html>
See the top html tag <html> I have
added ‘data-ng-app’. It is the reference of module.
Inside body tag in one of <div> tag
I have added controller reference by adding ‘data-ng-controller=="myController".
Then
inside <div> tag you see inside curly braces {{ }}, I am passing the
message property of $scope, which is returning the value what I have passed
from script file.
Run the application:
You’ll
see the below result in page.
Learning AngularJS
AngularJS : Modules and controller
Reviewed by kamal kumar das
on
June 30, 2016
Rating:
Reviewed by kamal kumar das
on
June 30, 2016
Rating:
This comment has been removed by the author.
ReplyDeleteUseful post.Thanks for sharing.
ReplyDeleteAngularjs courses in Chennai | Angularjs Training in Chennai