Angular Js In One Day [24 Hours] – Complete Guide For Beginners

Angular Js Features - Introduction

Angular Js Tutorial

AngularJs is one of my favorite client-side frameworks. I know there are a bunch of other client-side frameworks in the market. But, still, it the best framework for building small scale applications. The main reason which I love angular js is, it’s easier to set up and use.

In this tutorial, I will explain the concepts of Angular Js in a simple way.

So, let’s get started.

Why You Will Learn Angular Js?

I know, Google stopped updates of Angular Js. They are focusing on the angular framework which is completely different from Angular Js. But, still, you can you use it for your projects. Because it is best fits for single page applications. And it has a small learning curve.

If you compare Angular Js with any client-side framework, it is the only one which takes less time to set up and build applications. It’s all about one file to include on your web page.

It gives developers the ability to build interactive, user-friendly, and platform-independent web applications.

If you want to read more about why to we learn angular js in 2019, here is the article.

Why use AngularJS for your next web app?

Can We Learn In One Day?

Yes. You can learn. But, you can’t be a master. No one can be a master in anything in one day. It takes some time and practice to become perfect.

If you can’t learn in one day, you should learn as fast as possible. If you take a couple of months to learn you will be outdated. Because technology trends don’t stop for you. New technologies and frameworks are evolved day by day.

So, learn any framework as fast as possible.

The one thing I can make a promise to you is, if you follow this tutorial properly, you will learn Angular Js for sure. It doesn’t take much time to learn because it provides a flat learning curve. And If you focus, you can learn it in one day.

What is Angular Js?

Angular Js is an open source client-side framework developed by Google developers.

The framework built on MVC architecture to control the user data-flow.

The MVC stands for Model View Controller. In MVC, the model store’s the data, the view display’s the data, and the controller control’s the data.

It is the best framework for developing Rich Internet Applications(RIA) and Single Page Applications(SPA).

The main difference between the multi-page website and single page application is, in website user have to navigate from one page to another page. But, in SPA web pages are stored in the form of templates and updates the DOM without refreshing or navigating to the next page.

In Angular Js, you don’t have to update the user DOM programmatically. You can directly inject the data into views by writing expressions and directives.

Prerequisites:

Before going to this angular js tutorial, you should be familiar with the following technologies.

  1.  HTML and CSS
  2. Javascript.

Ok. Enough dragging. Open your favorite text editor and get ready to learn Angular Js.

Setup

AngularJs setup doesn’t require any tools and software to install. You just need to embed one file into your code.

You can embed the file by downloading or you can simply embed the CDN link also.

To download, go to the angularjs.org website. Click on the DOWNLOAD ANGULARJS button then you have downloaded the .zip file.

Extract the zip file and link the angular.min.js file into your code.

If you want to add CDN link, just copy the below link into your head section.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"> </script>

Throughout this Angular Js tutorial, I am going to teach you the following concepts. Take a look at the list.

Table of contents:

  1. Angular Js Application
  2. Angular Js Module
  3. Controllers
  4. Initializing the data in a view
  5. Expressions
  6. The $scope
  7. Directives
  8. Models
  9. Data-binding
  10. Two-way data-binding
  11. Angular Js Filters
  12. Angular Js Services
  13. The $http service

1.Angular Js Application

It’s so simple to create an Angular Js application. Just add the ng-app directive to any tag of your HTML page.

Once you add the ng-app directive to any tag, from the beginning of that tag to the ending of that tag will become an Angular Js application. You can add the ng-app directive to whatever tag you want. You can add it to <div> tag or <body> tag and even <html> tag.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="">
  <head>
    <meta charset="utf-8">
    <title> An Angular Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <h1>An AngularJs Tutorial</h1>

  </body>
</html>

Code Explanation :

  • In the above HTML file, Firstly, we added the CDN link of the Angular Js framework. It’s a Javascript library which brings the Angular Js functionality to our application.
  • Then we convert the complete HTML page into an Angular Js application by writing ng-app directive at the <html> tag.

