Introduction to Angular for .NET Developers
0 likes376 views
This document serves as an introduction to Angular for .NET developers, highlighting Angular's reliance on TypeScript, a Microsoft technology that simplifies JavaScript coding. It outlines the use of Angular CLI for quick app setup and details its compatibility with modern browsers, as well as integration with various tools like Visual Studio. The content emphasizes the component-based architecture of Angular applications and provides links to resources for further learning and setup.
![let height:number = 6;
let isDone:boolean = true;
let name:string = "Angular Academy";
let list:number[] = [1, 2, 3];
15](https://image.slidesharecdn.com/prdc-angular-170606164559/85/Introduction-to-Angular-for-NET-Developers-15-320.jpg)
Introduction to Angular for .NET Developers
- 1. Introduction to Angular for .NET Developers!
- 2. Laurent Duveau June 06th, 2017
- 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!
- 6. THIS TALK IS ABOUT…
- 11. 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
- 12. Wait…
- 13. TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
- 14. I hate JavaScript… TypeScript is here to help! .NET Dev Mom
- 15. let height:number = 6; let isDone:boolean = true; let name:string = "Angular Academy"; let list:number[] = [1, 2, 3]; 15
- 16. 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…
- 17. 17 Enums Generics Interface async/await … TypeScript: Angular’s Secret Weapon Wednesday at 8:30 AM - Laurent Duveau
- 19. 19
- 20. 20
- 21. 21 > npm install XYZ
- 22. 22
- 23. Getting started faster! 23 > npm install -g @angular/cli > ng new DemoAngular > ng serve cli.angular.io
- 24. THE ANGULAR CLI MAKES IT EASY TO CREATE AN APP THAT WORKS AND FOLLOWS BEST PRACTICES, RIGHT OUT OF THE BOX.
- 25. 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
- 26. DEMONSTRATION
- 28. 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
- 29. * based on v2 architecture released in September 14, 2016 Angular 4.1.3! *
- 30. 30 JavaScript, HTML, CSS, … Angular is here REST API, ASP.NET, C#, … Your DB is there! Where is TypeScript ?
- 31. Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing
- 32. Header Component Menu Component Footer Component List ComponentGrid Component
- 33. YOUR APP IS A TREE OF COMPONENTS
- 36. A component is a reusable object Made up of: HTML Template Code (ts class)
- 37. DEMONSTRATION
- 38. 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
- 39. Thank you!