SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
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
Angular on ASP.NET MVC 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!
Angular on ASP.NET MVC 6
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
Angular on ASP.NET MVC 6
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
Angular on ASP.NET MVC 6
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

Más contenido relacionado

La actualidad más candente

ASP .NET MVC
ASP .NET MVC ASP .NET MVC
ASP .NET MVC eldorina
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Thomas Robbins
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentationivpol
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantNitin Sawant
 
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training sessionHrichi Mohamed
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETPeter Gfader
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Alexandre Malavasi
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0Ido Flatow
 
Unpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc TechnologiesUnpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc TechnologiesEastBanc Tachnologies
 
Asp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework CoreAsp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework Coremohamed elshafey
 
ASP.NET 5 Overview: Post RTM
ASP.NET 5 Overview: Post RTMASP.NET 5 Overview: Post RTM
ASP.NET 5 Overview: Post RTMShahed Chowdhuri
 

La actualidad más candente (20)

ASP .NET MVC
ASP .NET MVC ASP .NET MVC
ASP .NET MVC
 
ASP.NET Brief History
ASP.NET Brief HistoryASP.NET Brief History
ASP.NET Brief History
 
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant
 
Web api
Web apiWeb api
Web api
 
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
 
AngularJS Scopes
AngularJS ScopesAngularJS Scopes
AngularJS Scopes
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
ASP .net MVC
ASP .net MVCASP .net MVC
ASP .net MVC
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0
 
Unpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc TechnologiesUnpacking .NET Core | EastBanc Technologies
Unpacking .NET Core | EastBanc Technologies
 
Asp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework CoreAsp.Net Core MVC , Razor page , Entity Framework Core
Asp.Net Core MVC , Razor page , Entity Framework Core
 
ASP .NET MVC - best practices
ASP .NET MVC - best practicesASP .NET MVC - best practices
ASP .NET MVC - best practices
 
ASP.NET 5 Overview: Post RTM
ASP.NET 5 Overview: Post RTMASP.NET 5 Overview: Post RTM
ASP.NET 5 Overview: Post RTM
 

Similar a Angular on ASP.NET MVC 6

Pottnet Meetup Essen - ASP.Net Core
Pottnet Meetup Essen - ASP.Net CorePottnet Meetup Essen - ASP.Net Core
Pottnet Meetup Essen - ASP.Net CoreMalte Lantin
 
Pottnet MeetUp Essen - ASP.Net Core
Pottnet MeetUp Essen - ASP.Net CorePottnet MeetUp Essen - ASP.Net Core
Pottnet MeetUp Essen - ASP.Net CoreMalte Lantin
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Bluegrass Digital
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - IntroductionWebStackAcademy
 
Building Applications With the MEAN Stack
Building Applications With the MEAN StackBuilding Applications With the MEAN Stack
Building Applications With the MEAN StackNir Noy
 
ASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsKen Cenerelli
 
Javascript Client & Server Architectures
Javascript Client & Server ArchitecturesJavascript Client & Server Architectures
Javascript Client & Server ArchitecturesPedro Melo Pereira
 
Cloud development technology sharing (BlueMix premier)
Cloud development technology sharing (BlueMix premier)Cloud development technology sharing (BlueMix premier)
Cloud development technology sharing (BlueMix premier)湯米吳 Tommy Wu
 
The path to a serverless-native era with Kubernetes
The path to a serverless-native era with KubernetesThe path to a serverless-native era with Kubernetes
The path to a serverless-native era with Kubernetessparkfabrik
 
Deploy an Asp.Net Core App on Azure
Deploy an Asp.Net Core App on AzureDeploy an Asp.Net Core App on Azure
Deploy an Asp.Net Core App on AzureMichele Aponte
 
Overview of .Net Framework
Overview of .Net FrameworkOverview of .Net Framework
Overview of .Net FrameworkNeha Singh
 
Halton Software Peer 2 Peer Meetup #10
Halton Software Peer 2 Peer Meetup #10Halton Software Peer 2 Peer Meetup #10
Halton Software Peer 2 Peer Meetup #10David Ashton
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Osconvijayrvr
 
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UIAsp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UILohith Goudagere Nagaraj
 

Similar a Angular on ASP.NET MVC 6 (20)

Pottnet Meetup Essen - ASP.Net Core
Pottnet Meetup Essen - ASP.Net CorePottnet Meetup Essen - ASP.Net Core
Pottnet Meetup Essen - ASP.Net Core
 
Pottnet MeetUp Essen - ASP.Net Core
Pottnet MeetUp Essen - ASP.Net CorePottnet MeetUp Essen - ASP.Net Core
Pottnet MeetUp Essen - ASP.Net Core
 
Short-Training asp.net vNext
Short-Training asp.net vNextShort-Training asp.net vNext
Short-Training asp.net vNext
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
.Net Core
.Net Core.Net Core
.Net Core
 
Building Applications With the MEAN Stack
Building Applications With the MEAN StackBuilding Applications With the MEAN Stack
Building Applications With the MEAN Stack
 
Project K, Vnext and Owin
Project K, Vnext and OwinProject K, Vnext and Owin
Project K, Vnext and Owin
 
ASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bits
 
Getting Started with ASP.NET vNext
Getting Started with ASP.NET vNextGetting Started with ASP.NET vNext
Getting Started with ASP.NET vNext
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Javascript Client & Server Architectures
Javascript Client & Server ArchitecturesJavascript Client & Server Architectures
Javascript Client & Server Architectures
 
