angularjs für .net-entwickler
TRANSCRIPT
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Herzlich Willkommen!Gleich geht es los.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t. AngularJS für .NET-Entwickler
Speaker/Referent: Peter Hecker, GFU Cyrus AG
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Peter Hecker• Trainer / Vorstand GFU Cyrus AG
• http://www.gfu.net
• Seit 1986: „Software“
• Seit 1995: „Web“
• Seit 2009: „Mobile“
• @phecker65 / @schulungen
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
AngularJS für.NET-Entwickler
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps mit AngularJS und .NET
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps
• Cross Device
• Smartphone, Tablet, Notebook, PC, TV, Car, Watch, Glasses etc.
• Cross Operating System
• Android, iOS, Windows, OS X, Linux etc.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps• „Platform/Runtime - Browser“
• „API/Framework - Web-Stack“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps
! " #
„Front-End“ „Back-End“
$ & '
& ' & '
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Themen
• AngularJS
• AngularJS und .NET
• Cross Platform Apps mit AngularJS und .NET
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
AngularJS
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
AngularJS
Why AngularJS?HTML is great for declaring static documents, but it
AlternativesOther frameworks deal with HTML’s shortcomings
ExtensibilityAngularJS is a toolset for building the framework
HTML enhanced for web apps!
View on GitHub Download Download ((1.3.16 / 1.3.16 / 1.4.01.4.0)) Design Docs & Notes Design Docs & Notes
Follow +AngularJS on Follow Follow @angularjs@angularjs 67.6K followers TweetTweet 4,937
Learn Angular in your browser for free!
Home Home Learn Learn Develop Develop Discuss Discuss Search
„A Client side Java-Script Framework for adding interactivity to HTML“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Die Welt von AngularJS
Directives
Expressions Controllers
Services
Templates
Models
Scope
Views
Data Binding
Models
Dependency
Directives
Filters
Routing
Module
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
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
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
AngularJS und .NET
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
„Front-End“:
$httpngRessource
„Back-End“:
Web Forms Web Services
WCF RESTMVC
Web API
$ ! " # & '
& ' & '
Ajax
REST
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
$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
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
$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
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
$http / $resource
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Web API
MVC
WCF REST
Web Services
Web Forms Page Method $http
$httpMVC Actions
$resource
$http
$resource
JSON
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Cross Platform Apps mit AngularJS und .NET
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
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 webtechnologies
Formerly known as Atom Shell. Made with ♥ by GitHub.
Electron
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Native, Web und Hybrid-Apps im Vergleich
Quelle: http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
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 Repository Documentation Blog Discuss
Build cross platform desktop apps with webtechnologies
Formerly known as Atom Shell. Made with ♥ by GitHub.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t. Cordova
NW.js
Built on Electron Get Started Repository Documentation Blog Discuss
Build cross platform desktop apps with webtechnologies
Formerly known as Atom Shell. Made with ♥ by GitHub.
Electron
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://cordova.apache.org/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Von PhoneGap nach Apache Cordova
• 04/2009: Entwicklung durch Nitobi
• 10/2011: Kauf von Adobe
• 10/2011: Apache Cordova
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
http://phonegap.com/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
$ sudo npm install cordova -g
$ cordova create myapp
$ cd myapp
$ cordova platform add ios android
$ cordova emulate ios
https://nodejs.org/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://www.visualstudio.com/en-us/features/cordova-vs.aspx
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Projekt erstellen
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Create amazing appsCreate amazing appsThe beautiful, open source front-end SDK forThe beautiful, open source front-end SDK fordeveloping 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 stars stars 1,5221,522 forks forks 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 Blog11
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Zusammenfassung
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Microsoft und AngularJShttp://t3n.de/news/angularjs-20-typescript-597814/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Microsoft und Cross Platformhttp://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/
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
https://wiki.apache.org/cordova/who
AdobeBlackBerry
GoogleIBM
Intel CorporationMicrosoft Open Technologies Inc.
Mozilla
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
[email protected], @phecker65, 0221/828090
„Fragen, Anregungen, Wünsche“
Alle
Rec
hte
liege
n be
i Pet
er H
ecke
r. Ver
viel
fälti
gung
ist
nich
t er
laub
t.
Das war’s!