AngularJS introduction

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