Your SlideShare is downloading. ×
0
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
2013 - ICE Lingen: AngularJS introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2013 - ICE Lingen: AngularJS introduction

1,108

Published on

AngularJS introduction

AngularJS introduction

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,108
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Ich bin für die Firma devcoach unterwegs.Devcoach berät und begleitet Kunden in Projekten, entwickelt Software und plant Architekturen, vermittelt Technologiewissen und Praxis-Know-how in Schulungen und Coachings.Dabei fokussieren wir uns auf drei Themen: Services, Data & WebDarunter fallen die folgenden Technologien: Windows Communication Foundation – Microsofts einheitliche Programmier-Schnittstelle für verteilte SystemeWindows Workflow – Die graphische Implementierung technischer AbläufeADO.NET – Die Datenzugriffs-Komponenten des .NET FrameworksEntity Framework – Microsofts strategische DatenzugriffstechnologieASP.NET – Die Web-Anwendungs-Plattform des .NET FrameworksSilverlight – Das X-Browser-Kompatible Plug-In für Rich-Internet-ApplicationsUnsere Kunden kommen aus verschiedensten Branchen von der One-Man-Show bis hin zum großen Konzern.
  • Ich bin für die Firma devcoach unterwegs.Devcoach berät und begleitet Kunden in Projekten, entwickelt Software und plant Architekturen, vermittelt Technologiewissen und Praxis-Know-how in Schulungen und Coachings.Dabei fokussieren wir uns auf drei Themen: Services, Data & WebDarunter fallen die folgenden Technologien: Windows Communication Foundation – Microsofts einheitliche Programmier-Schnittstelle für verteilte SystemeWindows Workflow – Die graphische Implementierung technischer AbläufeADO.NET – Die Datenzugriffs-Komponenten des .NET FrameworksEntity Framework – Microsofts strategische DatenzugriffstechnologieASP.NET – Die Web-Anwendungs-Plattform des .NET FrameworksSilverlight – Das X-Browser-Kompatible Plug-In für Rich-Internet-ApplicationsUnsere Kunden kommen aus verschiedensten Branchen von der One-Man-Show bis hin zum großen Konzern.
  • Mein Name ist Daniel Fisher.Ich bin Mitgründer und Geschäftsführerder Firma devcoach.Sowie Mitgründer und Vorstanddes gemeinnützigen Vereins Just Community e.V.. Dieser ist seit 2005 Veranstalter NRWConf, eines der größten Software-Entwickler-Community-Events in Deutschland.Ich bin Mitgründer und Leiter der .NET Developer User Group netug-niederrhein im Dreieck Düsseldorf-Wuppertal-Krefeld.Für meine Aktivitäten in und für die Community bin ich von Microsoft als Community Leader und Insider ausgezeichnet worden.Ich bin zertifiziert als Microsoft Certified Professional Developer für ASP.NET und Enterprise Applications.Seit Einigen Jahren bin ich Business Technology PlatformAdvisor für Microsoft und unterstütze die Teams bei Entscheidungen zu neuen Technologien.Mein Blog finden Sie unter lennybacon.com und können mir als @lennybacon auf Twitter folgen.
  • provides an instance of the function
  • provides the function return value
  • can be configured during the module configuration
  • Transcript

    • 1. devcoach.com Angular JS Daniel Fisher | devcoach
    • 2. devcoach.com • BERATUNG? – Technologie-Evaluierung – Architektur & Analyse – Know-how-Transfer • SCHULUNG? – Individuelles Programm – Training-On-The-Job – Projektbezug & Hands-On • PROJEKTE? – Continous Delivery – Testing & Software-Quality – Security Software für Menschen Wir sind ein Team von Software- Entwicklern und Architekten, die Unternehmen helfen, bessere Software zu schreiben. ÜBER UNS
    • 3. devcoach.com WENIGER KOMPLEXITÄT WENIGER CODE WENIGER FEHLER MEHR SICHERHEIT MEHR QUALITÄT
    • 4. devcoach.com Daniel Fisher • devcoach.com – Mit-Gründer und Geschäftsführer • Justcommunity.de – Mit-Gründer und Vorstand • nrwconf.de – Mit-Gründer und Organisator • netug-niederrhein.de – Mit-Gründer und Ex-Leiter • microsoft.com – Certified Professional Developer – Business Platform Technology Advisor • lennybacon.com – Blog • twitter.com – @lennybacon
    • 5. devcoach.com EFFICIENT COMMUNICATION…
    • 6. devcoach.com Angular JS Daniel Fisher | devcoach http://www.flickr.com/photos/77468713@N00/9569810942/in/photostream/lightbox/
    • 7. devcoach.com http://www.flickr.com/photos/sachavanhecke/5199510457/lightbox/
    • 8. devcoach.com http://www.flickr.com/photos/virtualsugar/316200555/sizes/l/in/photostream/
    • 9. devcoach.com http://www.flickr.com/photos/scobleizer/4249731778/
    • 10. devcoach.com http://www.flickr.com/photos/22240293@N05/3930252680/
    • 11. devcoach.com
    • 12. devcoach.com http://www.flickr.com/photos/69263780@N04/9226491470/
    • 13. devcoach.com http://www.flickr.com/photos/arekolek/8429655339/lightbox/
    • 14. devcoach.com Binding Expressions {{ 17 + 35 }} <input type="text" data-ng-model="data.msg" /> <p>{{data.msg}}</p> <p class="{{data.msg}}"></p>
    • 15. devcoach.com
    • 16. devcoach.com Controllers function Ctrl($scope) { $scope.greeting = 'hello'; $scope.handleClick = function(){ alert('me was clicked!'); }; } <div data-ng-controller="Ctrl"> <button data-ng-click="handleClick()" /> </div>
    • 17. devcoach.com Startup • Browser loads the HTML and parses it into a DOM • Browser loads angular.js script • Angular looks for ng-app on DOMContentLoaded • Module specified in ng-app (if any) is configured • $injector creates $compile and $rootScope • $compile linkes the DOM with $rootScope • Angular controllers are instantiated
    • 18. devcoach.com http://www.flickr.com/photos/sdasmarchives/7142968263/sizes/h/in/photostream/
    • 19. devcoach.com Modules (function(){ angular.module( 'MyReverseModule', [] ); }());
    • 20. devcoach.com http://www.flickr.com/photos/mrbill/3267227227/lightbox/
    • 21. devcoach.com Templates <ul class="phones"> <li data-ng-repeat="phone in phones"> {{phone.name}} </li> </ul>
    • 22. devcoach.com http://www.melitta.de/
    • 23. devcoach.com Filter <p>{{ data.msg | uppercase }}</p> <p>{{ data.val | number:2 }}</p> <p>{{ data.val | currency:"USD$" }}</p> <p>{{ data.val | limitTo:3 }}</p> <p>{{ data.items | orderBy:'timestamp':true }}</p>
    • 24. devcoach.com Custom filter myReverseModule.filter('reverse', function() { return function(input, uppercase) { var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; } });
    • 25. devcoach.com http://www.flickr.com/photos/pasukaru76/7149885419/in/photostream/
    • 26. devcoach.com Directives • <span data-my-dir="exp"></span> • <span class="my-dir: exp;"></span> • <my-dir></my-dir> • <!-- directive: my-dir exp -->
    • 27. devcoach.com Built-in Directives • ng-change • ng-checked • ng-class • ng-click • ng-dblClick • ng-disabled • ng-hide • ng-href • ng-selected • ng-src • ng-show • ng-sublit • ng-switch • ng-include • ng-mouseDown • …
    • 28. devcoach.com Custom Directives app.directive( 'myDir', function() { } );
    • 29. devcoach.com Custom Directives Continued app.directive( 'directiveName', function(injectables) { return { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables", function($scope, $element, $attrs, $transclude, otherInjectables) { ... }], compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; } );
    • 30. devcoach.com
    • 31. devcoach.com Value & Constant app.constant('magicNumber', 42); app.value('magicNumber2', 41);
    • 32. devcoach.com Value & Constant Usage function Ctrl( $scope, magicNumber, magicNumber2 ) { $scope.someValue = magicNumber(); }
    • 33. devcoach.com http://farm4.staticflickr.com/3161/2860756432_5c7a82b58b_o_d.jpg
    • 34. devcoach.com HTTP Service $http.get( '/myurl', ).success( function(result){ } );
    • 35. devcoach.com Custom Service myApp.service( 'helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; });
    • 36. devcoach.com http://www.flickr.com/photos/minnemom/6251907193/
    • 37. devcoach.com Factory myApp.factory( 'helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; });
    • 38. devcoach.com http://www.flickr.com/photos/usaghumphreys/7333178408/
    • 39. devcoach.com Provider myApp.provider( 'helloWorld', function() { this.name = 'Default'; this.$get = function(/*optional injections*/) { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!" } } }; this.setName = function(name) { this.name = name; }; }); myApp.config(function(helloWorldProvider){ helloWorldProvider.setName('World'); });
    • 40. devcoach.com What? When? Why? • Controller – provides an instance of the function • Factory – provides the function return value • Provider – can be configured during the module configuration
    • 41. devcoach.com http://www.flickr.com/photos/aloha75/7571465240/
    • 42. devcoach.com Routes app.config( [ '$routeProvider', function($routeProvider) { $routeProvider. when( '/a', { templateUrl: 'a.html', controller: aCtrl }). when( '/b/:Id', { templateUrl: 'b.html', controller: bCtrl }). otherwise({ redirectTo: '/a' }); } ] );
    • 43. devcoach.com http://www.flickr.com/photos/wetwebwork/131052174/
    • 44. devcoach.com View <html lang="en" ng-app="phonecat"> <head> <script src="lib/angular/angular.js"></script> … </head> <body> <div ng-view></div> </body> </html>
    • 45. devcoach.com TIPPS http://www.flickr.com/photos/28208534@N07/4047355843/
    • 46. devcoach.com Console Debugging angular.element($0).scope(); or angular.element( document.getElementById('elementId') ).scope();
    • 47. devcoach.com http://www.flickr.com/photos/12639210@N08/2149271817/
    • 48. devcoach.com THANK YOU! FOLLOW ME @LENNYBACON TRACKBACK ME LENNYBACON.COM CONNECT ME XING.COM/PROFILE/DANIEL_FISHER LINK ME LINKEDIN.COM/IN/LENNYBACON FRIEND ME FB.COM/DANIEL.FISHER.LENNYBACON MAIL ME DANIEL.FISHER@DEVCOACH.COM CALL ME +49 (176) 6159 8612 / +49 (202) 2586 0912

    ×