If you write the ng-app directive at the <body> tag, the body tag will become the Angular Js application. Or, if you write at any of the <div> tag, the div tag will become an Angular Js application.

2.Angular Js Module

In the above example, we created an Angular Js application using the ng-app directive. But, the ng-app directive will only give the body and skin to your application. To bring the heart and soul to our application, we need to create a module.

A module is a place where the logic of an angular js application leaves. It’s a place to store the controllers, filters, services, factories … etc.

You can create a module using a function called angular.module( ).

It takes two parameters. The first one is the name of the module and the second one is an array. The array is to add dependent modules to our application.

See the example below, to create a module.

script.js

//creating app module
var app = angular.module('AngularApp',[]);

Code Explanation :

  • In the above code, we create a module using angular.module() function.
  • Here the AngularApp is the name of the module. And [ ] is the array to add dependent modules.
  • For now, we are not using any dependent modules. So, leave it as empty now.

Now, we have created an Angular Js application and module. But still, the logic of the module does not belong to the application. To make effect an Angular Js application by module, we need to sink both of them.

Firstly, add the script.js file to the head section of your HTML page. Secondly, add the module name to the ng-app directive.

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <title> An Angular Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

    <h1>An AngularJs Tutorial</h1>

  </body>
</html>

See the picture for better understanding.

Angular Js - Application and Module

Ok. You have set up everything. Now you can start building the application.

Next, in this Angular Js tutorial, we are going to learn controllers.

3.Controllers

AngularJs Controller is nothing but a function which controls the data of a certain part of an application. It acts as a mediator between view and model. It is the place where you define all the $scope properties. And it is the place to make ajax requests.

To define a Controller we need to use ng-controller directive.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <title> An Angular Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

    <!-- Angular Js Controller -->
    <div ng-controller="MyController">

    </div>
    <!-- Angular Js Controller -->

  </body>
</html>

Code Explanation :

  • In the above code, we added ng-controller directive to the <div> tag. Now that div tag becomes a controller.
  • Here MyController is the name of the controller.

Now we have added the controller to the view. Let’s define a function for the controller in the angular module.

script.js

//creating app module
var app = angular.module('AngularApp',[]);

//creating an angular controller.
app.controller('MyController',function(){


});

Code Explanation :

  • In the above code, we created a controller function for the MyController view and bind it to the app module.
  • The data whatever you store in this MyController function is only available to MyController view.

See the below picture for better understanding of the controller.

Angular Js - Controller View and Method

You can create controllers as many as you want. But, for each controller, you need to create a view and a function.

In the below example, we are going to create a couple of controllers. Have a look.

index.html

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
  	<!-- HomeController beginning -->
    	<div ng-controller="HomeController">
    		
    	</div>
    	<!-- HomeController ending -->


    	<!-- AboutController beginning -->
    	<div ng-controller="AboutController">
    		
    	</div>
    	<!-- AboutController ending -->


  </body>
</html>

script.js

//Angular App Module
var app = angular.module('AngularApp',[]);


//HomeController function
app.controller('HomeController',function(){

});


//AboutController function
app.controller('AboutController',function(){

});

Here we created two controllers called HomeController and AboutController. We wrote a view and a function for each controller.

Here the best part is, you can’t access the data of HomeController in AboutController and vice versa.

4.Initializing data in the view

One of the best features in Angular Js is, data initializing in the view. You can directly declare variables in the HTML page using ng-init directive.

Syntax:

ng-init=" var_name = value; var_name2 = value; var_name3 = value;  "

Example: 

<div ng-init="name='southjoovin'; age=23; email='[email protected]'; ">

</div>

You can store any valid form of data such as Numbers, Strings, Arrays, Objects, Booleans etc.

<div ng-init="user={name:'south joovin', age:23}; marks = [40,50,60,70]; result = true; ">

</div>

5.Expressions

AngularJs Expressions are exactly like javascript expressions. The expressions display the data in the view.

Example:   <p>  {{ expression }}  </p>

Below I gave the examples for each type of expression that shows how to write in a view.

Number Expressions: 

