SlideShare ist ein Scribd-Unternehmen logo
SPA mit AngularJS und
ASP.net Web API
Eugen Schäfer @ 247GRAD Labs GmbH

Eugen Schäfer

@Eugen_Schaefer

Eugen.Schaefer@247grad.de
Ablauf
• Warum AngularJS?
• Databinding
• Directive
• Dependency Injection

• Warum ASP.net Web API?
• Facebook Login mit Microsoft OAuth
• LIVE DEMO
Warum AngularJS?
• Weniger UI Code
• Seperation of concerns durch MV*

• Databinding
Quelle: angularjs.org

• Directive

• Dependency Injection
Seperation of concerns durch MV*
MVVM

MVC

MV*
View

$scope

Controller
Trennung zwischen Model/View/Controller
Databinding „two-way-binding“
Directive
Dependency Injection
Warum ASP.net Web API?
• RESTful Services (GET, POST, PUT, DELETE)
• ASP.net 4.5 Infrastruktur
Bundling

Routing
Models
JSON Serialisierung
PartialViews
Facebook Login mit Microsoft OAuth
LIVE DEMO!
Get connected

www.247grad-connect.com
Zähle zu den ersten Beta-Testern.

Weitere ähnliche Inhalte

Ähnlich wie SPA (Single Page Application) mit AngularJS und ASP.net Web API

AngularJS
AngularJSAngularJS
AngularJS
gedoplan
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 
AngularJs
AngularJsAngularJs
AngularJs
NETUserGroupBern
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerSandro Sonntag
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft AG
 
Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft AG
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
NETUserGroupBern
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
Peter Kirchner
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Marc Müller
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Wie Azure Jakarta EE Nutzt
Wie Azure Jakarta EE NutztWie Azure Jakarta EE Nutzt
Wie Azure Jakarta EE Nutzt
Edward Burns
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
Manfred Steyer
 
Datenbasierte Services mit MVC Core 1 und EF Core 1
Datenbasierte Services mit MVC Core 1 und EF Core 1Datenbasierte Services mit MVC Core 1 und EF Core 1
Datenbasierte Services mit MVC Core 1 und EF Core 1
Manfred Steyer
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro sessionVirttoo org
 

Ähnlich wie SPA (Single Page Application) mit AngularJS und ASP.net Web API (20)

AngularJS
AngularJSAngularJS
AngularJS
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
AngularJs
AngularJsAngularJs
AngularJs
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
Creasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVCCreasoft Akademie - Deep dive into ASP.NET MVC
Creasoft Akademie - Deep dive into ASP.NET MVC
 
Creasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVCCreasoft Akademie - Deep Dive into ASP.NET MVC
Creasoft Akademie - Deep Dive into ASP.NET MVC
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
Web APIs auf dem Prüfstand - Volle Kontrolle oder fertig mit den Azure Mobile...
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Wie Azure Jakarta EE Nutzt
Wie Azure Jakarta EE NutztWie Azure Jakarta EE Nutzt
Wie Azure Jakarta EE Nutzt
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Datenbasierte Services mit MVC Core 1 und EF Core 1
Datenbasierte Services mit MVC Core 1 und EF Core 1Datenbasierte Services mit MVC Core 1 und EF Core 1
Datenbasierte Services mit MVC Core 1 und EF Core 1
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 

Mehr von AllFacebook.de

„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
AllFacebook.de
 
Grow Up. Finally.
Grow Up. Finally.Grow Up. Finally.
Grow Up. Finally.
AllFacebook.de
 
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
AllFacebook.de
 
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
AllFacebook.de
 
Instagram 2020 #AFBMC
Instagram 2020 #AFBMCInstagram 2020 #AFBMC
Instagram 2020 #AFBMC
AllFacebook.de
 
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCTikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
AllFacebook.de
 
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
AllFacebook.de
 
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCTake your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
AllFacebook.de
 
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCWie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
AllFacebook.de
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
AllFacebook.de
 
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCExperimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
AllFacebook.de
 
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCGeheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
AllFacebook.de
 
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
AllFacebook.de
 
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCOnlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
AllFacebook.de
 
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
AllFacebook.de
 
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
AllFacebook.de
 
Social Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCSocial Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMC
AllFacebook.de
 
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
AllFacebook.de
 
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
AllFacebook.de
 
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
AllFacebook.de
 

Mehr von AllFacebook.de (20)

„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
 
Grow Up. Finally.
Grow Up. Finally.Grow Up. Finally.
Grow Up. Finally.
 
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
 
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
 
Instagram 2020 #AFBMC
Instagram 2020 #AFBMCInstagram 2020 #AFBMC
Instagram 2020 #AFBMC
 
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCTikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
 
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
 
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCTake your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
 
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCWie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
 
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCExperimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
 
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCGeheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
 
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
 
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCOnlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
 
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
 
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
 
Social Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCSocial Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMC
 
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
 
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
 
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
 

SPA (Single Page Application) mit AngularJS und ASP.net Web API