AngularJS Tutorial For Beginners: Getting Started – Tutorials Learn AngularJS Step by Step

Hello developers, As you all know that AngularJS is a java scribe framework used for building MVC-based web applications. 

Here in this article, you will get to know about the basic step-by-step guides so that you can learn AngularJS.

AngularJS is one of the most powerful JavaScript Frameworks. So read the full article because this article is for beginners only.

So let’s get started with the AngularJS Tutorial For Beginners.

What is AngularJS?

In very simple and precise words AngularJS is a Java Framework used for creating MVC Based web applications.

It is used for Dynamic web apps and it lets you use HTML as your template, and also lets you stretch HTML’s syntax so that you can express the components of your application.

AngularJS is one of the best Java frameworks which easily understandable.

When AngularJS Came into Picture?

Originally, AngularJS was developed in 2009 by Misko Hevery at Brat Tech LLC. 

But then in 2010 AngularJS came into the picture. It was the time of October when it first appeared on Github with version 0.9.0.

Then on 14th June 2014, the AngularJS version 0.9.0 was evolved into version 1.7.8. But still, something was missing from it. 

Then again on September 14, 2016, it was re-introduced with a new name known as Angular 2. That was completely different from its previous versions and was based upon the new ECMAScript version 6 specifications. 

After that many versions were introduced like Angular 4, 5, 6, 7 and it’s currently on version 8 with the features like:

Bazel Support, Routing, Workspace API, and many more.

Some Tutorials

#1) AngularJS Dependency Injection

AngularJS shows up with many dependency injections or we can say dependency injection mechanism. In a very simple term,

It allows you to divide your application into multiple types of components and they can be installed into each other as a dependency. If Also you want to know about Free AngularJs Hosting 2024: Host Angular App For Free.

Basically, there are 5 types of components

All of the 5 components can be installed using AngularJS dependencies.

1. Value

//define a module  
var myModule = angular.module("myModule", []);  
//create a value object and pass it a data.   
myModule.value("numberValue", 100);  
myModule.value("stringValue", "abc");  
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

2. Injecting a value

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});  

3. Factor

var myModule = angular.module("myModule", []);  
myModule.factory("myFactory", function() {  
    return "a value";  
});  
myModule.controller("MyController", function($scope, myFactory) {  
console.log(myFactory);  
});  

4. Injecting values into factory

var myModule = angular.module("myModule", []);  
myModule.value("numberValue", 100);  
myModule.controller("MyController", function($scope, numberValue) {  
 console.log(numberValue);  
});

5. Service

//define a module  
var mainApp = angular.module("mainApp", []);  
...  
//create a service which defines a method square to return square of a number.  
mainApp.service('CalcService', function(MathService){  
   this.square = function(a) {  
      return MathService.multiply(a,a);   
   }  
});  
//inject the service "CalcService" into the controller  
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
   $scope.number = defaultInput;  
   $scope.result = CalcService.square($scope.number);  
    $scope.square = function() {  
      $scope.result = CalcService.square($scope.number);  
   }  
});

6. Provider

//define a module  
var mainApp = angular.module("mainApp", []);  
...  
//create a service using a provider which defines a method square to return the square of a number.  
mainApp.config(function($provide) {  
   $provide.provider('MathService', function() {  
      this.$get = function() {  
         var factory = {};    
         factory.multiply = function(a, b) {  
            return a * b;   
         }  
         return factory;  
      };  
   });  
});  

7. Constants

<!DOCTYPE html>  
<html>  
   <head>  
      <title>AngularJS Dependency Injection</title>  
   </head>  
   <body>  
      <h2>AngularJS Sample Application</h2>  
        
      <div ng-app = "mainApp" ng-controller = "CalcController">  
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>  
         <button ng-click = "square()">X<sup>2</sup></button>  
         <p>Result: {{result}}</p>  
      </div>  
        
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
        
      <script>  
         var mainApp = angular.module("mainApp", []);  
           
         mainApp.config(function($provide) {  
            $provide.provider('MathService', function() {  
               this.$get = function() {  
                  var factory = {};  
                    
                  factory.multiply = function(a, b) {  
                     return a * b;  
                  }  
                  return factory;  
               };  
            });  
         });  
              
         mainApp.value("defaultInput", 10);  
           
         mainApp.factory('MathService', function() {  
            var factory = {};  
              
            factory.multiply = function(a, b) {  
               return a * b;  
            }  
            return factory;  
         });  
           
         mainApp.service('CalcService', function(MathService){  
            this.square = function(a) {  
               return MathService.multiply(a,a);  
            }  
         });  
           
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {  
            $scope.number = defaultInput;  
            $scope.result = CalcService.square($scope.number);  
  
            $scope.square = function() {  
               $scope.result = CalcService.square($scope.number);  
            }  
         });  
          </script>  
      </body>  
</html> 

#2) Model View Controller

