Added REST API and example

Asp2017.csproj

@@ -9,6 +9,8 @@
     <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
     <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="1.1.1" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="1.1.1" />
     <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
   </ItemGroup>
   <ItemGroup>

Client/app/app.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './containers/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
-import { FetchDataComponent } from './containers/fetchdata/fetchdata.component';
+import { UsersComponent } from './containers/users/users.component';
 import { CounterComponent } from './containers/counter/counter.component';
 import { ChatComponent } from './containers/chat/chat.component';
 
@@ -18,13 +19,14 @@ import { ConnectionResolver } from './shared/route.resolver';
         AppComponent,
         NavMenuComponent,
         CounterComponent,
-        FetchDataComponent,
+        UsersComponent,
         HomeComponent,
         ChatComponent
     ],
     imports: [
         CommonModule,
         HttpModule,
+        FormsModule,
         // App Routing
         RouterModule.forRoot([
             {
@@ -61,13 +63,13 @@ import { ConnectionResolver } from './shared/route.resolver';
                 }
             },
             {
-                path: 'fetch-data', component: FetchDataComponent,
+                path: 'users', component: UsersComponent,
                 data: {
-                    title: 'REST demo',
-                    meta: [{ name: 'description', content: `We're hitting REST in this Demo!` }],
+                    title: 'Users REST example',
+                    meta: [{ name: 'description', content: 'This is User REST API example page Description!' }],
                     links: [
-                        { rel: 'canonical', href: 'http://blogs.example.com/fetch-data/canonicaldemo' },
-                        { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/fetchstuff' }
+                        { rel: 'canonical', href: 'http://blogs.example.com/chat/something' },
+                        { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/users' }
                     ]
                 }
             },

Client/app/containers/navmenu/navmenu.component.html

@@ -23,8 +23,8 @@
                     </a>
                 </li>
                 <li [routerLinkActive]="['link-active']">
-                    <a [routerLink]="['/fetch-data']">
-                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
+                    <a [routerLink]="['/users']">
+                        <span class='glyphicon glyphicon-user'></span> Users
                     </a>
                 </li>
                 <li [routerLinkActive]="['link-active']">

Client/app/containers/users/users.component.html

@@ -0,0 +1,43 @@
+<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
+
+<blockquote>
+    Let's get some fake users from Rest:<br>
+    You can find the Web API Routes in <code>{{ "/Server/RestAPI/ ... "}}</code>
+</blockquote>
+
+<p *ngIf="!users"><em>Loading...</em></p>
+
+<table class="table" *ngIf="users">
+    <thead>
+        <tr>
+            <th>User ID</th>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let user of users" [@flyInOut]>
+            <td>{{ user.id }}</td>
+            <td>
+                <input class="form-control" [(ngModel)]="user.name" #name="ngModel" />
+            </td>
+            <td>
+                <button *ngIf="name.dirty" class="btn btn-success" (click)="editUser(user)">Save</button>
+            </td>
+            <td>
+                <button class="btn btn-danger" (click)="deleteUser(user)">Delete</button>
+            </td>
+        </tr>
+        <tr>
+            <td><b>Add new user</b></td>
+            <td>
+                <input class="form-control" [(ngModel)]="newUserName" #newUser="ngModel" />
+            </td>
+            <td></td>
+            <td>
+                <button *ngIf="newUser.dirty" class="btn glyphicon-plus" (click)="addUser(newUserName)"></button>
+            </td>
+        </tr>
+    </tbody>
+</table>

Client/app/containers/users/users.component.ts

@@ -0,0 +1,86 @@
+import {
+    Component, OnInit,
+    // animation imports
+    trigger, state, style, transition, animate
+} from '@angular/core';
+
+import { Http, URLSearchParams } from '@angular/http';
+
+@Component({
+    selector: 'fetchdata',
+    templateUrl: './users.component.html',
+    animations: [
+        // Animation example
+        // Triggered in the ngFor with [@flyInOut]
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [
+                style({ transform: 'translateY(-100%)' }),
+                animate(1000)
+            ]),
+            transition('* => void', [
+                animate(1000, style({ transform: 'translateY(100%)' }))
+            ])
+        ])
+    ]
+})
+export class UsersComponent implements OnInit {
+
+    public newUserName: string;
+    public users: IUser[];
+
+    // Use "constructor"s only for dependency injection
+    constructor(private http: Http) { }
+
+    // Here you want to handle anything with @Input()'s @Output()'s
+    // Data retrieval / etc - this is when the Component is "ready" and wired up
+    ngOnInit() {
+        this.newUserName = "";
+        this.http.get('http://localhost:5000/api/user/all').map(res => res.json()).subscribe(result => {
+            console.log(result);
+            this.users = result as IUser[];
+        });
+    }
+
+    deleteUser(user) {
+        this.http.delete("http://localhost:5000/api/user/delete/" + user.id).subscribe(result => {
+            if (result.ok) {
+                let position = this.users.indexOf(user);
+                this.users.splice(position, 1);
+            }
+            else {
+                alert("There was an issue, Could not delete user");
+            }
+        });
+    }
+
+    editUser(user) {
+        let urlSearchParams = new URLSearchParams();
+        urlSearchParams.append('id', user.id);
+        urlSearchParams.append('name', user.name);
+        this.http.put('http://localhost:5000/api/user/update', urlSearchParams).subscribe(result => {
+            if (!result.ok) {
+                alert("There was an issue, Could not edit user");
+            }
+        });
+    }
+
+    addUser(newUserName) {
+        let urlSearchParams = new URLSearchParams();
+        urlSearchParams.append('name', newUserName);
+        this.http.post('http://localhost:5000/api/user/insert', urlSearchParams).subscribe(result => {
+            if (result.ok) {
+                this.users.push(result.json());
+                this.newUserName = "";
+            }
+            else {
+                alert("There was an issue, Could not edit user");
+            }
+        });
+    }
+}
+
+interface IUser {
+    id: number;
+    name: string;
+}

Server/Data/DbInitializer.cs

@@ -0,0 +1,42 @@
+using System;
+using System.Linq;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.DependencyInjection;
+using AspCoreServer.Models;
+using AspCoreServer;
+
+namespace AspCoreServer.Data
+{
+    public static class DbInitializer
+    {
+        public static void Initialize(SpaDbContext context)
+        {
+            context.Database.EnsureCreated();
+
+            if (context.User.Any())
+            {
+                return;   // DB has been seeded
+            }
+            var users = new Users[]
+            {
+               new Users(){Name = "Mark Pieszak"},
+               new Users(){Name = "Abrar Jahin"},
+               new Users(){Name = "hakonamatata"},
+               new Users(){Name = "LiverpoolOwen"},
+               new Users(){Name = "Ketrex"},
+               new Users(){Name = "markwhitfeld"},
+               new Users(){Name = "daveo1001"},
+               new Users(){Name = "paonath"},
+               new Users(){Name = "nalex095"},
+               new Users(){Name = "ORuban"},
+               new Users(){Name = "Gaulomatic"}
+            };
+
+            foreach (Users s in users)
+            {
+                context.User.Add(s);
+            }
+            context.SaveChanges();
+        }
+    }
+}

Server/Data/SpaDbContext.cs

@@ -0,0 +1,17 @@
+using AspCoreServer.Models;
+using Microsoft.EntityFrameworkCore;
+
+namespace AspCoreServer.Data
+{
+    public class SpaDbContext : DbContext
+    {
+        public SpaDbContext(DbContextOptions<SpaDbContext> options)
+            : base(options)
+        {
+            Database.EnsureCreated();
+        }
+
+        //List of DB Models - Add your DB models here
+        public DbSet<Users> User { get; set; }
+    }
+}

Server/Models/Users.cs

@@ -0,0 +1,21 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+
+namespace AspCoreServer.Models
+{
+    public class Users
+    {
+        public int ID { get; set; }
+        public string Name { get; set; }
+
+        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
+        [DataType(DataType.Date)]
+        public DateTime EntryTime { get; set; }
+
+        //Setting Default value
+        public Users()
+        {
+            EntryTime = DateTime.Now;
+        }
+    }
+}