Angular on ASP.NET MVC 6

Noam Kfir | Sela Group | 2015

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

.NET Today

https://xkcd.com/927/

.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

.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!

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…

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

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

Hello, World!

Let’s build a simple console app

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

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

Hello, World Wide Web!

Let’s build a simple web site

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

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

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

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!

Building Up

Let’s add a simple controller with a dependency and ngAnnotate

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)

ngResource

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

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