<p> {{ 2 + 2 }} </p>
<p> {{ 5 * 5 }} </p>
<p> {{ 10 / 5 }} </p>
<p> {{ 20 - 10 }} </p>
<p> {{ 10 % 5 }} </p>

Output: 

4
25
2
10
0

String Expressions:

<p> {{ "Angular js String Expression in double quotes" }} </p>
<p> {{ 'Angular Js String Expression in single quotes' }} </p>

Output:

Angular js String Expression in double quotes
Angular Js String Expression in single quotes

Object Expressions:

<div ng-init="user={name:'south joovin', age:23, email:'[email protected]'};">

    <p> {{ user.name }} </p>
    <p> {{ user.age }} </p>
    <p> {{ user.email }} </p>
       
</div>

Output:


Array Expressions:

To display Array elements as angular js expressions, you need to use one special directive called ng-repeat which iterates the elements of an array.

<div ng-init="names = ['html','css','javascript','bootstrap','angularjs']">

    <p ng-repeat = "name in names"> {{ name }} </p>
        
</div>

Output:

html
css
javascript
bootstrap
angularjs

6.The $scope

The $scope is an Angular Js service. It is used to add data to the controller. You can add variables, methods to the controller using $scope service.

To use the $scope in your controller, you need to pass $scope as an argument while defining a controller.

script.js

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

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

  $scope.name = "Joovin South";
  $scope.age = 23;
  $scope.website = "https://www.joovintechcafe.info";

});

Code Explanation :

  • In the above code, first, we pass $scope as an argument in the MyController function.
  • Then we added three variables name, age, website to the $scope of MyController

To display scope property value in the view, write the $scope property name in the double braces {{ }}

Make sure that you write the $scope values of a controller in that controller view only.

For example, if you have two controllers called HomeController and AboutController. If you write the $scope values of HomeController in the AboutController view that doesn’t work.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"> </script>
    <title>An Angular Application</title>
  </head>
  <body>

    <div ng-controller="MyController">
      <p>{{name}}</p>
      <p>{{age}}</p>
      <p>{{website}}</p>
    </div>

  </body>
</html>

The properties which define in the controller function only belong to the view of that controller.

For example, the properties which define in the MyController function only belong to the MyController view.

You can store any valid form of javascript data as an angular js $scope property value.

Strings as $scope property value:

$scope.name = "joovin south";

Numbers as $scope property value:

$scope.age = 23;

Booleans as $scope property value:

$scope.result = true;

Objects as $scope property value:

$scope.user = { name:'joovin south', age:23, email:'[email protected]' };

Arrays as $scope property value:

$scope.subjects = ['html','css','javascript','angularjs'];

However, you can also store functions as a $scope property value.

$scope.display_name = function(){

    console.log("Joovin South");

}

But, to call a function you need to fire an event in the view using ng-click directive. The ng-click directive replacement to the onClick event in Javascript.

index.html

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script type="text/javascript">
      
      var app = angular.module('AngularApp',[]);

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

        $scope.display_name = function(){

          console.log("Joovin South");

        }

      });
    </script>

    
  </head>
  <body>

      <div ng-controller="MyController">
          
          <button type="button" ng-click="display_name()">click here</button>

      </div>

  </body>
</html>

7.Directives

Angular Js directives are the attributes which tell the browser to add a specified behavior to the DOM.

Earlier in this article, we already used directives like ng-app, ng-controller, ng-bind, ng-model etc.

Each directive is designed for a specific event. And each one is with a prefix of ng-

For example, where the ng-app is used to define the Angular Js application.

Example:

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

  </body>
</html>

The ng-controller  is designed for defining a controller view.

Example:

<!-- HomeController beginning -->
<div ng-controller="HomeController">
    		
</div>
<!-- HomeController ending -->

ng-bind  is designed for binding a value to the HTML tags.

Example:

<!-- binding model name value to paragraph tag -->    
<p ng-bind="name"></p>

The  ng-init is designed for initializing data in the view.

Example:

<div ng-init="name='south'; age=23; email='[email protected]';">
    			
</div>

ng-model is designed for storing data in the models.

