Merge branch 'master' of https://github.com/elanderson/ASP.NET-Core-Basics.git

Author: elanderson

ASP.NET Core Basics/src/Aurelia/Controllers/HomeController.cs

@@ -27,6 +27,11 @@ public IActionResult Contact()
             return View();
         }
 
+        public IActionResult Aurelia()
+        {
+            return View();
+        }
+
         public IActionResult Error()
         {
             return View();

ASP.NET Core Basics/src/Aurelia/Views/Home/Aurelia.cshtml

@@ -0,0 +1,3 @@
+<div aurelia-app="main">
+    <script src="/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
+</div>

ASP.NET Core Basics/src/Aurelia/Views/Shared/_Layout.cshtml

@@ -31,6 +31,7 @@
             <div class="navbar-collapse collapse">
                 <ul class="nav navbar-nav">
                     <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
+                    <li><a asp-area="" asp-controller="Home" asp-action="Aurelia">Aurelia</a></li>
                     <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                     <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                 </ul>

ASP.NET Core Basics/src/Aurelia/aurelia_project/aurelia.json

@@ -52,7 +52,7 @@
         "id": "aspnetcore",
         "displayName": "ASP.NET Core",
         "output": "wwwroot\\scripts",
-        "baseUrl": "scripts"
+        "baseUrl": "../scripts"
       }
     ],
     "loader": {

ASP.NET Core Basics/src/Aurelia/src/app.html

@@ -1,3 +1,5 @@
 <template>
-  <h1>${message}</h1>
+    <require from="./contacts/contact-list"></require>
+    <h1>App</h1>
+    <contact-list></contact-list>
 </template>

ASP.NET Core Basics/src/Aurelia/src/app.js

@@ -1,14 +1,2 @@
-import { ContactService } from './services/contactService';
-
 export class App {
-    static inject() { return [ContactService] };
-
-    constructor(contactService) {
-        this.message = 'Hello World!';
-        contactService.GetAll()
-            .then(result => {
-                this.message = `Contact Results: 
-                                ${result.map((contact) => contact.name)}`;
-            });
-    }
 }

ASP.NET Core Basics/src/Aurelia/src/contacts/contact-list.html

@@ -0,0 +1,8 @@
+<template>
+    <ul>
+        <li repeat.for="contact of contacts">
+            <h4>${contact.name}</h4>
+            <p>${contact.getAddress()}</p>
+        </li>
+    </ul>
+</template>

ASP.NET Core Basics/src/Aurelia/src/contacts/contact-list.js

@@ -0,0 +1,15 @@
+import { ContactService } from './contact-service';
+
+export class ContactList {
+    static inject() { return [ContactService] };
+
+    constructor(contactService) {
+        this.contactService = contactService;
+        this.contacts = [];
+    }
+
+    created() {
+        this.contactService.GetAll()
+            .then(contacts => this.contacts = contacts);
+    }
+}

ASP.NET Core Basics/src/Aurelia/src/services/contactService.js renamed to ASP.NET Core Basics/src/Aurelia/src/contacts/contact-service.js

@@ -1,4 +1,5 @@
 import { HttpClient } from 'aurelia-fetch-client';
+import { Contact } from './contact';
 
 export class ContactService {
     static inject() { return [HttpClient] };
@@ -16,6 +17,7 @@ export class ContactService {
     GetAll() {
        return this.http.fetch('')
             .then(response => response.json())
+            .then(contacts => Array.from(contacts, c => new Contact(c)))
             .catch(error => console.log(error));
     }
 }

ASP.NET Core Basics/src/Aurelia/src/contacts/contact.js

@@ -0,0 +1,9 @@
+export class Contact {
+    constructor(data) {
+        Object.assign(this, data);
+    }
+
+    getAddress() {
+        return `${this.address} ${this.city}, ${this.state} ${this.postalCode}`;
+    }
+}