Improving the example to make it more obvious what's happening

Author: johnlindquist

.idea/workspace.xml

@@ -25,8 +25,10 @@
 <a href="https://github.com/johnlindquist/johnlindquist.github.com/tree/master/demos/angular-resolve">View source on Github</a>
 
 <script type="text/javascript" src="lib/angular-1.0.2/angular.js"></script>
+<script type="text/javascript" src="lib/angular-1.0.2/angular-resource.js"></script>
 <script type="text/javascript" src="lib/jquery-1.8.1/jquery-1.8.1.js"></script>
 <script type="text/javascript" src="lib/bootstrap-2.1.1/js/bootstrap.js"></script>
 <script type="text/javascript" src="js/app.js"></script>
+<script type="text/javascript" src="js/starTrekServices.js"></script>
 </body>
 </html>

client/img/Enterprise-D.jpg

@@ -1,73 +1,53 @@
-var app = angular.module('app', []);
+var app = angular.module('app', ['starTrekServices']);
 
 app.config(function ($locationProvider, $routeProvider) {
     $routeProvider.when("/", {templateUrl:"partials/home.html"});
-    $routeProvider.when("/cat", {
-        templateUrl:"partials/cat.html",
-        controller :"CatCtrl",
-        resolve    :{
-            toy:function ($timeout, $q) {
-                var defer = $q.defer();
-
-                //delay the response for 2 seconds, then succeed
-                $timeout(function () {
-                    //you can resolve and pass whatever you want here (use a resource, etc)
-                    //the result is passed into the "toy" param in the CatCtrl
-                    defer.resolve(
-                        {type:"yarn"}
-                    );
-                }, 2000);
 
-                return defer.promise;
-            }
-        }
-
-    });
-    $routeProvider.when("/dog", {
-        templateUrl:"partials/dog.html",
-        controller :"DogCtrl",
+    $routeProvider.when("/:starship", {
+        templateUrl:"partials/starship.html",
+        controller :function ($scope, $routeParams, crew) {
+            $scope.img = $routeParams.starship + ".jpg";
+            $scope.crew = crew;
+        },
         resolve    :{
-            toy:function ($timeout, $q) {
-                var defer = $q.defer();
+            crew:function ($q, $route, $timeout, starTrekResource) {
+                var deferred = $q.defer();
+
+                var starship = $route.current.params.starship;
 
-                //delay the response for 2 seconds, then reject
+                var successCb = function (result) {
+                    if (angular.equals(result, [])) {
+                        deferred.reject("No starship found by that name");
+                    }
+                    else {
+                        deferred.resolve(result);
+                    }
+                };
+                //the timeout is only to exaggerate the example, it's completely unnecessary
                 $timeout(function () {
-                    //the reject message is only useful for the $routeChangeError rejection
-                    defer.reject("Dogs don't deserve toys!");
+                    starTrekResource.getCrewByStarship(starship, successCb);
                 }, 2000);
 
-                return defer.promise;
+                return deferred.promise;
             }
         }
-    });
 
-    //Even silly demo apps need Easter Eggs :)
-    $routeProvider.when("/aquaman", {templateUrl:"partials/aquaman.html"});
+    });
 });
 
-function CatCtrl($scope, toy) {
-    //notice that this is triggered AFTER the route has successfull changed
-    //this means you can prepare any data in the "toy" that you want
-    alert("CatCtrl ready - The cat likes: " + toy.type);
-}
-function DogCtrl($scope, toy) {
-    //this will never happen since we're intentionally failing the route change
-    alert("DogCtrl ready - The dog likes: " + toy.type);
-}
-
 function AppCtrl($scope, $rootScope, $location) {
     $rootScope.$on("$routeChangeStart", function (event, next, current) {
-        $scope.alertType = "alert-info";
-        $scope.alertMessage = "Changing routes";
-        $scope.active = "progress-striped active";
+        $scope.alertType = "";
+        $scope.alertMessage = "Loading...";
+        $scope.active = "progress-striped active progress-warning";
     });
     $rootScope.$on("$routeChangeSuccess", function (event, current, previous) {
         $scope.alertType = "alert-success";
         $scope.alertMessage = "Successfully changed routes :)";
-        $scope.active = "";
+        $scope.active = "progress-success";
     });
     $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
-        alert(rejection);
+        alert("ROUTE CHANGE ERROR: " + rejection);
         $scope.alertType = "alert-error";
         $scope.alertMessage = "Failed to change routes :(";
         $scope.active = "";
@@ -78,16 +58,16 @@ function AppCtrl($scope, $rootScope, $location) {
 
     $scope.tabs = [
         {
-            title:"Home - No Resolve",
+            title:"Home",
             url  :"#/"
         },
         {
-            title:"Cats Succeed",
-            url  :"#/cat"
+            title:"Enterprise-D",
+            url  :"#/Enterprise-D"
         },
         {
-            title:"Dogs Fail",
-            url  :"#/dog"
+            title:"Voyager",
+            url  :"#/Voyager"
         }
     ];
 

client/img/Voyager.jpg

@@ -0,0 +1,16 @@
+angular.module('starTrekServices', ['ngResource']).
+    factory('starTrekResource', function ($resource) {
+        var StarTrekResource = $resource('https://api.mongolab.com/api/1/databases' +
+                '/johnlindquist/collections/star-trek/',
+                {apiKey:'4f0f9e96e4b04ac27016b99a'},
+                {monogolabQuery:{method:'GET', params:{q:""}, isArray:true}});
+
+
+        StarTrekResource.prototype.getCrewByStarship = function (starshipQuery, successCb, failCb) {
+            var queryObj = {starship:starshipQuery};
+            var query = JSON.stringify(queryObj);
+            return StarTrekResource.monogolabQuery({q:query}, successCb, failCb);
+        };
+
+        return new StarTrekResource;
+    });