Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Angular - wywołania HTTP

Przydatne linki

  • Przykład $http.post()
  • angular-express-seed

    The seed contains angular libraries, test libraries and a bunch of scripts all preconfigured for instant web development gratification. Just clone the repo (or download the zip/tarball) and you're ready to develop your application.

  • ngResource Docs

Wywołania HTTP

Pobieranie JSON

Pobieranie danych z obietnicą (ang. promise).


var PersonController = function ($scope, $http) {

    var promise = $http.get("/persons/1473");

    promise.then(function (response) {
        $scope.name = response.data.name;
        $scope.surname = response.data.surname;
    });
}

Pobieranie danych z obietnicą - skrócona wersja.


var PersonController = function ($scope, $http) {

    $http.get("/persons/1473").
        then(function (response) {
        $scope.name = response.data.name;
        $scope.surname = response.data.surname;
    });
}

Pobieranie danych z obietnicą - wersja z możliwością błędu.


var MainController = function ($scope, $http) {

    var onRequestCompleted = function (response) {
        $scope.user = response.data;
    }

    var onError = function (reason) {
        $scope.error = "Nie można pobrać informacji"
    }

    $http.get("https://api.github.com/users/PanNiebieski").
        then(onRequestCompleted,onError);

}

Druga wersja z możliwością błędu:


app.controller('PostsCtrl', function($scope, $http) {
   $http.get('data/posts.json').
    success(function(data, status, header, config) {
        $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
        // log error
    });
});

ngResource

Przykład factory z wykorzystaniem $resource:

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

app.factory('Post', function($resource) {
    return $resource("/api/posts/:id");
})

// Przyklad uzycia

app.controller('PostIndexCtrl', function($scope, Post) {
    Post.query(function(data) {
        $scope.posts = data;
    });
});

app.controller("PostShowCtrl", function($scope, Post) {
    Post.get({id: 1}, function(data) {
        $scope.post = data;
    });
});

Post.save(data);

Post.delete({ id: id});