angularjs für .net-entwickler

52
Alle Rechte liegen bei Peter Hecker.Vervielfältigung ist nicht erlaubt. Herzlich Willkommen! Gleich geht es los.

Upload: peter-hecker

Post on 15-Apr-2017

230 views

Category:

Software


0 download

TRANSCRIPT

Page 1: 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.

Herzlich Willkommen!Gleich geht es los.

Page 2: 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. AngularJS für .NET-Entwickler

Speaker/Referent: Peter Hecker, GFU Cyrus AG

Page 3: 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.

Peter Hecker• Trainer / Vorstand GFU Cyrus AG

• http://www.gfu.net

• Seit 1986: „Software“

• Seit 1995: „Web“

• Seit 2009: „Mobile“

• @phecker65 / @schulungen

Page 4: 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.

AngularJS für.NET-Entwickler

Page 5: 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

Page 6: 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

• Cross Device

• Smartphone, Tablet, Notebook, PC, TV, Car, Watch, Glasses etc.

• Cross Operating System

• Android, iOS, Windows, OS X, Linux etc.

Page 7: 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• „Platform/Runtime - Browser“

• „API/Framework - Web-Stack“

Page 8: 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

! " #

„Front-End“ „Back-End“

$ & '

& ' & '

Page 9: 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.

Themen

• AngularJS

• AngularJS und .NET

• Cross Platform Apps mit AngularJS und .NET

Page 10: 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.

AngularJS

Page 11: 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.

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“

Page 12: 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.

Die Welt von AngularJS

Directives

Expressions Controllers

Services

Templates

Models

Scope

Views

Data Binding

Models

Dependency

Directives

Filters

Routing

Module

Page 13: 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.

Page 14: 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.

Page 15: 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.

Page 16: 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.

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

Page 17: 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.

AngularJS und .NET

Page 18: 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.

„Front-End“:

$httpngRessource

„Back-End“:

Web Forms Web Services

WCF RESTMVC

Web API

$ ! " # & '

& ' & '

Ajax

REST

Page 19: 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.

$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

Page 20: 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.

$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

Page 21: 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.

$http / $resource

Page 22: 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.

Web API

MVC

WCF REST

Web Services

Web Forms Page Method $http

$httpMVC Actions

$resource

$http

$resource

JSON

Page 23: 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.

Page 24: 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.

Page 25: 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

Page 26: 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

! " #

„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

Page 27: 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.

Native, Web und Hybrid-Apps im Vergleich

Quelle: http://blog.meltmedia.com/2013/05/theres-more-than-one-way-to-build-mobile-apps/

Page 28: 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• 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.

Page 29: 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. 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

Page 30: 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.

http://cordova.apache.org/

Page 31: 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.

Von PhoneGap nach Apache Cordova

• 04/2009: Entwicklung durch Nitobi

• 10/2011: Kauf von Adobe

• 10/2011: Apache Cordova

Page 32: 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.

http://phonegap.com/

Page 33: 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.

$ sudo npm install cordova -g

$ cordova create myapp

$ cd myapp

$ cordova platform add ios android

$ cordova emulate ios

https://nodejs.org/

Page 34: 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.

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

Page 35: 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.

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

Page 36: 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.

Projekt erstellen

Page 37: 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.

Page 38: 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.

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

Page 39: 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.

Page 40: 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.

Page 41: 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.

Page 42: 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.

Page 43: 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.

Page 44: 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.

Page 45: 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.

Page 46: 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.

Page 47: 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.

Zusammenfassung

Page 48: 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.

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

Page 49: 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.

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/

Page 50: 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.

https://wiki.apache.org/cordova/who

AdobeBlackBerry

GoogleIBM

Intel CorporationMicrosoft Open Technologies Inc.

Mozilla

Page 51: 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.

[email protected], @phecker65, 0221/828090

„Fragen, Anregungen, Wünsche“

Page 52: 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.

Das war’s!