Rename Angular2Spa to AngularSpa, plus rephrase "Angular 2" as "Angular" in many places

templates/AngularSpa/ClientApp/app/components/counter/counter.component.html

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

templates/AngularSpa/ClientApp/app/components/counter/counter.component.spec.ts

@@ -0,0 +1,29 @@
+/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
+import { assert } from 'chai';
+import { CounterComponent } from './counter.component';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+
+let fixture: ComponentFixture<CounterComponent>;
+
+describe('Counter component', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({ declarations: [CounterComponent] });
+        fixture = TestBed.createComponent(CounterComponent);
+        fixture.detectChanges();
+    });
+
+    it('should display a title', async(() => {
+        const titleText = fixture.nativeElement.querySelector('h1').textContent;
+        expect(titleText).toEqual('Counter');
+    }));
+
+    it('should start with count 0, then increments by 1 when clicked', async(() => {
+        const countElement = fixture.nativeElement.querySelector('strong');
+        expect(countElement.textContent).toEqual('0');
+
+        const incrementButton = fixture.nativeElement.querySelector('button');
+        incrementButton.click();
+        fixture.detectChanges();
+        expect(countElement.textContent).toEqual('1');
+    }));
+});

templates/AngularSpa/ClientApp/app/components/counter/counter.component.ts

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