Get all updates of Java4s
Follow Us: Email Newsletter

AngularJs Hello World Example

AngularJs » On Nov 10, 2014 { 12 Comments } By Sivateja

Hi there, lets see how to write a Hello World example in AngularJs.  As this is the first Angularjs example i will make it as simple as possible for you :-)  For creating AngularJs applications we need to include the related .js file(s) in our application, just like jQuery.  We can include angular related .js files in 2 ways.

  • Go to  > click on Download > Copy the CDN URL  and use it in the application.
  • Or you can download that .js file into your local folder and include it

Open notepad > copy & paste the below source code and save it as .html file > finally open that .html file in your browser and check the output, how simple AngularJs ;)


  • Firstly we should include AngularJs related .js file(s) into our application [ that’s what i did in line number 13 ]
  • Come to the coding,  in line number 7, i have given ng-app attribute to the body tag, ng-app is the angularjs directive [i will explain more about angular directives later, for now just remember its a directive ]. ng-app specifies the starting point of angular flow, i mean it tells the DOM from that point angularjs related code will be started.
  • In line number 10, i have used one more attribute ng-model with value ‘helloWorld’, the main purpose of ‘ng-model’ is it will bind the state of the input text box into ‘helloWorld’, i mean what ever we write in that text box will be saved in ‘helloWorld’.  For example if i write ‘Java4s’ in that text box, actually it will be helloWorld = Java4s
  • In the same line i have written {{ helloWorld }}, i mean helloWorld in the curly braces, which means angular will bind the model value (helloWorld = Java4s, here helloWorld is the model value which is assigned with Java4s) in place of {{helloWorld}}, confused ? Ook :-)  in normal words what ever you have written in the text box will be displayed in place of {{helloWorld}}
  • That’s it, you have successfully executed first Angularjs application.


The following points may put you in the confusions, but it would be better if you aware of all these basics.

  • The basic syntax of Angular directive is, ng-xxxx = ‘value/name’
  • There might be few scenarios where we will not specify ‘value/name’ to the directive, in those situations we can write the directive as ‘ng-xxxx‘ or ng-xxxx=””
  • For example in the above program line number 7 i didn’t assign any value to ‘ng-app’ directive, why ?
  • Generally ng-app=’our module name, for that created module we will add controllersfilters, services bla bla..etc. As this is our first example, i am not using any controllers, filter kind of things, because of that reason we no need to create any module,  so i have not assigned module name to ng-app
  • Remember: If you give any name to ng-app [ng-app=”myModuleName”] then you should create a module with that name, if not application will not work

Have you understood the last point ? :-) no worries i will explain more in detail in the next tutorial.


Click here to check the output of the above example

You Might Also Like

  ♦ About Author ♦

Full Stack( Java/J2EE & UI/UX ) Developer and founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog. Sign-up for the Email Newsletter for your daily dose of Java tutorials.


12 Responses to “AngularJs Hello World Example”
  1. Thanks for lesson & I hope that Angular will be so simple and in the next lessons :-)

  2. sreddy says:

    please provide all types of scenarios and database support

  3. Yuvaraj says:

    Nice explanations…great

  4. Kiran P says:

    Plain & Simple.. (y) Pls add some more tutorials abt Angular Js..

  5. Venkatesh says:

    Good example…..Please provide entire Angular Js material..

  6. azhar says:

    Nice explanation, please provide JS example on callback and other stuffs.,.

  7. varun says:

    nice explanation

  8. Anonymous says:

    nice pose in dp.

  9. Abhishek says:

    Please, bro upload more tutorials on Angular JS.
    You are doing great work. God bless you. God give you happiness.

  10. raksh says:

    sir please provide all the information related to angular js ,spring ,hibernet
    we need all the concepts.please are number one who gives clean and neat explanation

  11. Dharma says:

    Thank you so much siva for providing some good articles which are really helping us. please post some more explanations on Angular JS.


By posting your answer, you agree to our comments policy.
What would you like to learn today?
Browse these popular technologies
Hibernate spring struts Servlets ajax Log4j jQuery Json Core Java Web Services AngularJs
Most Recent Tutorials
Hibernate_Logo Hibernate Recent Posts Spring_Logo Spring Recent Posts Struts_Logo Struts Recent Posts
Useful Links Current & UpComing Tutorials
  Web Services [ SOAP ], JSP
Contact | About Us | Privacy Policy | Advertise With Us

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