AngularJS regulators are utilized to control the progression of information of AngularJS Applications.

A regulator is characterized utilizing ng-regulator order. Do you want to know about Angular Vs AngularJS – A Complete Comparison Guide 2024.

A regulator is a JavaScript object containing credits/properties and capacities. Every regulator acknowledges $scope as a boundary that alludes to the application/module that the regulator is to control.

AngularJS Controller Example(easy)
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="myCtrl">  
  
First Name: <input type="text" ng-model="firstName"><br>  
Last Name: <input type="text" ng-model="lastName"><br>  
<br>  
Full Name: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.firstName = "Aryan";  
    $scope.lastName = "Khanna";  
});  
</script>   
</body>  
</html>

AngularJS controller with example and methods  
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" ng-controller="personCtrl">  
  
First Name: <input type="text" ng-model="firstName"><br>  
Last Name: <input type="text" ng-model="lastName"><br>  
<br>  
Full Name: {{fullName()}}  
  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
    $scope.firstName = "Aryan";  
    $scope.lastName = "Khanna";  
    $scope.fullName = function() {  
        return $scope.firstName + " " + $scope.lastName;  
    };  
});  
</script>  
</body>  
</html>  

#3) Two-way Data Binding

Data binding is one of the most powerful and useful features of AngularJS used in software development. It works as a bridge between the view and business logic of the application.

One Way Data Binding

In one way binding, data model is inserted in an HTML element.

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="" ng-init="firstName='Ajeet'">  
<p>Input something in the input box:</p>  
<p>Name: <input type="text" ng-model="firstName"></p>  
<p>You wrote: {{ firstName }}</p>  
</div>  
</body>  
</html>  
 
<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div data-ng-app="" data-ng-init="quantity=1;price=20">  
<h2>Cost Calculator</h2>  
Quantity: <input type="number" ng-model="quantity">  
Price: <input type="number" ng-model="price">  
<p><b>Total in rupees:</b> {{quantity * price}}</p>  
</div>  
</body>  
</html>

#5) Controlling The Behavior of DOM Elements

ng-disabled directive:
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button  
button ng-disabled = "enableDisableButton">Click Me!</button>
ng-show directive:
<input type = "checkbox" ng-model = "showHide1">Show Button  
button ng-show = "showHide1">Click Me!</button>
ng-hide directive:
<input type = "checkbox" ng-model = "showHide2">Hide Button  
<button ng-hide = "showHide2">Click Me!</button>
ng-click directive:
<p>Total click: {{ clickCounter }}</p>  
lt;button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>  
 
Below you will see the example to deploy  all of the above directives. 
See this example:
<!DOCTYPE html>  
<html>  
<head>  
      <title>AngularJS HTML DOM</title>  
</head>  
<body>  
      <h2>AngularJS Sample Application</h2>  
      <div ng-app = "">  
           <table border = "0">  
            <tr>  
               <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>  
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>  
            </tr>  
            <tr>  
               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>  
               <td><button ng-show = "showHide1">Click Me!</button></td>  
            </tr>  
             <tr>  
               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>  
               <td><button ng-hide = "showHide2">Click Me!</button></td>  
            </tr>  
             <tr>  
               <td><p>Total click: {{ clickCounter }}</p></td>  
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>  
            </tr>  
         </table>  
         </div>  
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
</body>  
</html> 

Features of AngularJS

MVC Architecture

In the AngularJS Tutorial for Beginners, application design, the Model view controller style is supported. Although you have a lot of flexibility, you will always have some flavor of a:

1. Model, containing data to represent the state of your application. 
2. Views that display this data.
3. Controllers that manage the relationship between your model and your views

However, these concepts are a little bit abstract, and this pattern may have different implementations on the basis of the language, platform and purpose of application.

Expressions In AngularJS

AngularJS Numbers
<p>Expense on chips : {{cost * quantity}} Rs</p>

AngularJS Strings
<p>Hey {{student.firstname + " " + student.lastname}}!</p>

AngularJS Objects
<p>Roll No: {{student.rollno}}</p>

AngularJS Arrays
<p>Marks(computer): {{marks[3]}}</p>

AngularJS Filters
{{ arrayexpression | filter : expression : comparator : anyPropertyKey }}

How to Setup the Environment to Work with AngularJS?

Your First Application

The procedure to set up AngularJS Tutorial for Beginners is quite simple, in order to set up the framework, you should start importing the angular.js script to our HTML file. After that, you need to create the application module by calling the module function from the angular’s API.

The already created module needs to place the ng-app attributes with the module’s name inside the HTML element or any other element that surrounds the application. This attribute is important because it supports the initial process of the framework.

Conclusion

With the help of examples, you learned AngularJS and this guide is for AngularJS Tutorial for Beginners only so I hope this article helped you and you will see more tutorials like this on our page.

There are a lot of frameworks like angularJS that allow us to create great and well-designed web applications. We introduced you to the basic concept of AngularJS.