Downloaded 54 times
Uploaded byNoam Kfir
Angular on ASP.NET MVC 6
ASP.NET 5 is a modern, open-source, and cross-platform framework that has been almost completely rewritten, focusing on deep integration with frontend tools like Gulp, Bower, and NPM. It includes MVC 6 and a merged Web API, making it suitable for Angular applications, while Visual Studio offers essential tools and extensions to enhance Angular development. The document outlines key features, tooling, and development approaches within this framework, emphasizing its modularity and flexibility.
More Related Content
Similar to Angular on ASP.NET MVC 6
Angular on ASP.NET MVC 6
- 1. Angular on ASP.NETMVC 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.
- 4. .NET Fragmentation .NETis 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 tothe 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 ata 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 .xprojreplaces .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 builda 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 WideWeb! 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 Bowerdependency 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 Avoidcreating 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 adda simple controller with a dependency and ngAnnotate
- 22. Consuming APIs WebAPI 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 theangular-resource package and retrieve data from the server
- 24. Summary ASP.NET 5has 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