devcoach.com
Angular JS
Daniel Fisher | devcoach
devcoach.com
• BERATUNG?
– Technologie-Evaluierung
– Architektur & Analyse
– Know-how-Transfer
• SCHULUNG?
– Individuelles...
devcoach.com
WENIGER
KOMPLEXITÄT
WENIGER CODE
WENIGER FEHLER
MEHR SICHERHEIT
MEHR QUALITÄT
devcoach.com
Daniel Fisher
• devcoach.com
– Mit-Gründer und Geschäftsführer
• Justcommunity.de
– Mit-Gründer und Vorstand
...
devcoach.com
EFFICIENT
COMMUNICATION…
devcoach.com
Angular JS
Daniel Fisher | devcoach
http://www.flickr.com/photos/77468713@N00/9569810942/in/photostream/light...
devcoach.com
http://www.flickr.com/photos/sachavanhecke/5199510457/lightbox/
devcoach.com
http://www.flickr.com/photos/virtualsugar/316200555/sizes/l/in/photostream/
devcoach.com
http://www.flickr.com/photos/scobleizer/4249731778/
devcoach.com
http://www.flickr.com/photos/22240293@N05/3930252680/
devcoach.com
devcoach.com
http://www.flickr.com/photos/69263780@N04/9226491470/
devcoach.com
http://www.flickr.com/photos/arekolek/8429655339/lightbox/
devcoach.com
Binding Expressions
{{ 17 + 35 }}
<input type="text"
data-ng-model="data.msg" />
<p>{{data.msg}}</p>
<p class...
devcoach.com
devcoach.com
Controllers
function Ctrl($scope) {
$scope.greeting = 'hello';
$scope.handleClick = function(){
alert('me was...
devcoach.com
Startup
• Browser loads the HTML and parses it into a
DOM
• Browser loads angular.js script
• Angular looks f...
devcoach.com
http://www.flickr.com/photos/sdasmarchives/7142968263/sizes/h/in/photostream/
devcoach.com
Modules
(function(){
angular.module(
'MyReverseModule',
[]
);
}());
devcoach.com
http://www.flickr.com/photos/mrbill/3267227227/lightbox/
devcoach.com
Templates
<ul class="phones">
<li data-ng-repeat="phone in phones">
{{phone.name}}
</li>
</ul>
devcoach.com
http://www.melitta.de/
devcoach.com
Filter
<p>{{ data.msg | uppercase }}</p>
<p>{{ data.val | number:2 }}</p>
<p>{{ data.val | currency:"USD$" }}...
devcoach.com
Custom filter
myReverseModule.filter('reverse', function() {
return function(input, uppercase) {
var out = ""...
devcoach.com
http://www.flickr.com/photos/pasukaru76/7149885419/in/photostream/
devcoach.com
Directives
• <span data-my-dir="exp"></span>
• <span class="my-dir: exp;"></span>
• <my-dir></my-dir>
• <!-- ...
devcoach.com
Built-in Directives
• ng-change
• ng-checked
• ng-class
• ng-click
• ng-dblClick
• ng-disabled
• ng-hide
• ng...
devcoach.com
Custom Directives
app.directive(
'myDir',
function() {
}
);
devcoach.com
Custom Directives Continued
app.directive(
'directiveName',
function(injectables) {
return {
priority: 0,
tem...
devcoach.com
devcoach.com
Value & Constant
app.constant('magicNumber', 42);
app.value('magicNumber2', 41);
devcoach.com
Value & Constant Usage
function Ctrl(
$scope,
magicNumber,
magicNumber2
) {
$scope.someValue = magicNumber();...
devcoach.com
http://farm4.staticflickr.com/3161/2860756432_5c7a82b58b_o_d.jpg
devcoach.com
HTTP Service
$http.get(
'/myurl',
).success(
function(result){
}
);
devcoach.com
Custom Service
myApp.service(
'helloWorldFromService',
function() {
this.sayHello = function() {
return "Hell...
devcoach.com
http://www.flickr.com/photos/minnemom/6251907193/
devcoach.com
Factory
myApp.factory(
'helloWorldFromFactory',
function() {
return {
sayHello: function() {
return "Hello, W...
devcoach.com
http://www.flickr.com/photos/usaghumphreys/7333178408/
devcoach.com
Provider
myApp.provider(
'helloWorld',
function() {
this.name = 'Default';
this.$get = function(/*optional in...
devcoach.com
What? When? Why?
• Controller
– provides an instance of the function
• Factory
– provides the function return...
devcoach.com
http://www.flickr.com/photos/aloha75/7571465240/
devcoach.com
Routes
app.config(
[
'$routeProvider',
function($routeProvider) {
$routeProvider.
when(
'/a',
{ templateUrl: ...
devcoach.com
http://www.flickr.com/photos/wetwebwork/131052174/
devcoach.com
View
<html lang="en" ng-app="phonecat">
<head>
<script src="lib/angular/angular.js"></script>
…
</head>
<body...
devcoach.com
TIPPS
http://www.flickr.com/photos/28208534@N07/4047355843/
devcoach.com
Console Debugging
angular.element($0).scope();
or
angular.element(
document.getElementById('elementId')
).sco...
devcoach.com
http://www.flickr.com/photos/12639210@N08/2149271817/
devcoach.com
THANK YOU!
FOLLOW ME @LENNYBACON
TRACKBACK ME LENNYBACON.COM
CONNECT ME
XING.COM/PROFILE/DANIEL_FISHER
LINK M...
Upcoming SlideShare
Loading in …5
×

2013 - ICE Lingen: AngularJS introduction

1,535 views

Published on

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,535
On SlideShare
0
From Embeds
0
Number of Embeds
273
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

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 &amp; 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 &amp; 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
  • 2013 - ICE Lingen: AngularJS introduction

    1. 1. devcoach.com Angular JS Daniel Fisher | devcoach
    2. 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. 3. devcoach.com WENIGER KOMPLEXITÄT WENIGER CODE WENIGER FEHLER MEHR SICHERHEIT MEHR QUALITÄT
    4. 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. 5. devcoach.com EFFICIENT COMMUNICATION…
    6. 6. devcoach.com Angular JS Daniel Fisher | devcoach http://www.flickr.com/photos/77468713@N00/9569810942/in/photostream/lightbox/
    7. 7. devcoach.com http://www.flickr.com/photos/sachavanhecke/5199510457/lightbox/
    8. 8. devcoach.com http://www.flickr.com/photos/virtualsugar/316200555/sizes/l/in/photostream/
    9. 9. devcoach.com http://www.flickr.com/photos/scobleizer/4249731778/
    10. 10. devcoach.com http://www.flickr.com/photos/22240293@N05/3930252680/
    11. 11. devcoach.com
    12. 12. devcoach.com http://www.flickr.com/photos/69263780@N04/9226491470/
    13. 13. devcoach.com http://www.flickr.com/photos/arekolek/8429655339/lightbox/
    14. 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. 15. devcoach.com
    16. 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. 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. 18. devcoach.com http://www.flickr.com/photos/sdasmarchives/7142968263/sizes/h/in/photostream/
    19. 19. devcoach.com Modules (function(){ angular.module( 'MyReverseModule', [] ); }());
    20. 20. devcoach.com http://www.flickr.com/photos/mrbill/3267227227/lightbox/
    21. 21. devcoach.com Templates <ul class="phones"> <li data-ng-repeat="phone in phones"> {{phone.name}} </li> </ul>
    22. 22. devcoach.com http://www.melitta.de/
    23. 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. 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. 25. devcoach.com http://www.flickr.com/photos/pasukaru76/7149885419/in/photostream/
    26. 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. 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. 28. devcoach.com Custom Directives app.directive( 'myDir', function() { } );
    29. 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. 30. devcoach.com
    31. 31. devcoach.com Value & Constant app.constant('magicNumber', 42); app.value('magicNumber2', 41);
    32. 32. devcoach.com Value & Constant Usage function Ctrl( $scope, magicNumber, magicNumber2 ) { $scope.someValue = magicNumber(); }
    33. 33. devcoach.com http://farm4.staticflickr.com/3161/2860756432_5c7a82b58b_o_d.jpg
    34. 34. devcoach.com HTTP Service $http.get( '/myurl', ).success( function(result){ } );
    35. 35. devcoach.com Custom Service myApp.service( 'helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; });
    36. 36. devcoach.com http://www.flickr.com/photos/minnemom/6251907193/
    37. 37. devcoach.com Factory myApp.factory( 'helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; });
    38. 38. devcoach.com http://www.flickr.com/photos/usaghumphreys/7333178408/
    39. 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. 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. 41. devcoach.com http://www.flickr.com/photos/aloha75/7571465240/
    42. 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. 43. devcoach.com http://www.flickr.com/photos/wetwebwork/131052174/
    44. 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. 45. devcoach.com TIPPS http://www.flickr.com/photos/28208534@N07/4047355843/
    46. 46. devcoach.com Console Debugging angular.element($0).scope(); or angular.element( document.getElementById('elementId') ).scope();
    47. 47. devcoach.com http://www.flickr.com/photos/12639210@N08/2149271817/
    48. 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

    ×