Example:

<input type="text" ng-model="name" />

The ng-repeat directive is designed to repeat the array elements in the view.

<div ng-controller="HomeController">
    		
    	<ol ng-init="names=['html','css','javascript','nodejs','express','mysql'">

    		<li ng-repeat="name in names"> {{ name }} </li>

    	</ol>

</div>

Expected Output:

 

The ng-if directive is used to execute a markup in the view based on a condition.

<div ng-controller="HomeController">
    		
    	<div ng-init="gender='male';">

    		<p ng-if="gender === 'male'"> Male </p>

    		<p ng-if="gender === 'female'"> Female </p>
    			
    	</div>	

</div>

Creating Your Own Angular Js Directive:

You can also create your own directives and can add the desired functionality. The directives can be created with a .directive function.

Example:

app.directive('simple',function(){
     var message = "A Simple Directive";
     return {
       template : "<h2>"+ message +"</h2>"
     }
});

You can call the directives from the angular js view in 4 different ways.

The first way is to write the directive name in HTML tags.

Example:

<simple> </simple>

The second way is to call a directive by passing the directive name as an attribute.

Example:

<div simple> </simple>

The third way is, call a directive as a CSS class.

Example:

<div class="simple"> </div>

The final way is, call the directive from the comment.

Example:

<!-- directive: simple --> 

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module('AngularApp',[]);

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

      });

      app.directive('simple',function(){
          var message = "A Simple Directive";
          return {
            template : "<h2>"+ message +"</h2>"
          }
      });

    </script>
  </head>
  <body>

    <div ng-controller="MyController">
      <simple></simple>
    </div>

  </body>
</html>

There is a lot to know about directives but these may enough for now.  Next, we are going to learn about models in this Angular Js tutorial..

8.Models

Angular Js models are used to store the data. And it also acts as a middleware between view and controller. It transfers the data from view to controller and controller to view.

Angular Js models are defined using the ng-model directive. If there any user interaction is performed, the data is passed from view to model.

For example, If a user types something on the input box, the value of the input will store in the model which is associated with the input field.

See the example below.

index.html

<html  ng-app="">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

  </head>
  <body>

      <input type="text" ng-model="name" />

      <p>value of the model name is: {{ name }}</p>

  </body>
</html>

Let’s see another example, for storing model values in the controller.

index.html

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script type="text/javascript">
      
      var app = angular.module('AngularApp',[]);

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

        $scope.display = function(){

          console.log($scope.firstname);
          console.log($scope.lastname);

        }

      });
    </script>


  </head>
  <body>

      <div ng-controller="MyController">
            
          <label> firstname </label>
          <input type="text" ng-model="firstname" />
          <br/> <br/>
          <label> lastname </label>
          <input type="text" ng-model="lastname" />
          <br/> <br/>

          <button type="button" ng-click="display()">display names</button>

      </div>

  </body>
</html>

In the above example, if you see I didn’t create $scope variables such as $scope.firstname and $scope.lastname. But, when you add the ng-model directive to any input field, angular js will automatically initialize a $scope variable on the controller with the name associated with the ng-model directive.

9.Data-binding

We already did data binding. But, we didn’t recognize it. In angular js, the data binding means, binding the model value to a view. You can bind the model data to a view by writing the model value as an angular js expression or you can use ng-bind directive.

Below is the example, which binds the data to the view by writing an Angular Js expression.

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script type="text/javascript">
      
      var app = angular.module('AngularApp',[]);

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

        $scope.name = "joovin south";
      
      });
    </script>


  </head>
  <body>

      <div ng-controller="MyController">

        <p> {{ name }} </p>

      </div>

  </body>
</html>

Below is another example, for binding data to a view using ng-bind directive

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script type="text/javascript">
      
      var app = angular.module('AngularApp',[]);

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

        $scope.name = "joovin south";
      
      });
    </script>


  </head>
  <body>

      <div ng-controller="MyController">

        <p ng-bind="name"> </p>

      </div>

  </body>
</html>

10.Two-way data binding

