Upload
aaron-marisi
View
4.495
Download
0
Embed Size (px)
Citation preview
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!