Angular, ASP.NET Core, and VS Code - Oh My!AARON MARISI

Aaron Marisi - About MeBlog: angularfirst.com

Twitter: @amarisi

GitHub: aaronmarisi

Thank You!

AgendaOverview

Visual Studio Code◦ Demo

Angular◦ Demo

ASP.NET Core◦ Demo

Action Plan

Overview - House KeepingAngular | 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

Overview - The PlayersAngular

◦ 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

Overview - BenefitsIncreased Modularity and Performance

Frequent Releases

Cross Platform

Progressive Web Apps

Open Source

Backed by Large Companies

Interesting Integration Points

New Opportunities for Developers

Visual Studio Code

Visual Studio Code - BenefitsLight-weight

Command-line optimized

Intellisense

TypeScript Support

Debugging

Git Support

Extensions

Visual Studio Code - Helpful Extensions*C#

TSLint

Chrome Debugger

Angular 2 Snippets

Coming Soon - Angular Language Service

Visual Studio Code Demo

Visual Studio Code - To StartGive 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

Angular

Angular - BenefitsBinding / Template Syntax

Component-Driven Design

Uni-Directional Data Flow

Dependency Injection

Optimized for Tooling

Client-Side Routing

Testability

Angular - Related Technologies*ECMAScript modules

*ECMAScript decorators

*npm / Node.js

*TypeScript

*Angular CLI

SystemJS

Webpack

Observables (RxJS)

Angular - Key Pieces*NgModule

*Components◦ Template◦ Styles◦ Class

*Services

Directives (mixins)

Pipes (filters)

Router

Forms

Http

Testing Tools

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

Angular Demo

Angular - To StartUse 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

ASP.NET Core

ASP.NET Core - BenefitsCross-Platform

*dotnet CLI (Command Line Interface)

Side-by-Side Framework Versioning

Concept Compatible with ASP.NET 4.5

Increased Performance and Modularity

Self-Hosting

ASP.NET Core - Key Pieces*Project System (MSBuild)

*Middleware

JavaScriptServices

Web API

Configuration Framework

Tag Helpers

ASP.NET Core Demo

Action PlanUse 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

More ResourcesDocs

◦ 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

Aaron Marisi - About MeBlog: angularfirst.com

Twitter: @amarisi

GitHub: aaronmarisi

Thank You!