Angular on ASP.NET MVC 6
Download as PPTX, PDF•2 likes•1,988 views
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.
Angular on ASP.NET MVC 6
- 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: [email protected] or [email protected]
- 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