Introduction to Angular for .NET Developers
0 likes231 views
The document presents a talk by Laurent Duveau on Angular and TypeScript, covering a range of topics such as Angular Academy training, TypeScript as a typed superset of JavaScript, and tools like Angular CLI and Visual Studio Code. It highlights the benefits of TypeScript for .NET developers and emphasizes the framework's suitability for single-page applications. The presentation also includes references to Angular components, modules, and resources for setting up Angular with various platforms.
![let height:number = 6;
let isDone:boolean = true;
let name:string = "Angular Academy";
let list:number[] = [1, 2, 3];
14](https://image.slidesharecdn.com/angular-170425022135/85/Introduction-to-Angular-for-NET-Developers-14-320.jpg)
![let list: Array<number>;
list = [17, 99, 42]; // OK
let cpt: number|string;
cpt = 123; // OK
cpt = "123"; // OK
15](https://image.slidesharecdn.com/angular-170425022135/85/Introduction-to-Angular-for-NET-Developers-15-320.jpg)
Introduction to Angular for .NET Developers
- 1. Laurent Duveau April 24th, 2017
- 2. @LaurentDuveau MVP, RD I live in Montreal Founder of the Angular Academy 2-day Angular Classroom Training 58 classes in the last 18 months Montreal, Boston, Quebec, Ottawa, Toronto, Vancouver, Calgary, London, Copenhagen, … April 26-27!
- 5. THIS TALK IS ABOUT…
- 10. 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# 10
- 11. Wait…
- 12. TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
- 13. I hate JavaScript… TypeScript is here to help! .NET Dev Mom
- 14. let height:number = 6; let isDone:boolean = true; let name:string = "Angular Academy"; let list:number[] = [1, 2, 3]; 14
- 15. let list: Array<number>; list = [17, 99, 42]; // OK let cpt: number|string; cpt = 123; // OK cpt = "123"; // OK 15
- 16. class Auto { constructor(private _engine:string) { } get engine():string { return this._engine; } set engine(val:string) { this._engine = val; } start() { console.log("Take off using: " + this._engine); } } constructor get/set property blocks method
- 17. DEMONSTRATION
- 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.0.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)
- 39. DEMONSTRATION
- 40. 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 40
- 41. Thank you!