Newsletter

AngularJs Controller Example, Controllers in AngularJs

AngularJs »on Nov 17, 2014 { 5 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

app.js

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
- Full Stack Java/J2EE & UI Web 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

5 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

Name*
Mail*
Website



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

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