Let’s write the Classic Hello World in AngularJS. In this simple application, user provides input via an input field, and as the user is typing in this input field, the UI gets updated with the latest value from input field. Let’s get going.
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
<label>Name :</label><input type="text" ng-model="name" placeholder="Enter your name"/>
<h1>Hello <span ng-bind="name"></span></h1>
<h1>Hey {{name}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">
</script>
</body>
</html>
Save above file as html, and open it. You will see something like shown below.
Live Demo
We are doing many things here.
1) Load AngularJS source code :
We need to load the AngularJS source code, which can be found with google hosted libraries. You may prefer to download and keep it in your project locally. You may also prefer to load in head section instead of body(as we did here).
2) Bootstrap AngularJS:
An AngularJS application is bootstrapped using ng-app directive. This is THE MOST IMPORTANT directive in AngularJS. It refers to the part of your HTML which will be controlled/managed by AngularJS. In this example, we have used it on html tag, that means AngularJS will control the whole html. You can also put this tag on a specific element. In that case, only that element and it’s child elements will be controlled by AngularJS. Anything outside will remain inaccessible to AngularJS.
3) Data binding:
Look at input tag, it has an AngularJS directive called ng-model. The ng-model directive is used with input fields to get access to the user input into JavaScript variables. Here, we tell AngularJS to store the value that the user types into this field in a javascript variable called name.
– We have also used another directive called ng-bind. ng-bind and the double-curly notation {{ }} are almost same and can be used interchangeably, as we used above. ng-bind & {{variable }} notation are used to get the value from the variable referred by ng-model and display that value in the tag ng-bind is applied on [or on the place {{ variable }} is used], and keeping the value up to date if it changes. This is known as one-way data-binding, where we take data coming from any source (key-in by user, from server), and update the DOM instantly.
Now, whenever the model[means DATA] changes (for example user typed something), Angular’s data-binding will cause the view [ with ng-bind or {{}}] to automatically update. No manual DOM manipulation is required.
If we were to implement same functionality with Jquery, we would be using watchers and listeners to accomplish the same thing. With AngularJS, we didn’t even write one line of javascript here. All that boilerplate code is handled by AngularJS, and we are left with focusing on our application look n feel and business logic. That’s the power of AngularJS.
If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help improve further our learning process.