Permalink
Browse files

AngularJS Tutorial Part 3 - Displaying Star Wars Data Using Controlle…

…r and Views
  • Loading branch information...
aashnisshah committed Aug 20, 2016
1 parent 9fd5163 commit 11d5ecf38b8ae1aac1710c806b7ece5499f0cc44
Showing with 36 additions and 2 deletions.
  1. +22 −1 controllers/main.js
  2. +10 −0 services/swapi.js
  3. +4 −1 views/main.html
View
@@ -5,10 +5,31 @@ angularApp.controller('MainCtrl', [
$scope.heading = "Hello World";
$scope.message = "This is me";
$scope.films = {};
SwapiService.people()
.then(function(data) {
$scope.data = data.data.results;
});
angular.forEach($scope.data, function(person) {
// creating a list of all possible films
angular.forEach(person.films, function(film) {
$scope.films[film] = '';
});
});
});
SwapiService.films()
.then(function(data) {
$scope.filmInfo = data.data.results;
// adding film names to list of films
angular.forEach($scope.filmInfo, function(film) {
var api_call = 'http://swapi.co/api/films/' + film.episode_id + '/';
$scope.films[api_call] = film.title;
});
});
}
]);
View
@@ -15,6 +15,16 @@ services.factory('SwapiService', ['$http',
return response;
});
};
Swapi.films = function() {
var path = '/films';
var url = Swapi.domain + path;
return $http.get(url)
.then(function(response){
return response;
});
};
return Swapi;
}
View
@@ -3,6 +3,9 @@ <h1>{{ heading }}</h1>
<div>
<div ng-repeat="person in data">
<p>{{person}}</p>
<p>
<b>{{ person.name }}</b> - <span ng-repeat="film in person.films">{{films[film]}}</span>
</p>
</div>
<hr>
</div>

0 comments on commit 11d5ecf

Please sign in to comment.