Cloud development technology sharing (BlueMix premier)
Cloud development technology sharing (BlueMix premier)Cloud development technology sharing (BlueMix premier)
Cloud development technology sharing (BlueMix premier)
 
【BS1】What’s new in visual studio 2022 and c# 10
【BS1】What’s new in visual studio 2022 and c# 10【BS1】What’s new in visual studio 2022 and c# 10
【BS1】What’s new in visual studio 2022 and c# 10
 
The path to a serverless-native era with Kubernetes
The path to a serverless-native era with KubernetesThe path to a serverless-native era with Kubernetes
The path to a serverless-native era with Kubernetes
 
Deploy an Asp.Net Core App on Azure
Deploy an Asp.Net Core App on AzureDeploy an Asp.Net Core App on Azure
Deploy an Asp.Net Core App on Azure
 
Overview of .Net Framework
Overview of .Net FrameworkOverview of .Net Framework
Overview of .Net Framework
 
Halton Software Peer 2 Peer Meetup #10
Halton Software Peer 2 Peer Meetup #10Halton Software Peer 2 Peer Meetup #10
Halton Software Peer 2 Peer Meetup #10
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Oscon
 
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UIAsp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UI
 

Más de Noam Kfir

Agile Mind Games and the Art of Self-Delusion
Agile Mind Games and the Art of Self-DelusionAgile Mind Games and the Art of Self-Delusion
Agile Mind Games and the Art of Self-DelusionNoam Kfir
 
Testers and Coders - Blurring the Lines
Testers and Coders - Blurring the LinesTesters and Coders - Blurring the Lines
Testers and Coders - Blurring the LinesNoam Kfir
 
TDD and the Legacy Code Black Hole
TDD and the Legacy Code Black HoleTDD and the Legacy Code Black Hole
TDD and the Legacy Code Black HoleNoam Kfir
 
TypeScript Modules
TypeScript ModulesTypeScript Modules
TypeScript ModulesNoam Kfir
 
There Is No JavaScript
There Is No JavaScriptThere Is No JavaScript
There Is No JavaScriptNoam Kfir
 
Maximizing UI Automation – A Case Study
Maximizing UI Automation – A Case StudyMaximizing UI Automation – A Case Study
Maximizing UI Automation – A Case StudyNoam Kfir
 
Web components
Web componentsWeb components
Web componentsNoam Kfir
 
HTML5 and the Evolution of the Web
HTML5 and the Evolution of the WebHTML5 and the Evolution of the Web
HTML5 and the Evolution of the WebNoam Kfir
 
Git Workflows
Git WorkflowsGit Workflows
Git WorkflowsNoam Kfir
 
Getting Started with Git: A Primer for SVN and TFS Users
Getting Started with Git: A Primer for SVN and TFS UsersGetting Started with Git: A Primer for SVN and TFS Users
Getting Started with Git: A Primer for SVN and TFS UsersNoam Kfir
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaNoam Kfir
 
Telerik Platform
Telerik PlatformTelerik Platform
Telerik PlatformNoam Kfir
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceNoam Kfir
 
Drawing in HTML5 Open House
Drawing in HTML5 Open HouseDrawing in HTML5 Open House
Drawing in HTML5 Open HouseNoam Kfir
 

Más de Noam Kfir (16)

Agile Mind Games and the Art of Self-Delusion
Agile Mind Games and the Art of Self-DelusionAgile Mind Games and the Art of Self-Delusion
Agile Mind Games and the Art of Self-Delusion
 
Testers and Coders - Blurring the Lines
Testers and Coders - Blurring the LinesTesters and Coders - Blurring the Lines
Testers and Coders - Blurring the Lines
 
TDD and the Legacy Code Black Hole
TDD and the Legacy Code Black HoleTDD and the Legacy Code Black Hole
TDD and the Legacy Code Black Hole
 
TypeScript Modules
TypeScript ModulesTypeScript Modules
TypeScript Modules
 
There Is No JavaScript
There Is No JavaScriptThere Is No JavaScript
There Is No JavaScript
 
Meteor
MeteorMeteor
Meteor
 
Clean code
Clean codeClean code
Clean code
 
Maximizing UI Automation – A Case Study
Maximizing UI Automation – A Case StudyMaximizing UI Automation – A Case Study
Maximizing UI Automation – A Case Study
 
Web components
Web componentsWeb components
Web components
 
HTML5 and the Evolution of the Web
HTML5 and the Evolution of the WebHTML5 and the Evolution of the Web
HTML5 and the Evolution of the Web
 
Git Workflows
Git WorkflowsGit Workflows
Git Workflows
 
Getting Started with Git: A Primer for SVN and TFS Users
Getting Started with Git: A Primer for SVN and TFS UsersGetting Started with Git: A Primer for SVN and TFS Users
Getting Started with Git: A Primer for SVN and TFS Users
 
Building Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using CordovaBuilding Cross-Platform JavaScript Apps using Cordova
Building Cross-Platform JavaScript Apps using Cordova
 
Telerik Platform
Telerik PlatformTelerik Platform
Telerik Platform
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Drawing in HTML5 Open House
Drawing in HTML5 Open HouseDrawing in HTML5 Open House
Drawing in HTML5 Open House
 

Último

JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 

Último (20)

Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Program with GUTs
Program with GUTsProgram with GUTs
Program with GUTs
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 

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: noam@kfir.cc or noamkfir@sela.co.il
  • 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