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 .::

Java4s_Author
Sivateja Kandula - Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

6 Responses to “AngularJs Controller Example, Controllers in AngularJs”
  1. lechu says:

    Hi Sivateja,

    Your way of explanation is too good.

    Could you please provide tutorial for jBPM?

  2. Andrews Savariantony says:

    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

  3. asif says:

    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.

  4. sureshchandra says:

    Hi sivateja,

    This is good website, i learned more from your site. I would like to know how to upload image in angularjs.

  5. johny premkumar says:

    very informative

  6. Prajna Panda says:

    Hi Sivateja,

    Your Explanation for each line is too good.

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2024 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.