Read the updated version of this post here.
If you’re someone who is only just getting their feet wet with AngularJS development, you’ll eventually reach a point where you can’t learn much more without data to manipulate. You’ve probably realized trying to learn Angular while also learning to write an API and a database can be quite a headache. So, how do we get working data without taking the focus away from learning Angular?
NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.
Let’s take a simple example: your app has users and you want to display their name and maybe some additional info about them. You don’t have a database or API, but you still want to flesh out the business logic. With Angular Services and JSON data, we can totally make this possible. Let’s start with the JSON data.
Your JSON Data
There are plenty of ways to implement data into your Angular services — some open source and others not so much. For the sake of simplicity, this tutorial will use static JSON files. Here is an example of some mock user data you might want to include in your app:
[
{
"name": "Andrew Owen",
"age" : 26,
"eyeColor" : "blue"
},
{
"name": "Susan Que",
"age" : 45,
"eyeColor": "hazel"
},
{
"name": "John Doe",
"age" : 53,
"eyeColor": "brown"
}
]
Simple and sweet — an array of three users ready to be added to our app. But how do we get it there?
Custom Angular Services and $HTTP
To get our data into our app, we need to hook it up to an Angular Service. Angular Services help our app by keeping the server side logic separate from our business logic. In our case, we’ll use it to handle API requests to retrieve our mock data. This will ensure that we can reuse those requests while also keeping that code out of our controller. Our service, which is a normal javascript file, looks like this:
(function() {
var app = angular.module('modusDemo');
app.service('userService', function($http) {
this.getUsers = function() {
return $http.get('userData.json');
}
})
})();
As you can see, app.service takes two parameters: a name so we can reference it in our controller, and a function that contains the code our service executes. From here, you can declare any number of functions you want your service to have access to. You can even have your service include other services so you can use services inside your service (because yo dog, I heard you like services). One of those services is one we use in the code above: $http.
$http is a core angular service, meaning it comes with Angular right out of the box; there’s no need to define what it does beforehand. According to AngularJS’ own docs, $http facilitates communication with remote HTTP servers via the XMLHttpRequest object. In short, if you pass $http a URL or local file with the proper response method (in our case GET) it will return data from that location.
Linking to Your Controller and HTML
Now that we have our service, we need to use it. As previously mentioned, our service is now usable throughout our project and we can include it in our controller file. In the same way we included $http in our service, we can include our service in our controller by passing it as an argument. Take a look at the controller setup below:
(function() {
var app = angular.module('modusDemo');
app.controller('todoCtrl', function(userService) {
var vm = this;
userService.getUsers().then(function(res){
vm.userData = res.data;
});
});
})();
With userService plugged in as an argument, we can now use its methods directly in our controller. After calling the service, it will return data, in this case our JSON file, and store it in vm.userData. After that, it’s as simple as including the controller in your HTML view and using vm.userData to display our data via ng-repeat. That code looks like this:
<body ng-app="modusDemo" ng-controller="todoCtrl as user">
<h2>Users</h2>
<div ng-repeat="users in user.userData">
{{users.name}}
</div>
</body>
And there you have it; using Angular’s existing core functionality we implemented one of Angular’s core services, created our own service, called that service in our controller, and then instantiated the data into our HTML; all while never worrying about writing an API or storing our information to a database. Angular has a lot of awesome services, and using custom services to mock data is only scratching the surface of what they can really do. There are plenty of great resources to help get you started should you want to expand on what’s shown here. What are some of your favorite services? How have services helped your angular projects? Let us know by commenting below!
