Permalink
Browse files

AngularJS Tutorial Part 5 - Creating Individual Pages for Characters …

…and Movies
  • Loading branch information...
aashnisshah committed Aug 20, 2016
1 parent 0c50a4c commit 1b04e6dfbcd201eabad133ee9534068aa5af90db
Showing with 186 additions and 5 deletions.
  1. +10 −0 app.js
  2. +22 −0 controllers/character.js
  3. +4 −1 controllers/main.js
  4. +21 −0 controllers/movie.js
  5. +2 −0 index.html
  6. +63 −0 views/character.html
  7. +8 −4 views/main.html
  8. +56 −0 views/movie.html
View
10 app.js
@@ -8,6 +8,16 @@ angularApp.config(['$routeProvider',
controller : 'MainCtrl',
controllerAs : 'main'
})
.when('/character/:id', {
templateUrl: 'views/character.html',
controller: 'CharacterCtrl',
controllerAs: 'character'
})
.when('/movie/:id', {
templateUrl: 'views/movie.html',
controller: 'MovieCtrl',
controllerAs: 'movie'
})
.otherwise('/');
}
]);
View
@@ -0,0 +1,22 @@
angularApp.controller('CharacterCtrl', [
'$routeParams',
'$scope',
'SwapiService',
function($routeParams, $scope, SwapiService){
$scope.character = {};
$scope.loading = true;
$scope.id = $routeParams.id;
SwapiService.people()
.then(function(data) {
angular.forEach(data.data.results, function(person) {
if (person.name.toLowerCase() === $routeParams.id.toLowerCase()) {
angular.copy(person, $scope.character);
console.log(person);
}
});
$scope.loading = false;
});
}
]);
View
@@ -26,7 +26,10 @@ angularApp.controller('MainCtrl', [
// 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;
$scope.films[api_call] = {
'title': film.title,
'episode_id': film.episode_id
};
});
});
View
@@ -0,0 +1,21 @@
angularApp.controller('MovieCtrl', [
'$routeParams',
'$scope',
'SwapiService',
function($routeParams, $scope, SwapiService){
$scope.movie = {};
$scope.loading = true;
$scope.id = $routeParams.id;
SwapiService.films()
.then(function(data) {
angular.forEach(data.data.results, function(film) {
if (film.episode_id == $routeParams.id) {
angular.copy(film, $scope.movie);
}
});
$scope.loading = false;
});
}
]);
View
@@ -12,6 +12,8 @@
<!-- Controllers -->
<script type="text/javascript" src="controllers/main.js"></script>
<script type="text/javascript" src="controllers/character.js"></script>
<script type="text/javascript" src="controllers/movie.js"></script>
<!-- Services -->
<script type="text/javascript" src="services/swapi.js"></script>
View
@@ -0,0 +1,63 @@
<div class="col-md-10 col-md-offset-1" ng-if="loading">
<div class="page-header">
<h1>Loading...</h1>
</div>
</div>
<div class="col-md-10 col-md-offset-1" ng-if="!loading">
<div ng-if="character.name">
<div class="page-header">
<h1>{{ character.name }}</h1>
</div>
<p><a href="#/">Home</a><p>
<div class="panel panel-default">
<div class="panel-body">
Name: {{ character.name }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Height: {{ character.height }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Mass: {{ character.mass }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Hair Color: {{ character.hair_color }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Eye Color: {{ character.eye_color }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Birth Year: {{ character.birth_year }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Gender: {{ character.gender }}
</div>
</div>
</div>
<div ng-if="!character.name">
<div class="page-header">
<h1>No one by the name {{ id }} exists :(</h1>
</div>
<a href="#/">Return Home?</a>
</div>
</div>
View
@@ -5,12 +5,16 @@ <h1>Star Wars</h1>
</div>
<div class="panel panel-default" ng-repeat="person in data">
<div class="panel-heading">{{ person.name }}</div>
<div class="panel-heading">
<a href="#/character/{{ person.name }}">{{ person.name }}</a>
</div>
<div class="panel-body">
<ul class="btn-group" ng-repeat="film in person.films">
<button class="btn btn-primary">
{{ films[film] }}
</button>
<a href="#/movie/{{ films[film].episode_id }}">
<button class="btn btn-primary">
{{ films[film].title }}
</button>
</a>
</ul>
</div>
</div>
View
@@ -0,0 +1,56 @@
<div class="col-md-10 col-md-offset-1" ng-if="loading">
<div class="page-header">
<h1>Loading...</h1>
</div>
</div>
<div class="col-md-10 col-md-offset-1" ng-if="!loading">
<div ng-if="movie.title">
<div class="page-header">
<h1>Episode {{ id }}: {{ movie.title }}</h1>
</div>
<p><a href="#/">Home</a><p>
<div class="panel panel-default">
<div class="panel-body">
Name: {{ movie.title }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Opening Crawl:
<p>
{{ movie.opening_crawl }}
</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Director: {{ movie.director }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Producer: {{ movie.producer }}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Release Date: {{ movie.release_date }}
</div>
</div>
</div>
<div ng-if="!movie.title">
<div class="page-header">
<h1>There is no Episode {{ id }} yet :(</h1>
</div>
<a href="#/">Return Home?</a>
</div>
</div>

0 comments on commit 1b04e6d

Please sign in to comment.