| Newsletter |
AngularJs Hello World Example
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 controllers, filters, 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 .:: | ||
 | ||
Thanks for lesson & I hope that Angular will be so simple and in the next lessons 🙂
please provide all types of scenarios and database support
Nice explanations…great
Plain & Simple.. (y) Pls add some more tutorials abt Angular Js..
Good example…..Please provide entire Angular Js material..
Nice Article.
Nice explanation, please provide JS example on callback and other stuffs.,.
nice explanation
nice pose in dp.
Please, bro upload more tutorials on Angular JS.
You are doing great work. God bless you. God give you happiness.
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
Thank you so much siva for providing some good articles which are really helping us. please post some more explanations on Angular JS.
Please upload Angular 2 Tutorials
Thank you Siva, I hope next tutorial will be Anguler 6+. Which is very hot technologies in market.