Repozytorium Web Developera

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

Angular - serwisy

Przydatne linki

Przykład prostego serwisu Factory


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

// deklarujemy factory UserService
APP.factory('UserService', function () {

    var users = ['Tomek', 'Andrzej'];

    // zwraca dwie metody:
    // UserService.all() i UserService.first()
    return {
        all: function() {
            return users;
        },
        first: function() {
            return users[0];
        }
    };

});

APP.controller('MyCtrl', function($scope, UserService) {
    $scope.users = UserService.all();
});

APP.controller('AnotherCtrl', function($scope, UserService) {
    $scope.firstUser = UserService.first();
});

Przykład prostego serwisu Service z użyciem $http i zwracaniem promise


app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function(myService, $scope) {
  $scope.clearData = function() {
    $scope.data = {};
  };
  $scope.getData = function() {
    // Call the async method and then do stuff with what is returned inside our own then function
    myService.async().then(function(d) {
      $scope.data = d;
    });
  };
});
Źródło

Factory

Przykład Factory

Przykład prostego Factory z wykorystaniem $http:


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

APP.factory('Nerd', ['$http', function($http) {

    return {
        // call to get all nerds
        get : function() {
            return $http.get('/api/nerds');
        },

        // call to POST and create a new nerd
        create : function(nerdData) {
            return $http.post('/api/nerds', nerdData);
        },

        // call to DELETE a nerd
        delete : function(id) {
            return $http.delete('/api/nerds/' + id);
        }
    }

}]);
Źródło

Drugi przykład Factory:


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

APP.ApplicationCtrl = function ($scope, User) {

    User.setUsername('nick');

    $scope.getHelloMessage = function () {
        return User.sayHello();
    };

};

APP.factory('User', function () {

    var _username = '',
        _setUsername = function (username) {
            _username = username;
        },
        _sayHello = function () {
            return 'Hello, ' + _username;
        };

    return {
        setUsername: _setUsername,
        sayHello: _sayHello
    };

});

//albo:

APP.factory('User', function () {

    var _username = '';

    return {
        setUsername: function (username) {
            _username = username;
        },
        sayHello: function () {
            return 'Hello, ' + _username;
        }
    };

});
Źródło

Service

Przykład Service

Przykład podobny do poprzedniego Factory:


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

APP.ApplicationCtrl = function ($scope, User) {

    User.setUsername('nick');

    $scope.getHelloMessage = function () {
        return User.sayHello();
    };

};

APP.service('User', function () {

    var _username = '';

    this.setUsername = function (username) {
        _username = username;
    };

    this.sayHello = function () {
        return 'Hello, ' + _username;
    };

});
Źródło

Provider

Przykład Provider

Może być użyty już podczas konfiguracji aplikacji.


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

APP.ApplicationCtrl = function ($scope, User) {

    $scope.getHelloMessage = function () {
        return User.sayHello();
    };

};

APP.provider('User', function () {

    this._username = '';

    this.$get = function () {
        var that = this;
        return {
            sayHello: function () {
                return 'Hello, ' + that._username;
            }
        };
    };

});

APP.config(function (UserProvider) {
    UserProvider._username = 'nick from config';
});
Źródło