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