a blog for those who code

Friday 26 December 2014

Creating Basic AngularJS Application : Hello World

In our previous post we have gone through the Introduction to AngularJS. In this post we will kick start our AngularJS journey by writing a simple AngularJS Application. As all programming language start their example by creating a "Hello World" program, so we will also create a Hello World AngularJS application.


<!DOCTYPE html>
<html>

<body ng-app>
<input type="text" ng-model="world">
<h1> Hello {{ world }}</span></h1>
<script       src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

</body>
</html>

In the above code we have used a directive ng-app, which is important in AngularJS. It actually defines the scope of your application that AngularJS can understand. It can be used either on the html tag or with the body tag if scope of AngularJS is to the extent of the body. We have also used a directive ng-model with input fields thus directing AngularJS to store the value that the user types into the field into the variable called world.

Next we have included the AngularJS source code <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> directly from the Google Hosted Libraries, but you could also have your own local version.

In our code we are also used {{ }}, which is nothing but AngularJS default delimiter for expression boundaries. Instead of {{ }} we can also use <span ng-bind="world"></span>, both does the same thing (putting the value of the variable name inside the tag and keeping it up to date if it changes).


Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment