Download to read offline
![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/75/Introduction-to-Angular-for-NET-Developers-14-2048.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/75/Introduction-to-Angular-for-NET-Developers-15-2048.jpg)
Uploaded byLaurent Duveau
Introduction to Angular for .NET Developers
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.
Introduction to Angular for .NET Developers
- 1.
- 2. @LaurentDuveau MVP, RD I livein 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!
- 3.
- 5. THIS TALK ISABOUT…
- 6.
- 9.
- 10. TypeScript is atyped 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.
- 12.
- 13. I hate JavaScript… TypeScriptis 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.
- 19.
- 20.
- 21.
- 22.
- 23. Getting started faster! 23 >npm install -g @angular/cli > ng new DemoAngular > ng serve cli.angular.io
- 24. THE ANGULAR CLIMAKES IT EASY TO CREATE AN APP THAT WORKS AND FOLLOWS BEST PRACTICES, RIGHT OUT OF THE BOX.
- 25. There’s a newkid 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.
- 28. JavaScript Framework especiallysuitable 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 onv2 architecture released in September 14, 2016 Angular 4.0.3! *
- 30. 30 JavaScript, HTML, CSS, … Angular ishere REST API, ASP.NET, C#, … Your DB is there! Where is TypeScript ?
- 31. Components Modules Dependency Injection Language (TypeScript) Services DataBinding Decorators Routing
- 32. Header Component Menu Component Footer Component ListComponentGrid Component
- 33. YOUR APP ISA TREE OF COMPONENTS
- 34.
- 36. A component isa reusable object Made up of: HTML Template Code (ts class)
- 39.
- 40. Visual Studio 2015QuickStart 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.