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 https://angularjs.org 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
Your Name: <input type="text" ng-model="yourname">
<br />
<h2>Hello {{yourname}}</h2>
</body>
</html>

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

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

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

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 = "ravi_meheta@infosys.com";
});

Example of AngularJS MVC Design Pattern

<!DOCTYPE html>
<html ng-app="demoApp">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="empController">
Name: <input type="text" ng-model="name"><br>
Email: <input type="text" ng-model="email"><br>

Welcome Message: {{ welcomeMsg() }}
</div>
<script>
var demoapp = angular.module('demoApp', []);
demoapp.controller('empController', function($scope) {
$scope.name = "Ravi Meheta";
$scope.email = "ravi_meheta@infosys.com";
$scope.welcomeMsg = function() {
return "Welcome to " + $scope.name + ". Email ID you submitted is " + $scope.email;
}
});
</script>
</body>
</html>

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.