When the data in the model changes, the data in the view also change. When the data in the view updates, the data in the model also updated. And it happens at the same time. This process is known as data binding in angular js.

Example:

index.html 

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script type="text/javascript">
      
      var app = angular.module('AngularApp',[]);

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

        $scope.name = "joovin south";
      
      });
    </script>


  </head>
  <body>

      <div ng-controller="MyController">

          <input type="text" ng-model="name" />
          <br/>

          <p>{{name}}</p>

      </div>

  </body>
</html>

Expected Output:

If you see in the above example, the value of the input and the model value changes at the same time. This means two-way data-binding in Angular Js.

The below picture will demonstrate the concept of data-binding and two-way data binding.

Angular Js data-binding

11.Angular Js Filters

Sometimes we need to format our data into different forms like currency, date, uppercase and lowercase letters, etc. In those situations,  filters act like weapons.

A filter is a function which formats the application data in the Angular Js view. Below is the syntax to write a filter in view.

Syntax:

{{ expression | filter_name : 'filter_value' }}

There is a bunch of built-in filters is available in Angular Js. You can use these filters to format your data into different formats like converting uppercase letters into lowercase letters and displaying currency and date etc.

See the examples below.

1.lowercase

The lowercase filter converts expression value into lowercase letters.

<p> {{ 'SOUTH JOOVIN' | lowercase }} </p>

Expected output:

south joovin

2.uppercase

The Uppercase filter coverts the expression value into uppercase letters.

<p> {{ 'south joovin' | uppercase }} </p>

Expected output:

SOUTH JOOVIN

3.number

The number filter formats the number into proper order with correct placements of commas(,) and points(.).

<p> {{ 1000 | number }}</p>

Expected output:

1,000

4.currency

The currency filter formats the expression value and converts it into a currency.

Syntax:  {{ expression_value | currency : 'prefix' : fraction size }}

Here the prefix is to be added before the expression and fraction size is to add the decimal points.

Example:

<p> {{ 1000 | currency : 'RS ' : 2 }}</p>

Expected Output:

RS 1,000.00

Creating a custom filter

Filter example

Angular Js provides a simple API for creating a filter. Just as you could create a directive and controller  with ( app.directive() and app.controller() ), append the app.filter() function to the angular.module().

Below is the example for creating an Angular Js filter which coverts the expression values into uppercase.

app.filter('myFilter', function() {

        return function(x) {

          console.log(x);
          
          var txt = x.toUpperCase();
          
          return txt;
        };

});

Use that filter in view.

<p> {{ "shiva" | myFilter }} </p>

The example above is a simple filter and doesn’t have great functionality. But you can create a more functional filter depending upon your need.

To read more about filters here is the link for you. Developer Guide: Filters

Next, we are going to learn the services in this Angular Js Tutorial.

12.Angular Js Services

Angular Js service is re-usable code block. Which you can use more than one time anywhere in your Angular Js application.

Angular Js provides a set of built-in services.  Let’s start discussing some of them.

1. log

Every Javascript developer might familiar with the console.log() statement. But, when it comes to Angular Js, we have an excellent service called $log.  The $log service make your debugging and logging more productive.

It provides a set of methods to display log messages for the info, warning, and error.

To use a service, first of all, you need to pass them in a controller function.

Example:

app.controller('MyController',function($log){

   $log.log("writes a log message");
   $log.info("writes an information message");
   $log.warn("writes a warning message");
   $log.error("writes an error message");

});

Expected Output:

writes a log message
writes an information message
writes a warning message
writes an error message

Note: Feel the experience in the console only.

2.interval

The $interval service is a replacement for window.setInterval() . It executes a function repeatedly by setting a time interval.

Example:

<html  ng-app="AngularApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">

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

      app.controller('MyController',function($scope,$interval){

        $scope.number = 0;

        $interval(function(){
          $scope.number++;
        },1000);

      });
      
    </script>
  </head>
  <body>

    <div ng-controller="MyController">

      <p> Count down start {{number}}</p>

    </div>

  </body>
</html>

Expected Output:

Count down start 80

