AngularJS für .NET-Entwickler

AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Herzlich Willkommen!
Gleich geht es los.

AngularJS
für .NET-Entwickler
Speaker/Referent:
Peter Hecker, GFU Cyrus AG

Peter Hecker
• Trainer / Vorstand GFU Cyrus AG
• http://www.gfu.net
• Seit 1986: „Software“
• Seit 1995: „Web“
• Seit 2009: „Mobile“
• @phecker65 / @schulungen

AngularJS für 
.NET-Entwickler

Cross Platform Apps
mit AngularJS und .NET

Cross Platform Apps
• Cross Device
• Smartphone, Tablet, Notebook, PC, TV, Car,
Watch, Glasses etc.
• Cross Operating System
• Android, iOS, Windows, OS X, Linux etc.

Cross Platform Apps
• „Platform/Runtime - Browser“
• „API/Framework - Web-Stack“

Cross Platform Apps
! "
#
„Front-End“ „Back-End“
$ & '
 & '  & '

Themen
• AngularJS
• AngularJS und .NET
• Cross Platform Apps mit AngularJS und .NET

AngularJS

AngularJS
HTML enhanced for web apps!
 View on GitHub  DownloadDownload ((1.3.16 /1.3.16 / 1.4.01.4.0))  Design Docs & NotesDesign Docs & Notes
Follow +AngularJS on FollowFollow @angularjs@angularjs 67.6K followers TweetTweet 4,937
Learn Angular in your browser for free!
 HomeHome  LearnLearn  DevelopDevelop  DiscussDiscuss Search
„A Client side Java-Script Framework  
for adding interactivity to HTML“

Die Welt von AngularJS
Directives
Expressions Controllers
Services
Templates
Models
Scope
Views
Data Binding
Models
Dependency
Directives
Filters
Routing
Module

MVC, MVVM, MV*
• „The values that are stored in variables on the
Angular Scope are referred to as the Model.“
• „A View is based on templates and expressions; a
view is what the user sees (the DOM)“
• „A Controller is a JavaScript constructor function
that is used to augment the Angular Scope.“
• „$scope is the ‚glue‘ (ViewModel) between a
Controller and a View.“
View Controller$scope

AngularJS und .NET

„Front-End“:
$http
ngRessource
„Back-End“:
Web Forms
Web Services
WCF REST
MVC
Web API
$
! "
# & '
 & '  & '
Ajax
REST

$http
• „The $http service is a core Angular service that
facilitates communication with the remote HTTP
servers via the browser's XMLHttpRequest object
or via JSONP“
• GET, POST, HEAD, DELETE, PUT, JSONP

$resource
• „$resource is a service in module ngResource, a
factory which creates a resource object that lets
you interact with RESTful server-side data sources.
The returned resource object has action methods
which provide high-level behaviors without the
need to interact with the low level $http service.“
• Get, Save, Query, Remove, Delete

$http / $resource

Web API
MVC
WCF REST
Web Services
Web Forms Page Method $http
$httpMVC Actions
$resource
$http
$resource
JSON

Cross Platform Apps
! "
#
„Front-End“ „Back-End“
$ & '
 & '  & '
Cordova
NW.js
Built on Electron Get Started Repository Documentation Blog Discuss
Build cross platform desktop apps with web
technologies
Formerly known as Atom Shell. Made with ♥ by GitHub.
Electron

Native, Web und Hybrid-Apps im
Vergleich
Quelle: http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps/

Cross Platform Apps
• Mobile: Android, iOS, Windows, etc
• Apache Cordova
• Desktop: Windows, Linux, OSX
• NW.js (Formerly known as node-webkit)
• Electron (Formerly known as Atom Shell)
Built on Electron Get Started
Build cross p
Formerly know

Cordova
NW.js
Built on Electron Get Started Repository Documentation Blog Discuss
Build cross platform desktop apps with web
technologies
Formerly known as Atom Shell. Made with ♥ by GitHub.
Electron

http://cordova.apache.org/

Von PhoneGap nach
Apache Cordova
• 04/2009: Entwicklung durch
Nitobi
• 10/2011: Kauf von Adobe
• 10/2011: Apache Cordova

http://phonegap.com/

$ sudo npm install cordova -g
$ cordova create myapp
$ cd myapp
$ cordova platform add ios android
$ cordova emulate ios
https://nodejs.org/

https://www.visualstudio.com/en-us/features/cordova-vs.aspx

https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx

Projekt erstellen

Create amazing appsCreate amazing apps
The beautiful, open source front-end SDK forThe beautiful, open source front-end SDK for
developing hybrid mobile apps with HTML5.developing hybrid mobile apps with HTML5.
Get startedDownload beta
v1.0.0-beta.13 "lanthanum-leopard" · 2014-09-24 · MIT Licensed
Hacker News App
 11,62611,626 starsstars  1,5221,522 forksforks  14.4K followers14.4K followers Enter your email for the latest ionic news Subscribe
Announcing the Ionic Creator BetaAnnouncing the Ionic Creator Beta
Products Getting Started Docs Showcase Forum Blog
11

Zusammenfassung

Microsoft und AngularJS
http://t3n.de/news/angularjs-20-typescript-597814/

Microsoft und Cross Platform
http://news.microsoft.com/2014/11/12/microsoft-takes-net-open-source-and-
cross-platform-adds-new-development-capabilities-with-visual-studio-2015-
net-2015-and-visual-studio-online/

https://wiki.apache.org/cordova/who
Adobe
BlackBerry
Google
IBM
Intel Corporation
Microsoft Open Technologies Inc.
Mozilla

peter@gfu.net, @phecker65, 0221/828090
„Fragen, Anregungen, Wünsche“

Das war’s!

AngularJS für .NET-Entwickler

Weitere ähnliche Inhalte

Andere mochten auch (15)

Ähnlich wie AngularJS für .NET-Entwickler (20)

Mehr von Peter Hecker (11)

AngularJS für .NET-Entwickler