Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introduction to Angular for .NET Developers

276 visualizaciones

Publicado el

Technical presentation given by Laurent Duveau at the Prairie Dev Conference in Winnipeg on June 06th, 2017.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Introduction to Angular for .NET Developers

  1. 1. Introduction to Angular for .NET Developers!
  2. 2. Laurent Duveau June 06th, 2017
  3. 3. @LaurentDuveau MVP, RD I live in Montreal Founder of the Angular Academy 2-day Angular Classroom Training 64 classes in the last 18 months Montreal, Boston, Quebec, Toronto, Ottawa, Calgary, Vancouver, London, Copenhagen, … July 13-14!
  4. 4. TypeScript Setup and Tooling Angular
  5. 5. THIS TALK IS ABOUT…
  6. 6. .NET Developer
  7. 7. ANGULAR IS BUILT USING TYPESCRIPT
  8. 8. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript You can combine Javascript with Typescript Any browser. Any host. Any OS It is a Microsoft Technology, Open Source From the creator of C# 11
  9. 9. Wait…
  10. 10. TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
  11. 11. I hate JavaScript… TypeScript is here to help! .NET Dev Mom
  12. 12. let height:number = 6; let isDone:boolean = true; let name:string = "Angular Academy"; let list:number[] = [1, 2, 3]; 15
  13. 13. class Person { private name: string; constructor(name:string) { this.name = name; } getName(): string { return this.name; } } var p = new Person(‘Laurent’); p.getName(); class Person { constructor(private name:string) { } getName(): string { return this.name; } } var p = new Person(‘Laurent’); p.getName(); Or shorter…
  14. 14. 17 Enums Generics Interface async/await … TypeScript: Angular’s Secret Weapon Wednesday at 8:30 AM - Laurent Duveau
  15. 15. 19
  16. 16. 20
  17. 17. 21 > npm install XYZ
  18. 18. 22
  19. 19. Getting started faster! 23 > npm install -g @angular/cli > ng new DemoAngular > ng serve cli.angular.io
  20. 20. THE ANGULAR CLI MAKES IT EASY TO CREATE AN APP THAT WORKS AND FOLLOWS BEST PRACTICES, RIGHT OUT OF THE BOX.
  21. 21. There’s a new kid in town! VS Code… a code editor, not an IDE Free, Open Source Windows, Mac, Linux! HTML5, CSS, LESS, JavaScript or C# with NodeJs or ASP.NET, … Rich code editor from VS in a fast and lightweight tool Debug, deploy Git integration Extensions code.visualstudio.com
  22. 22. DEMONSTRATION
  23. 23. JavaScript Framework especially suitable for single-page modern web applications (Single Page Application, or SPA) Compatible with Internet Explorer 9+ and others modern browsers Open Source, MIT license www.angular.io
  24. 24. * based on v2 architecture released in September 14, 2016 Angular 4.1.3! *
  25. 25. 30 JavaScript, HTML, CSS, … Angular is here REST API, ASP.NET, C#, … Your DB is there! Where is TypeScript ?
  26. 26. Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing
  27. 27. Header Component Menu Component Footer Component List ComponentGrid Component
  28. 28. YOUR APP IS A TREE OF COMPONENTS
  29. 29. Map Update App DetailsList ProductsMenu Contact
  30. 30. A component is a reusable object Made up of: HTML Template Code (ts class)
  31. 31. DEMONSTRATION
  32. 32. Visual Studio 2015 QuickStart http://tinyurl.com/jmhv9h8 Angular setup with VS 2015 and ASP.NET 4 http://tinyurl.com/h2n82v8 ASP.NET Core + Angular template for VS http://tinyurl.com/jnoqwfs Deploy an Angular/ASP.NET Core App to Azure http://tinyurl.com/he4g8lb 38
  33. 33. Thank you!

×