In the above output, the number keep updated.

3.timeout

The $timeout service is a replacement for setTimeout() method.

Example:

app.controller('MyController',function($scope,$timeout){

  $timeout(function() {
    console.log("called this method after 1 second");
  }, 1000);

});

Expected Output:

called this method after 1 second

In the above example, the message on the console displayed after one second.

4.location

The $location service provides the information(host, URL, port etc.) about the current web page.

Example:

app.controller('MyController',function($scope,$location){

   console.log($location.absUrl());
   console.log($location.port());
   console.log($location.host());

});

Expected Output:

http://localhost/websites/angularjs/index.html
80
localhost

This is not the complete built-in services list. There are plenty of services are there. If you want to learn, follow this link.

Till now, we have been used the built-in service. But, the good part is, you can create your own service.

Let’s start creating our own service.

Creating your own service.

Angular Js provides a simple way to create a service. To create a service, append the .service() method to your app module.

In the below example, I will show you the best way to create a service.

Example:

app.service('SimpleService', function(){

   return function(input){
      var service_data = input.toUpperCase();
      return service_data;
   }

});

Let’s see how to use them in a controller function.  To use service in our controller we have to pass it as a dependent module.

Example:

app.controller('MyController',function($scope,SimpleService){

    console.log(SimpleService("shiva"));

});

Let’s build a more functional service.

Now we are going to create a service which contains a set of methods, which you can put all your methods at one place.

Example:

app.service('MyService', function(){

  var obj = {};

  obj.getUser = function(user){
    if(user){
       console.log("displaying user" + " " + user);
    }
  }

  obj.addUser = function(user){
    if(user){
       console.log("adding user" + " " + user);
    }
  }

  obj.deleteUser = function(user){
    if(user){
       console.log("deleting user" + " " + user);
    }
  }

  return obj;

});

Call the above service from a controller.

app.controller('MyController',function(MyService){
    MyService.getUser("shiva");
    MyService.addUser("shiva");
    MyService.deleteUser("shiva");
});

Expected Output:

displaying user shiva
adding user shiva
deleting user shiva

13.The $http service

The $http is a service to make HTTP requests(e.g GET, POST, PUT etc)  in Angular Js. It provides a simple mechanism rather writing complex code.

The $http service

To make HTTP requests, first, you need to pass the service $http to the controller function.

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

app.controller('MyController',function($http){

});

Now we have prepared our controller function to make HTTP requests. You can start making requests.

1.get

The get request returns the data from the API service.

Example:

$http.get('https://jsonplaceholder.typicode.com/todos').then(function(resp){
    console.log(resp);
});

2.delete

The delete method used to delete the data on the server API.

Example:

$http.delete('https://jsonplaceholder.typicode.com/posts/1').then(function(resp){
   console.log(resp);
});

In the above example, we make a request to delete a post which has an id of 1.

3.post

The post method posts data to the server API.

Example:

$http.post('https://jsonplaceholder.typicode.com/posts',{title:'foo', body:'bar', userId:1 }).then(function(resp){
    console.log(resp);
});

4.put

The put request updates the data in the server API

Example:

$http.put('https://jsonplaceholder.typicode.com/posts',{title:'foo', body:'bar', userId:1 }).then(function(resp){
   console.log(resp);
});

Ok. That’s it for this Angular Js Tutorial. If you want to do further experiments the below link may help you.

Building A Basic Crud Application Using Angular js  

The Conclusion:

Ok. We have reached the end. We covered a lot in this Angular Js tutorial. Some of the topics should be explained in detail but, for your sake of learning I cut the edges and make them short and neat. Don’t worry I will explain those topics in detail in upcoming days. If you go deeper for the first time in learning, you will get stuck. As I name this article, it would be enough to learn Angular Js in one day.

I always would like to write articles like this one. If you like my article, give your suggestions on the comment box.

Hoping this article may worth for you. If you have any doubts feel free to comment below.

Thanks for reading!

Happy [email protected]

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes6
No0
Powered by Pixelbart

Leave a Reply

Your email address will not be published. Required fields are marked *