AngularJS Hello World Example

Filed Under: AngularJS

Welcome to AngularJS Hello World example. We are very glad to start our journey to the Super-heroic MVW framework AngularJS, commonly referred to as Angular. We will cover all the features of AngularJS through this series of tutorials.

AngularJS Hello World

angularjs logo

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:

  • HTML
  • JavaScript
  • CSS

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.

Core Features Description
Template Templates are HTML with new markups.
Compiler This is used to parse the templates and then instantiate directives and expressions.
Directives Adds behavior to HTML with custom attributes and elements.
Expressions Allows reading and writing variables and functions in a scope.
Filter Filters the value of expressions.
Scope Context where the model is stored. Expressions, directives and controllers can access it.
Model This is where the user interacts with and the data is shown to the view.
View This is the output. This is what user sees.
Data Binding Sync data between model and view.
Controllers We define our business logic for views as controllers. This controls the data flow in our application.
Dependency Injection Deals with how objects and functions get created and wired.
Injector Dependency injection container which is used to inject any value, factory, services to each other.
Module Container for the directives, controllers, services, filters, which configures the Injector.
Services This supports the “Separation of Concerns” concept. These are reusable components.

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

angularjs hello world example

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.


<!doctype html>
<html>
   <head>
       <script type="text/javascript" src="angular.min.js"></script>
   </head>
   <body>
   </body>
</html>

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


<!doctype html>
<html>
   <head>
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
   </head>
   <body>
   </body>
</html>

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.

<!DOCTYPE html>
<html lang="en">
<title>AngularJS First Application</title>

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

<body>
<div ng-app>

   <p>Enter Some text : <input type="text" ng-model="someText"></p>
   <p>Hello <span ng-bind="someText"></span>!</p>

</div>
</body>
</html>

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.


<!DOCTYPE html>
<html lang="en">
<title>AngularJS First Application</title>

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

<body>
<div ng-app>

   <p>Enter Some text : <input type="text" ng-model="someText"></p>
   <p>Hello {{ someText }}!</p>

</div>
</body>
</html>

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.

Comments

  1. Hadiya Barakahea says:

    Hey,

    This is Hadiya Barakahea from Sharjah UAE,

    I have hired developer recently for website and the team of developers forced me to let us create my site frontend using Angularjs I was confused that website designing agencies UAE usually create sites with bootstrap for frontend that is why we were confused then we agreed to have site frontend with Angularjs but after website creation now our site is working smoothly I really like node site mean I want other to have site with Angularjs not bootstrap which is kinda old technology what you think?

    Thanks
    Hadiya

  2. JOHNYBASHA SHAIK says:

    Thanks for this great tutorial. Could you please take some time to create an index page for this angularJs tutorial?
    Thanks in advance.

  3. Chintoo says:

    Hi Pankaj,

    Thanks for the great tutorials. Could you pls guide me on how to integrate AngularJS to a Spring MVC project.

  4. Krish says:

    Thanks Pankaj.Your tutorials are awesome.Can I develop this without deploying in an App Server or Web Server?

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages