| Newsletter |
AngularJs Controller Example, Controllers in AngularJs
AngularJs » on Nov 17, 2014 { 6 Comments } By Sivateja
In the previous tutorial, i have explained how to create a simple application without a controller. But in this example i am going to use a controller. In order to create a controller firstly we should create a module for our application. For that created module we will add our controllers and filters, services..etc, in the current example i will show you about the controller, i will explain about filters, services in the up coming tutorials.
Files Created
- index.html
- app.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Hello World Example with Controller - Java4s.com</title>
</head>
<body ng-app="java4sApp">
<div ng-controller="HelloWorldController">
<font face="verdana" size="2px">Hello there, {{message}} !</font>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>app.js
var app = angular.module("java4sApp", []);
app.controller("HelloWorldController", function($scope) {
$scope.message = "Welcome to Java4s AngularJS Tutorials";
});Explanation
- Firstly i have included angular related .js file in our application [ index.html > line number 13 ]
- In order to create a controller, we need to create a app [index.html > line number 7 ], then we should create a module with the same app name [app.js > line number 1 ]
- Then in app.js > line number 3, i have created the controller for the created module
- If you observe the controller function, i am passing ‘$scope‘ object as an argument, here $scope is a mediator between our view [ .html, .jsp….etc] and controller. $scope will carry the data between controller to view & vice versa
- So to the $scope object i am adding ‘message‘ property with some data [line number 4]
- Finally in index.html > line number 9 i am calling the controller using ‘ng-controller’ directive, and printing the data inside the controller [ line number 10, which is {{message}} ]
Demo
Click here to check the output
You Might Also Like
::. About the Author .:: | ||
 | ||
Comments
6 Responses to “AngularJs Controller Example, Controllers in AngularJs”
Hi Sivateja,
Your way of explanation is too good.
Could you please provide tutorial for jBPM?
Hi Sivateja,
Thanks for you explanation. it is really good to learning AngularJS this way.
I have some clarification on controller. How we can handle multiple controller in the single page
Regards,
Andrews S
Hi sivateja,
Every day i visit your website to find some more angularjs explanation ,examples and tutorials, please upload it, like me many people are waiting for it indeed.
Hi sivateja,
This is good website, i learned more from your site. I would like to know how to upload image in angularjs.
very informative
Hi Sivateja,
Your Explanation for each line is too good.