The next version of ASP.NET is more than just a minor upgrade. The surface may seem familiar, but the underlying framework represents nothing less than a paradigm shift. Rewritten from scratch to support modern tooling and guidelines, ASP.NET MVC 6 can run just about everywhere and has a ton of features designed to support SPAs, including Angular apps. This presentation, which was given at the AngularJS-IL Meetup, introduces ASP.NET 5 and MVC 6 and focuses on features that benefit Angular apps. http://www.meetup.com/AngularJS-IL/events/223123549/

1. Angular on ASP.NET MVC 6
Noam Kfir | Sela Group | 2015

2. Who Am I
 Noam Kfir
 Senior Architect and Trainer at Sela Group
 Organizer of the Front-End.IL Meetup
 Co-authoring a Microsoft Official Curriculum (MOC) course on ASP.NET MVC 6
 Twitter: @NoamKfir
 Email: noam@kfir.cc or noamkfir@sela.co.il

3. .NET Today
https://xkcd.com/927/

4. .NET Fragmentation
 .NET is fragmented across platforms
 Desktop, Phone, Xbox, Store, Compact, Micro, Silverlight, Mono
 Affects deployment, code sharing, APIs, knowledge burden
 Portable Class Libraries
 Target multiple platforms
 Early attempt to solve the problem using contracts
 Not truly cross-platform
 Always incomplete

6. .NET Core to the Rescue
 .NET Core is a new universal foundation
 CoreCLR subset of CLR
 CoreFX subset of BCL
 Better JIT compiler (RyuJIT)
 Completely open source (MIT)
 Truly cross-platform (Windows, Linux, OS X)
 Modular!

8. ASP.NET 5 at a Glance
 Versions
 ASP.NET 5, ASP.NET MVC 6, Entity Framework 7
 Same abstractions, mostly
 Model, View, Controller, Razor, Web API…
 Completely rewritten infrastructure
 OWIN, DNX, cross-platform, modular, dependency injection
 grunt/gulp, npm/bower, kestrel, custom commands…

9. DNX Overview
 The .NET Execution Environment
 SDK and cross-platform runtime environment
 Responsible for hosting, managing dependencies and bootstrapping apps
 Wraps NuGet: consumes and creates packages

10. DNX Projects
 .xproj replaces .csproj
 Language agnostic
 Does not keep track of individual files and folders
 The project.json manifest
 Project info
 Dependencies (NuGet, npm, bower)
 Custom commands

11. Hello, World!
Let’s build a simple console app

12. Command Line Tools
 DNU – .NET Development Utility
 Build, package and publish DNX projects
 Essentially manages NuGet packages
 Similar to npm
 DNVM – .NET Version Manager
 Manages runtimes
 Runtimes can be installed side-by-side
 Similar to Node’s nvm, Ruby’s rvm, Python’s virtualenv

13. ASP.NET Templates
 Empty – start from scratch (mostly)
 Web API – REST APIs without extra overhead
 Web Site – MVC web site (kitchen sink included)
 Database
 Auth
 Build and basic dependencies (gulp, npm, bower, nuget)
 Basic settings and conventions in place

14. Hello, World Wide Web!
Let’s build a simple web site

16. Visual Studio Tooling
 Task Runner Explorer
 Supports grunt, gulp, karma and others
 Web Essentials
 Most features eventually become part of Visual Studio
 Basic Zen coding support
 Introduced support for Less and Sass and other HTML and CSS helpers
 Lots of general improvements, ongoing
 Introduced Angular features, like completion and validation

18. Useful Extensions
 SideWaffle
 File templates for Angular, including services, factories, tests, modules, and others
 ReSharper
 Emmet for ReSharper – better Zen coding extension
 AngularJS (for ReSharper 9) – code completion and live templates, official jetBrains extension
 See and easily add live templates using the Template Explorer

19. Adding Angular
 Bower dependency
 via command line
 with bower.json and completion
 The environment tag helper
 development: simple script element
 production/staging: CDN with fallback to min.js
 Gulp
 Copy from bower_components to wwwroot/lib

20. Creating Scripts
 Avoid creating files directly in wwwroot
 Write them elsewhere and then copy them over with Gulp
 Makes it easier to add automated minification, concatenation, annotation, CDNification, etc.
 Optionally use a SideWaffle template
 ReSharper live templates are very useful!

21. Building Up
Let’s add a simple controller with a dependency and ngAnnotate

22. Consuming APIs
 Web API has been merged with MVC
 Both inherit from Controller
 Both have access to the same infrastructure: routing, action results, caching, etc.
 $resource maps to Web API routes
 Web API returns JSON (by default)

23. ngResource
Let’s add the angular-resource package and retrieve data from the server

24. Summary
 ASP.NET 5 has been rewritten almost from scratch
 It is modern, open source and cross-platform
 Deeply integrates with the frontend ecosystem, including gulp, bower and npm
 Visual Studio and select extensions make working with Angular much easier
 MVC 6 with Web API is well-suited to Angular apps