angular on asp.net mvc 6
TRANSCRIPT
![Page 1: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/1.jpg)
Angular on ASP.NET MVC 6
Noam Kfir | Sela Group | 2015
![Page 2: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/2.jpg)
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: [email protected] or [email protected]
![Page 3: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/3.jpg)
.NET Today
https://xkcd.com/927/
![Page 4: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/4.jpg)
.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
![Page 5: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/5.jpg)
![Page 6: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/6.jpg)
.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!
![Page 7: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/7.jpg)
![Page 8: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/8.jpg)
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…
![Page 9: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/9.jpg)
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
![Page 10: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/10.jpg)
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
![Page 11: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/11.jpg)
Hello, World!
Let’s build a simple console app
![Page 12: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/12.jpg)
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
![Page 13: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/13.jpg)
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
![Page 14: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/14.jpg)
Hello, World Wide Web!
Let’s build a simple web site
![Page 15: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/15.jpg)
![Page 16: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/16.jpg)
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
![Page 17: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/17.jpg)
![Page 18: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/18.jpg)
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
![Page 19: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/19.jpg)
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
![Page 20: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/20.jpg)
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!
![Page 21: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/21.jpg)
Building Up
Let’s add a simple controller with a dependency and ngAnnotate
![Page 22: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/22.jpg)
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)
![Page 23: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/23.jpg)
ngResource
Let’s add the angular-resource package and retrieve data from the server
![Page 24: Angular on ASP.NET MVC 6](https://reader033.vdocuments.site/reader033/viewer/2022052700/55bead7cbb61eb8b198b4795/html5/thumbnails/24.jpg)
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