AngularJS Tutorial Part 5 - Creating Individual Pages for Characters …

…and Movies

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('/');
   }
 ]);

controllers/character.js

@@ -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;
+    });
+  }
+]);

controllers/main.js

@@ -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
+            };
         }); 
     });
 

controllers/movie.js

@@ -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;
+    });
+  }
+]);

index.html

@@ -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>

views/character.html

@@ -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>

views/main.html

@@ -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>

views/movie.html

@@ -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>