You are currently viewing AngularJS Tutorial For Beginners: Getting Started – Tutorials Learn AngularJS Step by Step
AngularJS Tutorial for Beginners

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 Tutorial for Beginners: AngularJS is a Java Framework used for

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.

AngularJS Tutorial for Beginners: Mistakes That Developers Make

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 2021: Host Angular App For Free.

Basically, there are 5 types of components

  • Value
  • Factor
  • Service
  • Provider
  • Constant

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

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.

AngularJS Tutorial for Beginners: One Way Data Binding
<!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

DirectiveDescription
ng-disabledIt disables a given control.
ng-showIt shows a given control.
ng-hideIt hides a given control.
ng-clickIt represents an AngularJS click event.
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

AngularJS Tutorial for Beginners: Features of AngularJS

1. The MVC Framework:

This framework supports most of the modern web applications and the pattern is based on splitting the business logic layer, the data layer, and the presentation layers.

2. HTML User Interface:

A hypertext markup language is one of the most basic and most used markup languages available on the planet.

3. Access to the POJO Model

AngularJS supports Plain Old Java Object and also not bound with any restrictions like other language specifications.

4. Behaviour with Directives

Directives strengthen the developer’s online presence by giving them feature-rich HTML code and enhance its functionality.

5. Filtering

Subsequently, a new array is created that contains just the items selected in the previous array.

6. Templates

Templates in angular applications are similar to HTML documents that we load from the server or defined in <script> tags like any other static resources.


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.

Directives

Directives in AngularJS are special attributes that begin with the prefix ng and extend HTML.

ng-app directive

An AngularJS application is started with an ng-app directive, which defines the root element and bootstraps it automatically when the web page containing AngularJS Application loads. It is also used to load AngularJS modules into AngularJS Applications.

ng-init directive

Initializes the AngularJS application data by assigning values to its variables through the ng-init directive.

ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Application.

ng-repeat directive

ng-repeat directive repeats HTML elements for each item in a collection.


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.

Limitations of AngularJS

1. Being a JavaScript framework only, AngularJS applications are not secure. Server-side authentication and authorization must be used to keep AngularJS applications safe.
2. In difficult cases, not even the basic page would be visible if the user disables JavaScript.


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.

AngularJS Tutorial for Beginners

This Post Has One Comment

  1. wow bosting

    Hi, I think that I saw you visited Your website thus I came to “return the favor”.I am trying to find things to improve my website! I suppose it’s ok to use some of your ideas!!

Leave a Reply