6. Single Page App
HTML Page
Click me!
Server
Request
Response
Thank you, David!
{‘
name’: ‘David’
}
7. Architecture
Web Service
Database
Web APIAngular 2
TypeScript
BootStrap
Single
Page
App
Function Tool
Web Service Web API
Database SQL Server
Single Page Application Angular 2 & TypeScript
Styling Bootstrap
9. Web API Routing
public class ValuesController : ApiController
{
public IEnumerable<string> Get() {…}
public string Get(int id) {…}
public void Post ([FromBody]string value) {… }
public void Put (int id, [FromBody]string value) {..}
public void Delete (int id) {…}
}
http://..../api/values
HTTP Verb
GET
POST
PUT
DELETE
24. Modules
• Built into Angular 2
• Makes it easier to split code into smaller pieces
• Import one module into another
• Export module to make it available for import
25. Modules
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }
Available
outside this
module
Use exported
module
In this module
COMPONENT =
Template (view, including HTML, bindings, directives)
+ Class (properties / methods; created with TypeScript)
+ Metadata (decorator: from Angular)
structural directives (*ngIf, *ngFor)
Replaces HTML