Better error handling for view recipe component when recipe is null (Chap. 6)

When there is no recipe to show (recipe is null):
- Don’t display the edit button.
- Inform user (via a message).
Also removing unused div id=“recipe-details”.

Author: chalin

Chapter_06/lib/component/view_recipe_component.html

@@ -1,9 +1,10 @@
-<div id="recipe-details">
+<div>
   <h3>Recipe Details</h3>
-  <a class="extra-space" href="#/recipe/{{ctrl.recipe.id}}/edit">
-    <input type="button" value="Edit Recipe"></a>
-
   <div ng-if="ctrl.recipe != null">
+    <a class="extra-space" href="#/recipe/{{ctrl.recipe.id}}/edit">
+      <input type="button" value="Edit Recipe">
+    </a>
+
     <div><strong>Name: </strong>{{ctrl.recipe.name}}</div>
     <div><strong>Category: </strong>{{ctrl.recipe.category}}</div>
     <div><strong>Rating: </strong>
@@ -22,4 +23,7 @@ <h3>Recipe Details</h3>
       {{ctrl.recipe.directions}}
     </div>
   </div>
+  <div ng-if="ctrl.recipe == null">
+    <p>Sorry, we could not find the details of the recipe you requested.</p>
+  </div>
 </div>