SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
.NET
User
Group
Bern
Daniel Schädler
schaedlerdaniel.wordpress.com
schaedld@windowslive.com
schaedld
Follow dnugbe on twitter
http://www.dnug-bern.ch/rss.aspx
DNUG Bern Regionalsponsoren
DNUG Bern Sachsponsoren
Heutiges Twitter-Hashtag
#dnugbemix
Daniel Schädler
• Angestellt beim FUB /VBS
• Aufgabenbereich Zeit:
– Modularisierung der bestehenden
Geschäftslösung (WPF /Prism /MEF)
– AIS (Auftrags Informations System) ASP.NET
WebForms 3.5 / WSCF 2007
– KpManager (Militärische Bestellplattform
aufbauend auf AIS-Datenmodell) ASP.NET
WebForms 4.0 /WSCF 2010
– Datenhistoriesungskonzept
– Integration des Team Foundation Server’s 2012
Hinweis: Verwendung für eigene Präsentationen nur mit Einverständnis des Autors
Agenda
• Voraussetzungen
• Das JavaScript Bibliotheken Universum
• Was ist AngularJS?
• AngularJS
– Die Basis
• Ng-app
• Ng-repeat
• Ng-Controller
• $scope
• $ng-model
• Weitere Informationen zu AngularJs
Voraussetzungen
• Eine entsprechende DIE
(WebMatrix3, Visual Studio 2010/2012 und
weitere)
• Bei JSON Datenquellen, sicherstellen dass der
WebServer den MIME Type registriert hat (für IIS
und IIS Express: appcmd set config
/section:staticContent
/+[fileExtension='.json',mimeType='text/javascrip
t'])
• Wenn JSON Fehler von AngularJS gemeldet, dann
eventuell nur ‘’ Zeichen verwendet anstelle von
«»
Das JavaScript Bibliotheken Universum
Framework License Dependency
AngularJS MIT License NO
ActiveJS MIT License NO
Agility MIT License jQuery
Asana Luna MIT License NO
Backbone.js MIT License jQuery
Batman MIT License CoffeeScript
Cappuccino LGPL License (v2.1) jQuery
Choco FREE Sammy,js-model,Jim
CorMVC FREE jQuery
Eyeballs MIT License NO
ExJS GPLv3 and Commercial NO
Jamal FREE jQuery
JavaScriptMVC MIT License jQuery,OpenAjax
Knockout.js GPLv3 and commercial jQuery
KendoUI MIT License NO
PureMVC CC +Attribution NO
Sammy MIT License jQuery
Spine MIT License CoffeeScript
TrimJunction Open Source NO
Qooxdoo LGPL and EPL jQuery,OpenAjax
Quelle: http://www.faridesign.net/2012/04/20-javascript-frameworks-mvvm-templating-licenses-etc/
Was ist AngularJs
• Aktuelle Version (stand Juni 2013)
1.06/1.14
• JavaScript Model View View Model Bibliothek
• Vollständig JavaScript basiert
• Einfaches DataBinding
• Eingebaute Formular Validierung
• «Eingebaute Lokalisierung»
• «Eingebaute Pluralisierung»
AngularJS im Detail
Was ist ng-app?
• Zustäding für das Bootstrapping einer
AngularJS Applikation
• Wird im HTML Tag eingebunden
<html ng-app>
• Legt die Wurzel (Root) der Applikation fest
• Nur einmal pro HTML-Dokument verwendbar.
• Weitere Informationen
http://docs.angularjs.org/api/ng.directive:
ngApp
Ng-Controller
• Bindet ein Verhalten (Behavior) zu einem Scope
• Ng-Controller legt eine Controller Klasse fest
• Zuständig für die Geschäftslogik
• Alternativer Weg für die Controller Deklaration =
$route
• Weitere Controller Informationen
http://docs.angularjs.org/api/ng.directive:ngCon
troller
http://docs.angularjs.org/guide/dev_guide.mvc.
understanding_controller
Ng-model
• Bindet die Sicht (View) an das Model (input,
textarea etc.)
• Stellt Validierung zur Verfügung
• Setzt die relevanten CSS-Klassen auf das
involvierte Element
• Registriert das Control mit dem Eltern-Formular
• Kann in Verbindung mit einem Filter verwendet
werden.
• Weitere Informationen
(http://docs.angularjs.org/api/ng.directive:ngMo
del)
Ng-Repeat
• Initiliaisiert ein template item für eine
Collection (Analog einem ItemTemplate in
WPF /Silverlight)
• Iterierung einer Collection möglich
• Weitere Informationen
(http://docs.angularjs.org/api/ng.directi
ve:ngRepeat)
$scope
• Bindeglied zwischen View und Controler
• Eigentlich das ViewModel (Dan Wahlin’s
vergleich der passt)
• $scope wird beim Controller injected
• $scope (fast) beliebig erweiterbar
• Eng mit dem Controller verdrahtet (vgl.
Controller Informationen)
AngularJs ein kleines Beispiel
DEMO
Weiterführende Ressourcen
• http://docs.angularjs.org/tutorial
• http://docs.angularjs.org/guide/
• http://egghead.io
• http://youtu.be/i9MHigUZKEM
(AngularJS Fundamentals in 60-is Minutes)
• AngularJS Cheat Sheet
http://www.cheatography.com/proloser/
cheat-sheets/angularjs/
Fragen und Diskussion

Weitere ähnliche Inhalte

Ähnlich wie AngularJs

JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresMatthias Jauernig
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkDieter Ziegler
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!adesso AG
 
MongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows AzureMongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows AzureJan Hentschel
 
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
 
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
 
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
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDIadesso AG
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom ComponentsManfred Steyer
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveManfred Steyer
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurtdasjo
 
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreibenSQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreibenJan Hentschel
 

Ähnlich wie AngularJs (20)

JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
Einführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core MiddlewaresEinführung in ASP.NET Core Middlewares
Einführung in ASP.NET Core Middlewares
 
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS FrameworkBeschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
Beschleunigen Sie Ihre Web-Entwicklung mit AngularJS Framework
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!
Durchgestartet? Eine Einführung in die Google App Engine / Java - Reloaded!
 
MongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows AzureMongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows Azure
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
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
 
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
 
Vorstellung von Ember.js
Vorstellung von Ember.jsVorstellung von Ember.js
Vorstellung von Ember.js
 
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
 
imatics FormEngine
imatics FormEngineimatics FormEngine
imatics FormEngine
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom Components
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurt
 
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreibenSQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
SQL Server auf Infrastructure-as-a-Services (IaaS) in der Cloud betreiben
 

Mehr von NETUserGroupBern

Large Language Models, Data & APIs - Integrating Generative AI Power into you...
Large Language Models, Data & APIs - Integrating Generative AI Power into you...Large Language Models, Data & APIs - Integrating Generative AI Power into you...
Large Language Models, Data & APIs - Integrating Generative AI Power into you...NETUserGroupBern
 
Securing .NET Core, ASP.NET Core applications
Securing .NET Core, ASP.NET Core applicationsSecuring .NET Core, ASP.NET Core applications
Securing .NET Core, ASP.NET Core applicationsNETUserGroupBern
 
Application Security in ASP.NET Core
Application Security in ASP.NET CoreApplication Security in ASP.NET Core
Application Security in ASP.NET CoreNETUserGroupBern
 
Ruby und Rails für .NET Entwickler
Ruby und Rails für .NET EntwicklerRuby und Rails für .NET Entwickler
Ruby und Rails für .NET EntwicklerNETUserGroupBern
 
What Doctors Can Teach Us on Continuous Learning
What Doctors Can Teach Us on Continuous LearningWhat Doctors Can Teach Us on Continuous Learning
What Doctors Can Teach Us on Continuous LearningNETUserGroupBern
 
Entity Framework Core - Der Umstieg auf Core
Entity Framework Core - Der Umstieg auf CoreEntity Framework Core - Der Umstieg auf Core
Entity Framework Core - Der Umstieg auf CoreNETUserGroupBern
 
Weiches Zeugs für harte Jungs und Mädels
Weiches Zeugs für harte Jungs und MädelsWeiches Zeugs für harte Jungs und Mädels
Weiches Zeugs für harte Jungs und MädelsNETUserGroupBern
 
Änderungen im Cardinality Estimator SQL Server 2014
Änderungen im Cardinality Estimator SQL Server 2014Änderungen im Cardinality Estimator SQL Server 2014
Änderungen im Cardinality Estimator SQL Server 2014NETUserGroupBern
 
Refactoring: Mythen & Fakten
Refactoring: Mythen & FaktenRefactoring: Mythen & Fakten
Refactoring: Mythen & FaktenNETUserGroupBern
 
Pragmatische Anforderungen
Pragmatische AnforderungenPragmatische Anforderungen
Pragmatische AnforderungenNETUserGroupBern
 
What the hell is PowerShell?
What the hell is PowerShell?What the hell is PowerShell?
What the hell is PowerShell?NETUserGroupBern
 
BDD mit Machine.Specifications (MSpec)
BDD mit Machine.Specifications (MSpec)BDD mit Machine.Specifications (MSpec)
BDD mit Machine.Specifications (MSpec)NETUserGroupBern
 
.NETworking Workshop Design Thinking
.NETworking Workshop Design Thinking.NETworking Workshop Design Thinking
.NETworking Workshop Design ThinkingNETUserGroupBern
 

Mehr von NETUserGroupBern (20)

Large Language Models, Data & APIs - Integrating Generative AI Power into you...
Large Language Models, Data & APIs - Integrating Generative AI Power into you...Large Language Models, Data & APIs - Integrating Generative AI Power into you...
Large Language Models, Data & APIs - Integrating Generative AI Power into you...
 
AAD und .NET
AAD und .NETAAD und .NET
AAD und .NET
 
SHIFT LEFT WITH DEVSECOPS
SHIFT LEFT WITH DEVSECOPSSHIFT LEFT WITH DEVSECOPS
SHIFT LEFT WITH DEVSECOPS
 
Securing .NET Core, ASP.NET Core applications
Securing .NET Core, ASP.NET Core applicationsSecuring .NET Core, ASP.NET Core applications
Securing .NET Core, ASP.NET Core applications
 
Application Security in ASP.NET Core
Application Security in ASP.NET CoreApplication Security in ASP.NET Core
Application Security in ASP.NET Core
 
Ruby und Rails für .NET Entwickler
Ruby und Rails für .NET EntwicklerRuby und Rails für .NET Entwickler
Ruby und Rails für .NET Entwickler
 
Einführung in RavenDB
Einführung in RavenDBEinführung in RavenDB
Einführung in RavenDB
 
What Doctors Can Teach Us on Continuous Learning
What Doctors Can Teach Us on Continuous LearningWhat Doctors Can Teach Us on Continuous Learning
What Doctors Can Teach Us on Continuous Learning
 
Entity Framework Core - Der Umstieg auf Core
Entity Framework Core - Der Umstieg auf CoreEntity Framework Core - Der Umstieg auf Core
Entity Framework Core - Der Umstieg auf Core
 
Weiches Zeugs für harte Jungs und Mädels
Weiches Zeugs für harte Jungs und MädelsWeiches Zeugs für harte Jungs und Mädels
Weiches Zeugs für harte Jungs und Mädels
 
Änderungen im Cardinality Estimator SQL Server 2014
Änderungen im Cardinality Estimator SQL Server 2014Änderungen im Cardinality Estimator SQL Server 2014
Änderungen im Cardinality Estimator SQL Server 2014
 
Rest Fundamentals
Rest FundamentalsRest Fundamentals
Rest Fundamentals
 
Refactoring: Mythen & Fakten
Refactoring: Mythen & FaktenRefactoring: Mythen & Fakten
Refactoring: Mythen & Fakten
 
Pragmatische Anforderungen
Pragmatische AnforderungenPragmatische Anforderungen
Pragmatische Anforderungen
 
Einführung in MongoDB
Einführung in MongoDBEinführung in MongoDB
Einführung in MongoDB
 
What the hell is PowerShell?
What the hell is PowerShell?What the hell is PowerShell?
What the hell is PowerShell?
 
Know your warm up
Know your warm upKnow your warm up
Know your warm up
 
BDD mit Machine.Specifications (MSpec)
BDD mit Machine.Specifications (MSpec)BDD mit Machine.Specifications (MSpec)
BDD mit Machine.Specifications (MSpec)
 
Versionskontrolle mit Git
Versionskontrolle mit GitVersionskontrolle mit Git
Versionskontrolle mit Git
 
.NETworking Workshop Design Thinking
.NETworking Workshop Design Thinking.NETworking Workshop Design Thinking
.NETworking Workshop Design Thinking
 

AngularJs

  • 5. Daniel Schädler • Angestellt beim FUB /VBS • Aufgabenbereich Zeit: – Modularisierung der bestehenden Geschäftslösung (WPF /Prism /MEF) – AIS (Auftrags Informations System) ASP.NET WebForms 3.5 / WSCF 2007 – KpManager (Militärische Bestellplattform aufbauend auf AIS-Datenmodell) ASP.NET WebForms 4.0 /WSCF 2010 – Datenhistoriesungskonzept – Integration des Team Foundation Server’s 2012 Hinweis: Verwendung für eigene Präsentationen nur mit Einverständnis des Autors
  • 6. Agenda • Voraussetzungen • Das JavaScript Bibliotheken Universum • Was ist AngularJS? • AngularJS – Die Basis • Ng-app • Ng-repeat • Ng-Controller • $scope • $ng-model • Weitere Informationen zu AngularJs
  • 7. Voraussetzungen • Eine entsprechende DIE (WebMatrix3, Visual Studio 2010/2012 und weitere) • Bei JSON Datenquellen, sicherstellen dass der WebServer den MIME Type registriert hat (für IIS und IIS Express: appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='text/javascrip t']) • Wenn JSON Fehler von AngularJS gemeldet, dann eventuell nur ‘’ Zeichen verwendet anstelle von «»
  • 8.
  • 9. Das JavaScript Bibliotheken Universum Framework License Dependency AngularJS MIT License NO ActiveJS MIT License NO Agility MIT License jQuery Asana Luna MIT License NO Backbone.js MIT License jQuery Batman MIT License CoffeeScript Cappuccino LGPL License (v2.1) jQuery Choco FREE Sammy,js-model,Jim CorMVC FREE jQuery Eyeballs MIT License NO ExJS GPLv3 and Commercial NO Jamal FREE jQuery JavaScriptMVC MIT License jQuery,OpenAjax Knockout.js GPLv3 and commercial jQuery KendoUI MIT License NO PureMVC CC +Attribution NO Sammy MIT License jQuery Spine MIT License CoffeeScript TrimJunction Open Source NO Qooxdoo LGPL and EPL jQuery,OpenAjax Quelle: http://www.faridesign.net/2012/04/20-javascript-frameworks-mvvm-templating-licenses-etc/
  • 10. Was ist AngularJs • Aktuelle Version (stand Juni 2013) 1.06/1.14 • JavaScript Model View View Model Bibliothek • Vollständig JavaScript basiert • Einfaches DataBinding • Eingebaute Formular Validierung • «Eingebaute Lokalisierung» • «Eingebaute Pluralisierung»
  • 12. Was ist ng-app? • Zustäding für das Bootstrapping einer AngularJS Applikation • Wird im HTML Tag eingebunden <html ng-app> • Legt die Wurzel (Root) der Applikation fest • Nur einmal pro HTML-Dokument verwendbar. • Weitere Informationen http://docs.angularjs.org/api/ng.directive: ngApp
  • 13. Ng-Controller • Bindet ein Verhalten (Behavior) zu einem Scope • Ng-Controller legt eine Controller Klasse fest • Zuständig für die Geschäftslogik • Alternativer Weg für die Controller Deklaration = $route • Weitere Controller Informationen http://docs.angularjs.org/api/ng.directive:ngCon troller http://docs.angularjs.org/guide/dev_guide.mvc. understanding_controller
  • 14. Ng-model • Bindet die Sicht (View) an das Model (input, textarea etc.) • Stellt Validierung zur Verfügung • Setzt die relevanten CSS-Klassen auf das involvierte Element • Registriert das Control mit dem Eltern-Formular • Kann in Verbindung mit einem Filter verwendet werden. • Weitere Informationen (http://docs.angularjs.org/api/ng.directive:ngMo del)
  • 15. Ng-Repeat • Initiliaisiert ein template item für eine Collection (Analog einem ItemTemplate in WPF /Silverlight) • Iterierung einer Collection möglich • Weitere Informationen (http://docs.angularjs.org/api/ng.directi ve:ngRepeat)
  • 16. $scope • Bindeglied zwischen View und Controler • Eigentlich das ViewModel (Dan Wahlin’s vergleich der passt) • $scope wird beim Controller injected • $scope (fast) beliebig erweiterbar • Eng mit dem Controller verdrahtet (vgl. Controller Informationen)
  • 17. AngularJs ein kleines Beispiel DEMO
  • 18. Weiterführende Ressourcen • http://docs.angularjs.org/tutorial • http://docs.angularjs.org/guide/ • http://egghead.io • http://youtu.be/i9MHigUZKEM (AngularJS Fundamentals in 60-is Minutes) • AngularJS Cheat Sheet http://www.cheatography.com/proloser/ cheat-sheets/angularjs/