Best way for beginners to learn AngularJS with Examples

Best way for beginners to learn AngularJS with Examples

Before Getting Started with this knowledge sharing session first let me know “Are you one among them who is interested to learn AngularJS?” if so you are in the correct page. Here my intention is to teach you AngularJS Programming from the the scratch. AngularJS is an open source advanced JavaScript framework. It was first introduced in 2009 by two developers “Adam Abrons” & “Misko Hevery” from Google. Later by looking into it’s brilliant features & growing demand AngularJS is finally take over by Google. In 2012 the first version of AngularJS get released.

Why AngularJS is more popular compare to other Frameworks?

As a developer this question comes in to mind when many times you heard the term AngularJS. In replay I can say there are many key features AngularJS introduced compare to other Frameworks like ember.js or backbone.js which made AngularJS so popular. I know you are a beginner to AngularJS but still let you note down the key features.

  • AngularJS supports Single page Application Design.
  • MVC & MVVM both Design pattern supported by AngularJS.
  • In-built Directives & facility to create Custom Directives.
  • AngularJS Handles Dependencies.
  • AngularJS helps to extend HTML Vocabulary.
  • Parallel Development supports by AngularJS.
  • AngularJS supports JSON.
  • Two way Data binding.
  • Supporting Ajax.

Getting Started with AngularJS Programming

To start your first “Hallo World!” program in AngularJS you need to download the AngularJS library from or even you can use AngularJS library CDN link. To get an idea about your first AngularJS app look at the example below.

Example of my first AngularJS app

<!DOCTYPE html>
<html ng-app="">
<script type="text/javascript" src=""></script>
Your Name: <input type="text" ng-model="yourname">
<br />
<h2>Hello {{yourname}}</h2>

In the above Example for demo purposed I used AngularJS CDN link. Do mark one thing in html tag I used an additional tag ng-app. This is an AngularJS Directive. To make the HTML know that we are using AngularJS ng-app is responsible. From this example if you will remove ng-app from html tag this app will not run. Like ng-app one more AngularJS directive ng-model which I used in body tag to display your name from input box to inside h2 tag. Similar to ng-app or ng-model AngularJS provides many useful Directives. For Beginners later in this session I will explain you some of the most used AngularJS directives. One more thing I want to tell you about our first AngularJS app is to display value in HTML AngularJS uses {{ … }} this Syntax.

Model, View & Controller (MVC) in AngularJS

In software industry Codes are the Property. To maintain Codes well in a structured way there are several design patterns. Among them popular design patterns are MVC (Model View Controller) & MVVM (Model View View Model). AngularJS Programming supports both these design patterns. For Beginners let us explorer AngularJS MVC design pattern in below.


Model supply data to view. Always the Current states of application reflects in Model layer. While creating a model in AngularJS it can be string, number, boolean or object data type. The syntax we use is var myModule = angular.module('myApp', []);.


View is nothing but the part user watch. To display data from the Controller we need to put AngularJS expression in view. As AngularJS supports two way data binding there is a continuous communication between view & model. Where templates just pointing to View.


Controller is the area where we do implement application business logic. Refer to it’s name it act like a junction point between Model & View. In AngularJS controllers are inside model. To create a controller we the following syntax.

var myApp = angular.module('myModel', []);
myModel.controller('myController', function($scope) {
$scope.Name = "Ravi Meheta";
$scope.Email = "";

Example of AngularJS MVC Design Pattern

<!DOCTYPE html>
<html ng-app="demoApp">
<script src= ""></script>
<div ng-controller="empController">
Name: <input type="text" ng-model="name"><br>
Email: <input type="text" ng-model="email"><br>

Welcome Message: {{ welcomeMsg() }}
var demoapp = angular.module('demoApp', []);
demoapp.controller('empController', function($scope) {
$ = "Ravi Meheta";
$ = "";
$scope.welcomeMsg = function() {
return "Welcome to " + $ + ". Email ID you submitted is " + $;

The above Code is an example of how to implement AngularJS MVC pattern. In this example I created “demoApp” as my model, inside this I have a Controller “empController”. empController contains two objects name & email of employee with a function welcomeMsg(). Now I think you got the idea how to write function in AngularJS Controller. The tricky thing here is $scope. Let us discuss about this in Details.

$scope in AngularJS Controller

$scope acts like a glue between controller & view. I mean which property or method is a part of the $scope object that is accessible in view. In $scope object you can define JSON formatted data & it can be used in view. Look at this example “How to bind JSON data from AngularJS Controller to View?“, it will clear your fundamentals.

How to call AngularJS function in an event?

During event driven programming we need to intact with an event to execute some of our functions. Let us look at the example below how to call a function with an event of AngularJS. There are many events provided by AngularJS. To show you a demo here with I am presenting one example of “ngClick” for click event. Similar to this you can implement all events in AngularJS.

<div ng-app="demoApp" ng-controller="empController">
<button ng-click="showhide()">Show Hide the below panel</button>
<p ng-show="booleanVar">
Name: <input type=text ng-model="employee.Name"><br>
Email: <input type=text ng-model="employee.Email"><br><br>
Welcome Message: {{ employee.Name + " " + employee.Email}}
<script type="text/javascript">
var app = angular.module('demoApp', []);
app.controller('empController', function($scope) {
$scope.employee = {
Name: "Rakesh Srivastab",
Email: ""
$scope.booleanVar = true;
$scope.showhide = function() {
$scope.booleanVar = !$scope.booleanVar;

To read about more events in AngularJS please refer

Few most used AngularJS Directives

ng-init – We are generally use this directive to initialize the value. Let take an example where I want to show some name in the text field after page loading, in this case ng-init is effective.

<div ng-app="" ng-init="Name='Biswabhusan'">
<p>Name: <input type="text" ng-model="Name"></p>
<p>Initial Value You Declared: {{ Name }}</p>

ng-model – Directive ngModel is helpful to bind an input, select or textarea from the property of scope using NgModelController. Using ngModel we can bind view to the model. In AngularJS ngModel is effective to implement form validations. During page navigation ngModel directive helps to maintain state of the control.

ng-repeat – ng-repeat act like a loop. Let take a situation where you want to show list of your customers name in a ul element. In this case ng-repeat fetch data from $scope object & bind this data in a loop. Look at this example “Use of ng-repeat Directive.“.

ng-view – ng-view works like a container. Using routing & ng-view you can achieve Single page Application design in AngularJS. I have a beautiful example for you to show you how ng-view works. Look at this Example of using ng-view with AngularJS routing.

ng-show & ng-hide – This both the directives used to show or hide contents depending upon conditions. Watch this example How I used AngularJS directive ng-show & ng-hide?.

ng-if & ng-switch – Like other programming languages AngularJS provides if & switch case for conditional statements. If you have less than 5 to 6 conditions you can use ng-if else prefer to use ng-switch. To learn more about how to handle conditional statements in AngularJS look at the example “Using Switch case in AngularJS“.

The above lesson will give you the basic idea to start with AngularJS programming. To learn more you can refer our Examples.