Angular2 with ASP.NET Core

Transcript

1. ANGUL AR2 WITH AN ASP.NET CORE BACKEND, HAPPINESS ENSUES... B Y DAV I D P I N E
2. AGENDA • Introduction • Set the stage • Angular2 • ASP.NET Core • The “I Do’s” – marriage ceremony • Question & Answers
3. DAVID PINE { @davidpine7 } < TECHNICAL EVANGELIST /> • http://davidpine.net • https://github.com/ievangelist • http://stackoverflow.com/users/2410379/david-pine • https://www.linkedin.com/in/dpine
4. SET THE STAGE T H E WO R L D - W I D E W E B ? !
5. LEGACY WEB HyperText Markup Language [ HTML, 1993 ] Cascading Style Sheets [ CSS, 1996 ] JavaScript [ JS, 1995 ] Originally designed to serve as a static document. Applications were typically a few hundred lines at most…
6. DEAD-TO-ME WEB ASP.NET Proper • WebForms – ViewState, Page Lifecycle, Postbacks, HTML abstraction, etc… • MVC – System.Web, Global mutable state, Page Load/Request, API vs MVC
7. THINGS THEY GOT RIGHT MVC • Testable • Separation of concerns • Stateless • HTTP verbs • CSHTML (somewhat) WEBFORMS
8. MODERN WEB / ARCHITECTURE Single Page Application [ SPA, 2003 ] • Initial page load is a drag… ¯\_(ツ)_/¯ • Client-side routing • Full control over HTML • Closer to the problem domain (web dev)
9. OF APPROVAL ANGULAR Is built with TypeScript VISUAL STUDIO CODE Is built with Chromium
11. OPEN SOURCE Angular –https://github.com/angular TypeScript –https://github.com/microsoft/typescript ASP.NET Core –https://github.com/aspnet
12. OPEN SOURCE watch branch compare code commit pull request merge star
13. ANGULAR (2+) N OT A N G U L A R J S ( 1 + )
14. ANGULAR •Modules •Components •Pipes •Templating
15. Angular Modules help organize an application into cohesive blocks of functionality. app.module.ts MODULES
16. import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; import { AppComponent } from './components/app/app.component‘ import { HomeComponent } from './components/home/home.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, HomeComponent ], imports: [ UniversalModule, // Imports BrowserModule, HttpModule, and JsonpModule RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: '**', redirectTo: 'home' } ]) ] }) export class AppModule { }
17. Angular Component are the most basic building block of an UI in an Angular application. app.component.ts COMPONENTS
18. import { Component } from '@angular/core'; @Component({ selector: 'home', templateUrl: './home.component.html' }) export class HomeComponent { } <div> <home></home> </div> Component Class Impl Example Usage
19. Angular Pipes transform displayed values within a template. datetime.pipe.ts PIPES
20. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: date' }) export class DatePipe implements PipeTransform { transform(date: Date, format?: string): string { // Omitted for brevity ... } } <div> {{ dateOfBirth | date:shortDate }} // Outputs as 7/7/1984 </div> Pipe Class Impl Example Usage
21. Angular Templates in Angular, the component plays the part of the controller/viewmodel, and the template represents the view. home.component.html TEMPLATING
22. HTML Plus Interpolation ( {{...}} ) Template expressions Template statements Binding syntax Property binding ( [property] ) Attribute, class, and style bindings Event binding ( (event) ) Two-way data binding ( [(...)] ) Built-in directives Built-in attribute directives NgClass NgStyle NgModel ([(ngModel)]) Built-in structural directives NgIf NgFor Template input variables Microsyntax The NgSwitch directives Template reference variables ( #var ) Input and output properties ( @Input and @Output ) Template expression operators pipe ( | ) safe navigation operator ( ?. )
23. ASP.NET CORE N OT A S P. N E T 5
24. ASP.NET CORE • Middleware • Dependency Injection • Strongly-typed Config • Logging • Web API • C#
25. PUTTING IT ALL TOGETHER Azure DocumentDb (Data Store) ASP.NET Core (Web Server) Angular (Clients)
26. DEMO (ALL THE THINGS) – “I DO’S”
27. { THANK YOU } < source code /> https://github.com/ievangelist/IEvangelist.Angular