Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,705 views

Published on

AngularJS introduction

Published in: Technology, Business
  • Login to see the comments

  • Be the first to like this

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

×