done

api/.gitignore

@@ -0,0 +1 @@
+/node_modules

api/config/seeds.js

@@ -1,20 +1,20 @@
 var seeder = require('mongoose-seed');
 
-// Connect to MongoDB via Mongoose 
-seeder.connect('mongodb://localhost:27017/may-the-force', function() {
-  // Load Mongoose models 
+// Connect to MongoDB via Mongoose
+seeder.connect('mongodb://localhost:3000/may-the-force', function() {
+  // Load Mongoose models
   seeder.loadModels(['./models/Character.js']);
   seeder.loadModels(['./models/Episode.js']);
-  // Clear specified collections 
+  // Clear specified collections
   seeder.clearModels(['Character', 'Episode'], function() {
-    // Callback to populate DB once collections have been cleared 
+    // Callback to populate DB once collections have been cleared
     seeder.populateModels(data);
   });
 });
 
-// Data array containing seed data - documents organized by Model 
+// Data array containing seed data - documents organized by Model
 var data = [
-  { 
+  {
     'model': 'Character',
     'documents': [
       {
@@ -122,4 +122,4 @@ var data = [
       },
     ]
   }
-];  
+];

api/controllers/episodes.js

@@ -38,7 +38,9 @@ function updateEpisode(request, response) {
     if(error) response.status(404).send(error);
 
     if(request.body.name) episode.name = request.body.name;
-    if(request.body.lightsaber) episode.lightsaber = request.body.lightsaber;
+    if(request.body.release_date) episode.release_date = request.body.release_date;
+    if(request.body.director) episode.director = request.body.director;
+    if(request.body.studio) episode.studio = request.body.studio;
 
     episode.save(function(error) {
       if(error) response.status(500).send(error);

front-end/characters.html

@@ -0,0 +1,23 @@
+<nav>
+  <a ui-sref-active="active" ui-sref="characters">Characters</a>
+  <a ui-sref-active="active" ui-sref="episodes">Episodes</a>
+</nav>
+
+<main ng-controller="CharacterController as char">
+  <h2 ng-show="char.selectedCharacter">{{ char.selectedCharacter.name }} wields a <span class="{{ char.selectedCharacter.lightsaber | lowercase }}">{{ char.selectedCharacter.lightsaber }}</span> lightsaber</h2>
+
+  <form name="char.newCharacter" ng-submit="char.addCharacter()">
+    <label>Name</label>
+    <input type="text" name="name" ng-model="char.character.name">
+    <label>Lightsaber</label>
+    <input type="text" name="lightsaber" ng-model="char.character.lightsaber">
+    <input type="submit" value="Add">
+  </form>
+
+  <h1>The Lightsaber Database</h1>
+  <ul>
+    <li ng-repeat="character in char.characters" ng-click="char.selectCharacter(character)">
+      {{ character.firstName }}'s lightsaber is <span class="{{ character.lightsaber | lowercase }}">{{ character.lightsaber }}</span> <a href="#" ng-click="char.editCharacter(character)">Edit</a> <button ng-click="char.deleteCharacter(character)">Delete</button>
+    </li>
+  </ul>
+</main>

front-end/episodes.html

@@ -0,0 +1,52 @@
+<nav>
+  <a ui-sref-active="active" ui-sref="characters">Characters</a>
+  <a ui-sref-active="active" ui-sref="episodes">Episodes</a>
+</nav>
+
+<main ng-controller="EpisodeController as epi">
+  <form ng-submit="epi.addEpisode()">
+    <div>
+      <label>Name</label>
+      <input type="text" name="name" ng-model="epi.episode.name">
+    </div>
+    <div>
+      <label>Release Date</label>
+      <input type="text" name="release_date" ng-model="epi.episode.release_date">
+    </div>
+    <div>
+      <label>Director</label>
+      <input type="text" name="director" ng-model="epi.episode.director">
+    </div>
+    <div>
+      <label>Studio</label>
+      <input type="text" name="studio" ng-model="epi.episode.studio">
+    </div>
+    <div>
+      <button type="submit">Add Episode</button>
+    </div>
+  </form>
+
+
+  <h1>The Episodes Database</h1>
+  <ul>
+    <li ng-repeat="episode in epi.episodes">
+      <strong>{{ episode.name }}</strong>
+      directed by {{ episode.director }}
+      <em>Release date: {{ episode.release_date }}</em> Produced by {{ episode.studio }}
+      <button ng-click="epi.deleteEpisode(episode)">Delete</button>
+      <a ng-click="epi.editEpisode(episode)">Edit</a>
+    </li>
+  </ul>
+
+
+
+</main>
+
+
+<!--       {
+        'name': 'Star Wars',
+        'release_date': 'May 25, 1977',
+        'director': 'George Lucas',
+        'studio': '20th Century Fox',
+      },
+ -->

front-end/index.html

@@ -3,29 +3,17 @@
 <head>
   <title>Test</title>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.js"></script>
   <script type="text/javascript" src="./js/app.js"></script>
-  <script type="text/javascript" src="./js/controllers.js"></script>
+  <script type="text/javascript" src="./js/controllers/characterController.js"></script>
+  <script type="text/javascript" src="./js/controllers/episodeController.js"></script>
+  <script type="text/javascript" src="./js/resources/character.js"></script>
+  <script type="text/javascript" src="./js/resources/episode.js"></script>
   <link rel="stylesheet" type="text/css" href="./css/style.css">
 </head>
-<body>
-  <main ng-controller="MainController as main">
-    <h2 ng-show="main.selectedCharacter">{{ main.selectedCharacter.name }} weilds a <span class="{{ main.selectedCharacter.lightsaber | lowercase }}">{{ main.selectedCharacter.lightsaber }}</span> lightsaber</h2>
-
-    <form name="main.newCharacter" ng-submit="main.addCharacter()">
-      <label>Name</label>
-      <input type="text" name="name" ng-model="main.character.name">
-      <label>Lightsaber</label>
-      <input type="text" name="lightsaber" ng-model="main.character.lightsaber">
-      <input type="submit" value="Add">
-    </form>
 
-    <h1>The Lightsaber Database</h1>
-    <ul>
-      <li ng-repeat="character in main.characters" ng-click="main.selectCharacter(character)">
-        {{ character.name }}'s lightsaber is <span class="{{ character.lightsaber | lowercase }}">{{ character.lightsaber }}</span> <a href="#" ng-click="main.editCharacter(character)">Edit</a> <button ng-click="main.deleteCharacter(character)">Delete</button>
-      </li>
-    </ul>
-  </main>
+<body ui-view>
 </body>
+
 </html>

front-end/js/app.js

@@ -1,2 +1,19 @@
 angular
-  .module("lightsaberApp", ['ngResource']);
+  .module("lightsaberApp", ['ui.router', 'ngResource'])
+  .config(MainRouter);
+
+function MainRouter($stateProvider, $urlRouterProvider) {
+  $stateProvider
+    .state('characters', {
+      url: "/characters",
+      templateUrl: "characters.html"
+    })
+    .state('episodes', {
+      url: "/episodes",
+      templateUrl: "episodes.html"
+    });
+
+  $urlRouterProvider.otherwise("/");
+
+
+}

front-end/js/controllers.js → front-end/js/controllers/characterController.js

@@ -1,25 +1,25 @@
 angular
   .module("lightsaberApp")
-  .controller("MainController", MainController);
+  .controller("CharacterController", CharacterController);
 
-MainController.$inject = ['$resource']
-function MainController($resource){
+CharacterController.$inject = ['Character']
+function CharacterController(Character){
   var self = this;
 
   // Blank new character for form
   this.character = {}
 
+  this.ada = Character;
+
   // Obtain our resource class
-  var Character = $resource('http://localhost:3000/characters/:id', {id: '@_id'}, {
-    'update': { method:'PUT' }
-  });
+  var Character = Character;
 
-  // Fetch all todos
+  // Fetch all characters
   this.characters = Character.query();
 
-  // Fetch the clicked todo
+  // Fetch the clicked character
   this.selectCharacter = function(character) {
-    self.selectedCharacter = Character.get({id: character._id});
+    self.selectedCharacter = Character.get({ id: character._id });
   };
 
   // Save as a Constructor

front-end/js/controllers/episodeController.js

@@ -0,0 +1,42 @@
+angular
+  .module('lightsaberApp')
+  .controller('EpisodeController', EpisodeController);
+
+EpisodeController.$inject = ['Episode'];
+function EpisodeController(Episode) {
+  var self = this;
+
+  this.episode = {};
+
+  var Episode = Episode;
+
+  this.episodes = Episode.query();
+
+  this.selectEpisode = function(episode) {
+    self.selectedEpisode = Episode.get({ id: episode._id });
+  };
+
+  this.addEpisode = function() {
+    if (self.episode._id) {
+      Episode.update(self.episode, function() {
+        self.episode = {};
+      });
+    }
+    else {
+      Episode.save(self.episode, function(episode) {
+        self.episodes.push(episode);
+        self.episode = {}
+      });
+    }
+  };
+
+  this.deleteEpisode = function(episode) {
+    Episode.delete({ id: episode._id });
+    var index = self.episodes.indexOf(episode);
+    self.episodes.splice(index, 1);
+  }
+
+  this.editEpisode = function(episode) {
+    self.episode = episode;
+  }
+}

front-end/js/resources/character.js

@@ -0,0 +1,23 @@
+angular
+  .module('lightsaberApp')
+  .factory('Character', Character);
+
+Character.$inject = ['$resource'];
+
+function Character($resource) {
+  var CharacterResource = $resource('http://localhost:3000/characters/:id',
+    {id: '@_id'},
+    {'update': { method:'PUT' }}
+  );
+
+  Object.defineProperty(CharacterResource.prototype, 'firstName', {
+    get: function(){
+      if (this.name) {
+        if (this.name.indexOf(" ") === -1) return this.name;
+        return this.name.slice(0, this.name.indexOf(" "));
+      }
+    }
+  })
+
+  return CharacterResource;
+}

front-end/js/resources/episode.js

@@ -0,0 +1,17 @@
+angular
+  .module('lightsaberApp')
+  .factory('Episode', Episode);
+
+Episode.$inject = ['$resource'];
+
+function Episode($resource) {
+  var EpisodeResource = $resource('http://localhost:3000/episodes/:id',
+    {id: '@_id'},
+    {'update': { method: 'PUT' }}
+  );
+
+  return EpisodeResource;
+
+
+
+}