Updated Lab 7 doc, added code

Labs/7. Single Page Applications.md

@@ -17,7 +17,11 @@
   ```
   yo aspnetcore-spa
   ```
+1. Update the application using the `dotnet migrate` command.
 1. View the application code by typing `code .` to launch Visual Studio Code in the current directory.
+1. Edit the Project (`csproj`) file and update the `Microsoft.DotNet.Watcher.Tools` version to `1.0.0-msbuild2-final`.
+1. Restore packages using `dotnet restore`
+1. Build the application using `dotnet build`
 
 ## Running the Angular 2 application
 1. From the commandline, set the ASP.NET Core development mode environment variable:
@@ -38,8 +42,7 @@
 
 ## Experiment with Hot Module Reloading (HMR)
 1. Navigate to the Counter page in running web application.
-1. In Visual Studio Code, edit the Counter template (\ClientApp\components\counter\counter.html) to change the H2 heading text.
-1. Edit the counter implementation ((\ClientApp\components\counter\counter.ts) to change the counter increment to 10:
+1. In Visual Studio Code, Edit the counter implementation ((\ClientApp\app\components\counter\counter.ts) to change the counter increment to 10:
 
   ``` typescript
   export class Counter {
@@ -50,10 +53,11 @@
     }
   }
   ```
+1. Edit the Counter template (\ClientApp\components\counter\counter.html) to change the H2 heading text.
 1. Observe that the application has refreshed with your changes. View the console output to see the debug messages printed out during the updates.
 
 ## Extra
-1. Create a Knockout, React, or React + Redux application using the above steps but selecting a different option in the Yeoman scaffolder.
+1. Create an Aurelia, Knockout, React, or React + Redux application using the above steps but selecting a different option in the Yeoman scaffolder.
 1. Create a production build by setting `ASPNETCORE_ENVIRONMENT=Production`, then running the following:
 
   ```

Labs/Code/Lab7/.gitignore

@@ -0,0 +1,248 @@
+/Properties/launchSettings.json
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+build/
+bld/
+bin/
+Bin/
+obj/
+Obj/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+/wwwroot/dist/**
+/ClientApp/dist/**
+
+# Workaround for https://github.com/aspnet/JavaScriptServices/issues/235
+!/wwwroot/dist/_placeholder.txt
+!/ClientApp/dist/_placeholder.txt
+
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# DNX
+project.lock.json
+artifacts/
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Microsoft Azure ApplicationInsights config file
+ApplicationInsights.config
+
+# Windows Store app package directory
+AppPackages/
+BundleArtifacts/
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Workaround for https://github.com/aspnet/JavaScriptServices/issues/235
+/node_modules/**
+!/node_modules/_placeholder.txt
+
+/yarn.lock
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+
+# FAKE - F# Make
+.fake/

Labs/Code/Lab7/ClientApp/app/app.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { UniversalModule } from 'angular2-universal';
+import { AppComponent } from './components/app/app.component'
+import { NavMenuComponent } from './components/navmenu/navmenu.component';
+import { HomeComponent } from './components/home/home.component';
+import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
+import { CounterComponent } from './components/counter/counter.component';
+
+@NgModule({
+    bootstrap: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        NavMenuComponent,
+        CounterComponent,
+        FetchDataComponent,
+        HomeComponent
+    ],
+    imports: [
+        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
+        RouterModule.forRoot([
+            { path: '', redirectTo: 'home', pathMatch: 'full' },
+            { path: 'home', component: HomeComponent },
+            { path: 'counter', component: CounterComponent },
+            { path: 'fetch-data', component: FetchDataComponent },
+            { path: '**', redirectTo: 'home' }
+        ])
+    ]
+})
+export class AppModule {
+}

Labs/Code/Lab7/ClientApp/app/components/app/app.component.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

Labs/Code/Lab7/ClientApp/app/components/app/app.component.html

@@ -0,0 +1,10 @@
+<div class='container-fluid'>
+    <div class='row'>
+        <div class='col-sm-3'>
+            <nav-menu></nav-menu>
+        </div>
+        <div class='col-sm-9 body-content'>
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

Labs/Code/Lab7/ClientApp/app/components/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app',
+    template: require('./app.component.html'),
+    styles: [require('./app.component.css')]
+})
+export class AppComponent {
+}

Labs/Code/Lab7/ClientApp/app/components/counter/counter.component.html

@@ -0,0 +1,7 @@
+<h2>Counter</h2>
+
+<p>This is a simple example of an Angular 2 component.</p>
+
+<p>Current count: <strong>{{ currentCount }}</strong></p>
+
+<button (click)="incrementCounter()">Increment</button>

Labs/Code/Lab7/ClientApp/app/components/counter/counter.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'counter',
+    template: require('./counter.component.html')
+})
+export class CounterComponent {
+    public currentCount = 0;
+
+    public incrementCounter() {
+        this.currentCount++;
+    }
+}

Labs/Code/Lab7/ClientApp/app/components/fetchdata/fetchdata.component.html

@@ -0,0 +1,24 @@
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+<p *ngIf="!forecasts"><em>Loading...</em></p>
+
+<table class='table' *ngIf="forecasts">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let forecast of forecasts">
+            <td>{{ forecast.dateFormatted }}</td>
+            <td>{{ forecast.temperatureC }}</td>
+            <td>{{ forecast.temperatureF }}</td>
+            <td>{{ forecast.summary }}</td>
+        </tr>
+    </tbody>
+</table>