1 Minutes
Apr 9, 2017What Are Factories
Services are essentially ways we can share code across our AngularJS applications. Say for instance you have an application that interacts with a RESTful API, you would typically create a factory which would return an object that contains all the functions necessary to interact with that API.
By using a factory object, we can standardise the way we interact with the REST API and reduce the amount of duplicate code we have scattered around our application.
Implementing a Factory
var testApp = angular.module("testApp", []);
testApp.factory("RestService", function($http) {
var service = {};
var urlBase = "/api/v1";
service.getUsers = function() {
return $http.get(urlBase + "/users");
};
service.getUser = function(id) {
return $http.get(urlBase + "/user/" + id);
};
return service;
});
testApp.controller("testController", [
"$scope",
"$log",
"RestService",
function($scope, $log, RestService) {
var init = function() {
RestService.getUsers().then(
function successCallback(response) {
$log.log("Success");
},
function errorCallback(response) {
$log.log("Error");
}
);
};
init();
}
]);
Our Index Page
<html ng-app="testApp">
<head>
<title>AngularJS Services Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="testController">
<script src="scripts.js"></script>
</body>
</html>
Elliot Forbes
Twitter: @Elliot_f
Hey, I'm Elliot and I've been working on TutorialEdge for the last 4 years! If you have any tips or suggestions as to how I can make it better, please let me know in the comments section!
