AngularJS Hello World Example [Latest]

AngularJS Hello World

What is AngularJS?

AngularJS is a client-side JavaScript framework developed by Google for adding interactivity to HTML. AngularJS is the best choice, if you want to create a responsive, easy to organize, easily testable and maintainable web application.

AngularJS is self-proclaimed as the super-heroic MVW framework. You might be wondering, what does it stands for? Model View Whatever, here whatever stands for “whatever works for you“! Angular comes with a complete client side solution to satisfy your requirements. We will walk through all the features of angular in this set of tutorials.

Prerequisites

We assume that you are very familiar with the following:

If you are not familiar with any of these technologies, we recommend you to learn HTML, JavaScript and CSS before going through the AngularJS tutorials.

Why AngularJS?

• Helps to build well structured applications in a modular fashion.
• Helps to create responsive web applications.
• Best implementation of MVC architecture.
• Write less code.
• Powerful and flexible.
• Easy to learn.
• Handles dependencies.
• Easily integrate with other technologies.
• Easy to test and maintain.

Core Features of AngularJS

The following table illustrates the core features of AngularJS.

This table briefly mentions the core features of AngularJS framework. We will explain these features in detail in the coming posts.

Download AngularJS

You can download AngularJS from the official web site by following this link Download.

You will see a page similar like this and hit download.

There are two branches available for download. Legacy version, the stable version and Latest version, the unstable version of AngularJS. You can select any of the minified, uncompressed or zipped versions of angular. You can also find the CDN of the latest angular version in the image shown below.

We will go with the stable and minified version of angularJS. Click on the download button and save the file in your folder.

Include AngularJS

You have to include the downloaded JavaScript file (angular.min.js) in the HTML document to use angularJS.

The following HTML shows how to include angular.min.js.

You can also use the CDN but make sure to check with the angularJS website for the latest version.

AngularJS Hello World Example

Now we are going to write our first AngularJS application. We have gone through the following steps to create our first Angular application:

1. First step is to Include angularJS file in the HTML document. You can use angular.min.js or the CDN.
2. Second step is to indicate the active portion of angular application. The directive ng-app   tells the Angular which part of our document belongs to the angular application.
3. The directive ng-model and ng-bind is to bind the input text value to the specified HTML
   element. We will explain these concepts in the coming posts. For now, just say hello to your first angular application.

You will see the following output on your browser. The entered text will be displayed below the input box as you type.

The ng-bind directive tells Angular to replace the text of the element with the given value , and  it is updated  with change in the value of that expression.

Typically, we do not use the ng-bind directive directly in our document. We wrap the model value in double curly braces like {{some-expression}}. The following example demonstrates how the model value is wrapped inside the double curly braces. You will see the same result in your browser.

You will see the following output on your browser. The entered text will be displayed below the input box as you type.

This is your first angular hello world application. I hope you got a brief idea about the angular directives like ng-app, ng-model and ng-bind. We will give you a detailed explanation of all the core features of angularJS in this series of angular tutorials.