2013 - ice lingen: angularjs introduction
DESCRIPTION
AngularJS introductionTRANSCRIPT
devcoach.com
Angular JSDaniel Fisher | devcoach
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 MenschenWir sind ein Team von Software-Entwicklern und Architekten, die Unternehmen helfen, bessere Software zu schreiben.
ÜBER UNS
devcoach.com
WENIGER KOMPLEXITÄTWENIGER CODEWENIGER FEHLERMEHR SICHERHEITMEHR QUALITÄT
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
devcoach.comEFFICIENT
COMMUNICATION…
devcoach.com
Angular JSDaniel Fisher | devcoach
http:
//w
ww
.flic
kr.c
om/p
hoto
s/77
4687
13@
N00
/956
9810
942/
in/p
hoto
stre
am/l
ight
box/
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/sa
chav
anhe
cke/
5199
5104
57/l
ight
box/
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/vi
rtua
lsug
ar/3
1620
0555
/size
s/l/
in/p
hoto
stre
am/
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/sc
oble
izer/
4249
7317
78/
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/22
2402
93@
N05
/393
0252
680/
devcoach.com
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/69
2637
80@
N04
/922
6491
470/
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/ar
ekol
ek/8
4296
5533
9/lig
htbo
x/
devcoach.com
Binding Expressions
{{ 17 + 35 }}
<input type="text" data-ng-model="data.msg" />
<p>{{data.msg}}</p><p class="{{data.msg}}"></p>
devcoach.com
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>
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
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/sd
asm
arch
ives
/714
2968
263/
size
s/h/
in/p
hoto
stre
am/
devcoach.com
Modules
(function(){ angular.module( 'MyReverseModule', [] );}());
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/m
rbill
/326
7227
227/
light
box/
devcoach.com
Templates
<ul class="phones"> <li data-ng-repeat="phone in phones"> {{phone.name}} </li></ul>
devcoach.com
http:
//w
ww
.mel
itta.
de/
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>
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; } });
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/pa
suka
ru76
/714
9885
419/
in/p
hoto
stre
am/
devcoach.com
Directives
• <span data-my-dir="exp"></span>• <span class="my-dir:
exp;"></span>• <my-dir></my-dir>• <!-- directive: my-dir exp -->
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• …
devcoach.com
Custom Directives
app.directive( 'myDir', function() { });
devcoach.comCustom Directives
Continuedapp.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) { ... } }; });
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:
//fa
rm4.
stati
cflic
kr.c
om/3
161/
2860
7564
32_5
c7a8
2b58
b_o_
d.jp
g
devcoach.com
HTTP Service
$http.get( '/myurl', ).success( function(result){ });
devcoach.com
Custom Service
myApp.service( 'helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" };});
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/m
inne
mom
/625
1907
193/
devcoach.com
Factory
myApp.factory( 'helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } };});
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/us
aghu
mph
reys
/733
3178
408/
devcoach.com
ProvidermyApp.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');});
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
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/al
oha7
5/75
7146
5240
/
devcoach.com
Routesapp.config( [ '$routeProvider', function($routeProvider) { $routeProvider. when( '/a', { templateUrl: 'a.html', controller: aCtrl }). when( '/b/:Id', { templateUrl: 'b.html', controller: bCtrl }). otherwise({ redirectTo: '/a' }); } ]);
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/w
etw
ebw
ork/
1310
5217
4/
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>
devcoach.com
TIPPS
http:
//w
ww
.flic
kr.c
om/p
hoto
s/28
2085
34@
N07
/404
7355
843/
devcoach.com
Console Debugging
angular.element($0).scope();
or
angular.element( document.getElementById('elementId')).scope();
devcoach.com
http:
//w
ww
.flic
kr.c
om/p
hoto
s/12
6392
10@
N08
/214
9271
817/
devcoach.com
THANK YOU!
FOLLOW ME @LENNYBACONTRACKBACK ME LENNYBACON.COMCONNECT ME XING.COM/PROFILE/DANIEL_FISHERLINK ME LINKEDIN.COM/IN/LENNYBACONFRIEND ME FB.COM/DANIEL.FISHER.LENNYBACONMAIL ME [email protected] ME +49 (176) 6159 8612 / +49 (202) 2586 0912BOOK ME DEVCOACH.COM