Star Wars App
Getting Started
Create a new folder called starwarsapp
with the following folders and files:
- starwarsapp
- js
- app.js
- index.html
Setup the HTML page with the usual tags.
Adding Dependencies
First thing's first, let's add the correct dependencies inside the head
tags. Additionally, add Bootstrap if you wish.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-resource.js"></script>
<script src="js/app.js"></script>
Note that in order to use $resource
, we need to include an additional script. We'll also need to inject the dependency (named ngResource
) into our app.
In app.js
:
angular.module('StarWarsApp', ['ngResource'])
.controller('FilmsCtrl', ['$scope', function($scope) {
}]);
Make sure to add ng-app
and ng-controller
directives to index.html
and test the app before continuing.
Creating a Film Service
Now, we're going to create a service for accessing Star Wars films using the factory recipe. This service will provide an object we can inject into controllers, and it'll provide functions for interacting with the Star Wars API.
We'll create this service in the same file for now.
In app.js
, we'll create a factory and inject it into the controller.
angular.module('StarWarsApp', ['ngResource'])
.factory('Films', ['$resource', function($resource) {
return $resource('http://swapi.co/api/films/:id');
}])
.controller('FilmsCtrl', ['$scope', 'Films', function($scope, Films) {
console.log(Films);
}]);
When we refresh the page, the contents of the Films service should be logged to the browser console.
Using the Films service
In order to use the Films service, we can call get
and query
from the controller. If we had a complete RESTful service, we could also call save
and remove
.
In app.js
:
app.controller('FilmsCtrl', ['$scope', 'Films', function($scope, Films) {
$scope.films = [];
Films.query(function success(data) {
$scope.films = data;
}, function error(data) {
console.log(data);
});
}]);
In index.html
:
<div class="well" ng-repeat="film in films">
<h2>{{film.title}}</h2>
<p>{{film.opening_crawl}}</p>
</div>
But wait! You'll notice that an error appears when you reload the page. That's because $resource
assumes that the query
function will return an array, but the Star Wars API returns an object. Luckily, we can customize the service with our own functions. Let's modify the service like so:
.factory('Films', ['$resource', function($resource) {
return $resource('http://swapi.co/api/films/:id', {}, {
query: { isArray: false }
});
}])
This will return a resource with a modified query method.
Try it: Use the get
method from the Films service to retrieve the second film (id of 2). If you're not sure how to pass the film id in, consult the documentation for $resource
.
Why use a Service?
You may be wondering why we're using a service for a one-line resource. Usually, resources are more complex and can be customized as you see fit. Take a look at the documentation for $resource and see what can be customized. Even if we didn't add additional customizations, the service allows many controllers to access the resource as a singleton.
Here's a trivial example of customizing our Films resource, by specifying different function names.
app.factory('Films', ['$resource', function($resource) {
return $resource('http://swapi.co/api/films/:id', {}, {
all: { method: 'GET', cache: false, isArray: false },
get: { method: 'GET', cache: false, isArray: false },
save: { method: 'POST', cache: false, isArray: false },
update: { method: 'PUT', cache: false, isArray: false },
delete: { method: 'DELETE', cache: false, isArray: false }
});
}]);
Note that for a lot of APIs, isArray
will be set to true for the GET all endpoint. This isn't the case for the Star Wars API.
We also set the cache
to false, but it could be set to true for performance improvements.
We also may want to customize the all
endpoint in the future, if we want to limit results
(imagine getting all Facebook users when calling .all
).
Conclusion
We've used services when working with $http
and Bootstrap modals, and we just made our own. By doing so, we've isolated business logic out of our controllers, so that they can focus mainly on initializing and manipulating data.
Later, we'll add routing to this Star Wars app and implement all of the CRUD functions.
Finished Code (Example)
Here's some example finished code. This will likely not match yours, but try playing around with the example and see if you can pull other resources from the Star Wars API!
index.html:
<!DOCTYPE html>
<html ng-app="StarWarsApp">
<head>
<title>Star Wars App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="HomeCtrl">
<div>
<input type="integer" ng-model="movieId">
<button ng-click="getMovie(movieId)">Get</button>
<button ng-click="getAll()">All</button>
</div>
<div ng-if="loading">
Loading...
</div>
<div ng-if="!loading" ng-repeat="film in films">
<h1>{{film.title}}</h1>
<p>{{film.opening_crawl}}</p>
</div>
</body>
</html>
js/app.js:
var app = angular.module('StarWarsApp', ['ngResource']);
app.factory('FilmsFactory', ['$resource', function($resource) {
// use the colon syntax to specify the id parameter in the url.
var url = 'http://swapi.co/api/films/:id';
return $resource(url, {}, {
// overwrite the isArray value when querying for movies
query: { isArray: false }
});
}]);
app.controller('HomeCtrl', ['$scope', 'FilmsFactory', function($scope, FilmsFactory){
$scope.movieId = 1;
$scope.films = [];
$scope.loading = false;
$scope.getAll = function() {
$scope.loading = true;
FilmsFactory.query(function success(data) {
$scope.films = data.results;
$scope.loading = false;
}, function error(data) {
console.log('error');
$scope.loading = false;
});
};
$scope.getMovie = function(id) {
$scope.loading = true;
FilmsFactory.get({ id: id }, function success(data) {
// placing data in an array in order for ng-repeat to work on a single movie
$scope.films = [data];
$scope.loading = false;
}, function error(data) {
console.log('error');
$scope.loading = false;
});
};
}]);