Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Angular Js HTTP Get

    Enviado por

    Mycel Calanza
    6 visualizações3 páginas
    Angular Js Http Get

    Título original

    Angular Js Http Get

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Angular Js Http Get

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações3 páginas

    Angular Js HTTP Get

    Enviado por

    Mycel Calanza
    Angular Js Http Get

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 3

    AngularJS $http.

    get Example

    On this page we will provide AngularJS $http.get example. $http.get is a shortcut for HTTP GET
    method. $http is a core angular service to communicate with remote HTTP services. $http.get
    accepts a HTTP URL and an optional configuration object. On the promise object returned by
    $http.get, we can call .then callback or .success callback. .success has been deprecated. Here on
    this page we will provide example for both .then and .success.

    $http.get

    AngularJS $http.get() is a shortcut to perform HTML form GET method. The syntax is given
    below.

    get(url, [config]);

    Where url is a HTTP URL that needs to be accessed and config is a configuration object and it is
    optional.$http.get returns HTTP promise object on which we can call .then along
    with .catch and .finally. On promise object we can also call .success along
    with .error and .finally.

    promise in AngularJS
    AngularJS promise is a HTTP promise that will run asynchronously. It is a concept in which a
    HTTP request started to execute asynchronously such as fetching a URL that can either be
    successful or fail. promise object is provided by AngularJS $q service. On the promise object
    we can call other AngularJS functions. $http.get returns promiseobject.

    $http.get with .then


    Calling .then callback on promise object obtained from $http.get returns new promise object
    and can be used as sequential operation. It takes a single object for response.

    promise.then: On successful promise .then is called. If $http.get fetches a URL successfully


    then AngularJS.then is executed.
    promise.catch: It is called when promise is failed.
    promise.finally: This method is called in both scenario whether promise is successful or failed.

    Find the sample example.


    app.js
    var myApp = angular.module('myApp', []);
    myApp.controller('myController', function($scope, $http){
    $http.get('sample_json.js')
    .then(function (response){
    $scope.jsondata = response.data;
    console.log("status:" + response.status);
    }).catch(function(response) {
    console.error('Error occurred:', response.status, response.data);
    }).finally(function() {
    console.log("Task Finished.");
    });
    });
    Find the properties of response object.
    data: It contains response body.
    status: HTTP status code.
    headers: Access headers.
    config: Configuration object to generate request.
    statusText: HTTP status text.

    In .then() we get response object and using this object we get the properties as response.data,
    response.status etc. Now find sample JSON data used in our example.
    sample_json.js
    [
    {
    "id" : "1",
    "name" : "Shankar",
    "location" : "Varanasi"
    },
    {
    "id" : "2",
    "name" : "Ram",
    "location" : "Ayodhya"
    },
    {
    "id" : "3",
    "name" : "Krishna",
    "location" : "Mathura"
    }
    ]
    http-get.html
    <html>
    <head>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="app.js"></script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myController">
    <ul>
    <li ng-repeat="row in jsondata">
    {{ row.id + ', ' + row.name + ', ' + row.location}} <br>
    </li>
    </ul>
    </div>
    </body>
    </html>
    Find the output.

    $http.get with .success


    $http.get returns promise object and on this object we call .success which returns same
    promise object. We need to pass response properties to get their values. .success callback
    along with .error has been deprecated.
    .success: On successful run of $http.get, .success callback is called.
    .error: If $http.get is unable to access URL, then .error callback is called.
    .finally: In both case it runs whether success or failure.

    Find the sample example.


    app.js
    var myApp = angular.module('myApp', []);
    myApp.controller('myController', function($scope, $http){
    $http.get('sample_json.js')
    .success(function (data, status){
    $scope.jsondata = data;
    console.log("status:" + status);
    }).error(function(data, status) {
    console.error('Error occurred:', data, status);
    }).finally(function() {
    console.log("Task Finished.");
    });
    });

    Você também pode gostar