Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Angular, ASP.NET Core,
and VS Code - Oh My!
AARON MARISI
Aaron Marisi - About Me
Blog: angularfirst.com
Twitter: @amarisi
GitHub: aaronmarisi
Thank You!
Agenda
Overview
Visual Studio Code
◦ Demo
Angular
◦ Demo
ASP.NET Core
◦ Demo
Action Plan
Overview - House Keeping
Angular | Angular 1.x
Visual Studio Code (VS Code) | Visual Studio 2015/2017
ASP.NET Core | ASP.N...
Overview - The Players
Angular
◦ Client-side framework (in the browser)
◦ UI
◦ HTML, CSS, JavaScript (TypeScript)
Visual S...
Overview - Benefits
Increased Modularity and Performance
Frequent Releases
Cross Platform
Progressive Web Apps
Open Source...
Visual Studio Code
Visual Studio Code - Benefits
Light-weight
Command-line optimized
Intellisense
TypeScript Support
Debugging
Git Support
Ex...
Visual Studio Code - Helpful Extensions
*C#
TSLint
Chrome Debugger
Angular 2 Snippets
Coming Soon - Angular Language Servi...
Visual Studio Code
Demo
Visual Studio Code - To Start
Give it a try
Get accustomed to the command palette Ctrl + P
Use the integrated terminal Ctr...
Angular
Angular - Benefits
Binding / Template Syntax
Component-Driven Design
Uni-Directional Data Flow
Dependency Injection
Optimi...
Angular - Related Technologies
*ECMAScript modules
*ECMAScript decorators
*npm / Node.js
*TypeScript
*Angular CLI
SystemJS...
Angular - Key Pieces
*NgModule
*Components
◦ Template
◦ Styles
◦ Class
*Services
Directives (mixins)
Pipes (filters)
Route...
Angular - Configurations
*Build Choices
◦ SystemJS + TypeScript
◦ Webpack (leverages TypeScript)
◦ *Angular CLI (leverages...
Angular Demo
Angular - To Start
Use the Angular CLI for build and development
Use TypeScript
Get all packages and types from npm
Follow...
ASP.NET Core
ASP.NET Core - Benefits
Cross-Platform
*dotnet CLI (Command Line Interface)
Side-by-Side Framework Versioning
Concept Comp...
ASP.NET Core - Key Pieces
*Project System (MSBuild)
*Middleware
JavaScriptServices
Web API
Configuration Framework
Tag Hel...
ASP.NET Core Demo
Action Plan
Use the Angular CLI for build and development
Use TypeScript
Get all packages and types from npm
Follow the An...
More Resources
Docs
◦ https://angular.io/docs/
◦ http://code.visualstudio.com/docs
◦ https://docs.microsoft.com/en-us/aspn...
Aaron Marisi - About Me
Blog: angularfirst.com
Twitter: @amarisi
GitHub: aaronmarisi
Thank You!
Upcoming SlideShare
Loading in …5
×

Angular, ASP.NET Core, and Visual Studio Code - Oh My!

4,944 views

Published on

Discover what it takes to make an Angular, ASP.NET Core application in Visual Studio Code explaining the pieces on which to focus and those to initially ignore.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Angular, ASP.NET Core, and Visual Studio Code - Oh My!

  1. 1. Angular, ASP.NET Core, and VS Code - Oh My! AARON MARISI
  2. 2. Aaron Marisi - About Me Blog: angularfirst.com Twitter: @amarisi GitHub: aaronmarisi Thank You!
  3. 3. Agenda Overview Visual Studio Code ◦ Demo Angular ◦ Demo ASP.NET Core ◦ Demo Action Plan
  4. 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. 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. 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
  7. 7. Visual Studio Code
  8. 8. Visual Studio Code - Benefits Light-weight Command-line optimized Intellisense TypeScript Support Debugging Git Support Extensions
  9. 9. Visual Studio Code - Helpful Extensions *C# TSLint Chrome Debugger Angular 2 Snippets Coming Soon - Angular Language Service
  10. 10. Visual Studio Code Demo
  11. 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. 12. Angular
  13. 13. Angular - Benefits Binding / Template Syntax Component-Driven Design Uni-Directional Data Flow Dependency Injection Optimized for Tooling Client-Side Routing Testability
  14. 14. Angular - Related Technologies *ECMAScript modules *ECMAScript decorators *npm / Node.js *TypeScript *Angular CLI SystemJS Webpack Observables (RxJS)
  15. 15. Angular - Key Pieces *NgModule *Components ◦ Template ◦ Styles ◦ Class *Services Directives (mixins) Pipes (filters) Router Forms Http Testing Tools
  16. 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. 17. Angular Demo
  18. 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. 19. ASP.NET Core
  20. 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. 21. ASP.NET Core - Key Pieces *Project System (MSBuild) *Middleware JavaScriptServices Web API Configuration Framework Tag Helpers
  22. 22. ASP.NET Core Demo
  23. 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. 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. 25. Aaron Marisi - About Me Blog: angularfirst.com Twitter: @amarisi GitHub: aaronmarisi Thank You!

×