Aurelia optional route (#6)

* Aurelia - optional route with place holder for contact creation

* Remove click delegate on create new contact

Author: elanderson

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/app/app.ts

@@ -37,7 +37,7 @@ export class App {
             title: 'Contact List'
         },
         {
-            route: 'contact-detail/:id',
+            route: 'contact-detail/:id?',
             name: 'contactdetail',
             moduleId: '../contacts/contactDetail',
             nav: false,

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactDetail.html

@@ -15,6 +15,9 @@ <h1>Contact Details</h1>
             <dd>${contact.email}</dd>
         </dl>
     </div>
+    <h3 if.bind="!hasContactId">
+        Place holder for creating a new contact
+    </h3>
     <a route-href="route: contactlist">Back to List</a>
     <hr />
 </template>

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactDetail.ts

@@ -5,12 +5,20 @@ import { ContactService } from './contactService';
 @inject(ContactService)
 export class ContactDetail {
      contact: Contact;
+     hasContactId: boolean;
 
     constructor(private contactService: ContactService) { }
 
     activate(parms, routeConfig) {
-        return this.contactService.getById(parms.id)
-            .then(contact => this.contact = contact);
+        this.hasContactId = parms.id;
+
+        if (this.hasContactId) {
+            return this.contactService.getById(parms.id)
+                .then(contact => this.contact = contact);          
+        }
+
+        return null;
+
     }
 
 }

ASP.NET Core Basics/src/Aurelia/ClientApp/app/components/contacts/contactList.html

@@ -2,6 +2,8 @@
     <h1>Contact List</h1>
 
     <p if.bind="!contacts"><em>Loading...</em></p>
+    
+    <a route-href="route: contactdetail">Create New Contact</a>
 
     <table class="table" if.bind="contacts">
         <thead>