In this project, we'll cover how to use Angular services to separate the management of data from the controller. We'll also cover how to use $http to fetch data from a live API.
Live example: Click Me!
In this step, we'll create a service file and move the local user data from the controller into it.
- Create a new javascript file called
service.jsinjs/. - Open
js/service.js. - Create a new Angular service called
mainService. - Open
js/controller.jsand copy the value of$scope.usersand then delete$scope.users. - In
js/service.jscreate a new variable calleddataand paste the value from your clipboard. - Open
index.html. - Add a new
scripttag forjs/service.js.
js/controller.js
angular.module('userProfiles').controller('MainController', function($scope) {
}); js/service.js
angular.module('userProfiles').service('mainService', function() {
var data = [
{
"id": 0,
"first_name": "george",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
},
{
"id": 1,
"first_name": "lucille",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
},
{
"id": 2,
"first_name": "oscar",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
}
];
}); index.html
<!DOCTYPE html>
<html ng-app="userProfiles">
<head>
<title>User Profiles</title>
</head>
<body ng-controller="MainController">
<div ng-repeat="user in users">
<h1>{{user.first_name}} {{user.last_name}}</h1>
<img src="{{user.avatar}}">
<hr>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/service.js"></script>
</body>
</html>In this step, we'll add a method to the service that provides the local user data. We'll then update the controller to use this service method.
- Open
js/service.js. - Create a method on the service called
getUsersthat returnsdata. - Open
js/controller.js. - Import the service into the controller.
- Create a new
$scopevariable calledusersthat calls thegetUsermethod.
js/service.js
angular.module('userProfiles').service('mainService', function() {
var data = [
{
"id": 0,
"first_name": "george",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
},
{
"id": 1,
"first_name": "lucille",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
},
{
"id": 2,
"first_name": "oscar",
"last_name": "bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
}
];
this.getUsers = function() {
return data;
};
}); js/controller.js
angular.module('userProfiles').controller('MainController', function($scope, mainService) {
$scope.users = mainService.getUsers();
});In this step, we'll modify the service to use $http to get data from a live API. We'll also have to modify our controller to handle the promise of fetching live data.
- Open
js/service.js. - Import
$httpinto the service. - Delete the local data variable.
- Modify the
getUsersmethod toreturna$httpGET call tohttps://reqres.in/api/users?page=1. - Open
js/controller.js. - Delete
$scope.usersand instead callmainService.getUsers().- Catch the promise's response and set the value of
response.data.datato$scope.users.
- Catch the promise's response and set the value of
js/service.js
angular.module('userProfiles').service('mainService', function( $http ) {
this.getUsers = function() {
return $http({
method: 'GET',
url: 'https://reqres.in/api/users?page=1'
});
};
}); js/controller.js
angular.module('userProfiles').controller('MainController', function($scope, mainService) {
mainService.getUsers().then( function( response ) {
console.log( response );
$scope.users = response.data.data;
});
});If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.
