AngularJS Tutorial – Comprehensive Beginner Tutorial

By | September 11, 2016

AngularJS Tutorial for Beginners : AngularJS tutorial is a comprehensive guide to help beginners understand how to learn AngularJS. This post covers different concepts, examples and videos in AngularJS with Video series after each topic. Users will be able to understand concepts easily after following video series. After following AngularJS tutorial you will be able to use the different concepts in the projects.

angularjs getting started step by step video

AngularJS tutorial

AngularJS is a MVC framework created by Google, it is open source framework to build dynamic web applications. The main reason why AngularJS is so popular is because it blends concepts of Javascripts and server side languages to add dynamic features to HTML.

Check out the video to understand why AngularJS is used and how to learn AngularJS.

Once you are done with the introduction we will write our first basic Hello World program in AngularJS. In this video you will learn which script we need to embed to use the features provided by AngularJS

Hello World in AngularJS

Code example


<!doctype html>
<html lang="" ng-app="" />
 <head>
 <title>My First Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 
 </head>
 <body>
 
 <p> Hello world</p> <br/>
 <input type="text" ng-model="name"> <br/>
 welcome {{ name }} to first angular js tutorial

 </body>
</html> 

After hello world program, we will check directives in AngularJS. To understand what is ng-directive follow the video tutorial below.

ng directive in AngularJS

Code example for ng directive


<!doctype html>
<html lang="" ng-app="" />
 <head>
 <title>My First Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 
 </head>
 <body>

 <div ng-init="countries=[{name:'India', capital:'new delhi'},{name:'USA', capital:'Washington'}]">
 
 <p ng-repeat="country in countries">
 
 {{ country.name }}
 {{ country.capital}} 
 </p>

 </div>

 </body>
</html>

After checking ng directive we will check ng-bind, ng-model and express. All the three concepts are equally important and commonly used.

ng model, ng-bind and Express in AngularJS

Code Example

<!doctype html>
<html lang="" ng-app="" />
 <head>
 <title>My First Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 
 </head>
 <body>


 <input type="checkbox" ng-model="click">

 <h1 ng-show="click">TechPlugg</h1>

 </body>
</html>

Now we will check another important concept that is ng repeat. Lets check the video to understand ng repeat in AngularJS.

ng repeat in AngularJS

Code Example


<!doctype html>
<html lang="" ng-app="" />
 <head>
 <title>My First Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 
 </head>
 <body>

 <div ng-init="countries=[{name:'India',capital:'New Delhi'},{name:'UK',capital:'London'}]">
 
 <table border="1">
 <tr ng-repeat="country in countries">
 <td>{{country.name}}</td>
 <td>{{country.capital}}</td>
 </tr>

 </table>

 </div>

 </body>
</html> 

Now we will check another important concept in AngularJS that is ng controllers this feature is very commonly used. Lets check the video to understand more about controllers

ng controllers and scope in AngularJS

Code example


<!doctype html>
<html lang="" ng-app="mainApp" />
 <head>
 <title>My Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <script src="test.js"> </script>
 
 </head>
 <body>

<div ng-controller="testctrl">
 
 {{ name}}

 {{age}}

 {{profession }}
 </div>

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

var app = angular.module('mainApp',[]);

app.controller('testctrl',function($scope){


 $scope.name = 'SANGRAM';
 $scope.age = '22';
 $scope.profession = 'WEB DEVELOPER' 

});

After controllers and scope we will check simple concept of Filters in AngularJS

Filters in AngularJS

Code example


<!doctype html>
<html lang="" ng-app="" />
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</head>
<body>

<input type="text" ng-model="val">

{{ val | currency:"USD" }}

</body>
</html>


We will wrap up this basic AngularJS tutorial with ng show and ng hide concept.

ng show and ng hide in AngularJS

Code example

</p>
<!doctype html>
<html lang="" ng-app="" />
<head>
<title>My First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

</head>
<body>
<input type="checkbox" ng-model="click">

<h1 ng-show="click">TechPlugg</h1>

</body>
</html>
<p style="text-align: left;">