Angular, ASP.NET Core, and Visual Studio Code - Oh My!
- 1. Angular, ASP.NET Core, and VS Code - Oh My! AARON MARISI
- 2. Aaron Marisi - About Me Blog: angularfirst.com Twitter: @amarisi GitHub: aaronmarisi Thank You!
- 3. Agenda Overview Visual Studio Code ◦ Demo Angular ◦ Demo ASP.NET Core ◦ Demo Action Plan
- 4. Overview - House Keeping Angular | Angular 1.x Visual Studio Code (VS Code) | Visual Studio 2015/2017 ASP.NET Core | ASP.NET 4.6 * Denotes Key Getting Started Concept or Tool
- 5. Overview - The Players Angular ◦ Client-side framework (in the browser) ◦ UI ◦ HTML, CSS, JavaScript (TypeScript) Visual Studio Code ◦ Text Editor ‘Plus’ ◦ Development Environment ASP.NET Core ◦ Server-side web application ◦ Web API ◦ C# or other supported .NET Core language
- 6. Overview - Benefits Increased Modularity and Performance Frequent Releases Cross Platform Progressive Web Apps Open Source Backed by Large Companies Interesting Integration Points New Opportunities for Developers
- 8. Visual Studio Code - Benefits Light-weight Command-line optimized Intellisense TypeScript Support Debugging Git Support Extensions
- 9. Visual Studio Code - Helpful Extensions *C# TSLint Chrome Debugger Angular 2 Snippets Coming Soon - Angular Language Service
- 11. Visual Studio Code - To Start Give it a try Get accustomed to the command palette Ctrl + P Use the integrated terminal Ctrl + ` Get the C# extension Check out other web development extensions
- 12. Angular
- 13. Angular - Benefits Binding / Template Syntax Component-Driven Design Uni-Directional Data Flow Dependency Injection Optimized for Tooling Client-Side Routing Testability
- 14. Angular - Related Technologies *ECMAScript modules *ECMAScript decorators *npm / Node.js *TypeScript *Angular CLI SystemJS Webpack Observables (RxJS)
- 15. Angular - Key Pieces *NgModule *Components ◦ Template ◦ Styles ◦ Class *Services Directives (mixins) Pipes (filters) Router Forms Http Testing Tools
- 16. Angular - Configurations *Build Choices ◦ SystemJS + TypeScript ◦ Webpack (leverages TypeScript) ◦ *Angular CLI (leverages Webpack) Ahead of Time Compilation (AOT) Lazy-load / Preload Routes Tree Shaking Angular Universal (ASP.NET Core Support) Web Worker Support
- 17. Angular Demo
- 18. Angular - To Start Use the Angular CLI for build and development Use TypeScript Get all packages and types from npm Follow the Angular getting started tutorial Focus on learning NgModules, Components, and Services Learn the template syntax
- 19. ASP.NET Core
- 20. ASP.NET Core - Benefits Cross-Platform *dotnet CLI (Command Line Interface) Side-by-Side Framework Versioning Concept Compatible with ASP.NET 4.5 Increased Performance and Modularity Self-Hosting
- 21. ASP.NET Core - Key Pieces *Project System (MSBuild) *Middleware JavaScriptServices Web API Configuration Framework Tag Helpers
- 23. Action Plan Use the Angular CLI for build and development Use TypeScript Get all packages and types from npm Follow the Angular getting started tutorial Focus on learning NgModules, Components, and Services Learn the template syntax Add ASP.NET Core to host Angular Layer on additional features: ◦ Routing ◦ Data Access APIs ◦ JavaScriptServices
- 24. More Resources Docs ◦ https://angular.io/docs/ ◦ http://code.visualstudio.com/docs ◦ https://docs.microsoft.com/en-us/aspnet/core/ ◦ https://github.com/aspnet/JavaScriptServices Podcasts ◦ https://devchat.tv/adv-in-angular ◦ http://www.dotnetrocks.com/ ◦ https://www.staticvoidpodcast.com/ My Blog ◦ http://angularfirst.com
- 25. Aaron Marisi - About Me Blog: angularfirst.com Twitter: @amarisi GitHub: aaronmarisi Thank You!