Newsletter

AngularJs Hello World Example

AngularJs » on Nov 10, 2014 { 14 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 angularjs.org  > 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 😉

<!DOCTYPE html>
<html>
 <head>
    <title>AngularJS Hello World Example - Java4s.com</title>
 </head>

<body ng-app>

  <font size="2" face="verdana"> 
      Name: <input type="text" ng-model="helloWorld" /> {{ helloWorld}}
  </font>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 

</body>
</html>

Explanation

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

Important

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.

Demo

Click here to check the output of the above example

​​

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

14 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 sir.you 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.

  12. Narendra says:

    Please upload Angular 2 Tutorials

  13. Amar says:

    Thank you Siva, I hope next tutorial will be Anguler 6+. Which is very hot technologies in market.

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.