2013 - ice lingen: angularjs introduction

48
devcoach.co m Angular JS Daniel Fisher | devcoach

Upload: daniel-fisher

Post on 26-Jun-2015

1.103 views

Category:

Technology


0 download

DESCRIPTION

AngularJS introduction

TRANSCRIPT

Page 1: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Angular JSDaniel Fisher | devcoach

Page 2: 2013 - ICE Lingen: AngularJS introduction

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

Page 3: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

WENIGER KOMPLEXITÄTWENIGER CODEWENIGER FEHLERMEHR SICHERHEITMEHR QUALITÄT

Page 4: 2013 - ICE Lingen: AngularJS introduction

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

Page 5: 2013 - ICE Lingen: AngularJS introduction

devcoach.comEFFICIENT

COMMUNICATION…

Page 6: 2013 - ICE Lingen: AngularJS introduction

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/

Page 7: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/sa

chav

anhe

cke/

5199

5104

57/l

ight

box/

Page 8: 2013 - ICE Lingen: AngularJS introduction

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/

Page 9: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/sc

oble

izer/

4249

7317

78/

Page 10: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/22

2402

93@

N05

/393

0252

680/

Page 11: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Page 12: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/69

2637

80@

N04

/922

6491

470/

Page 13: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/ar

ekol

ek/8

4296

5533

9/lig

htbo

x/

Page 14: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Binding Expressions

{{ 17 + 35 }}

<input type="text" data-ng-model="data.msg" />

<p>{{data.msg}}</p><p class="{{data.msg}}"></p>

Page 15: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Page 16: 2013 - ICE Lingen: AngularJS introduction

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>

Page 17: 2013 - ICE Lingen: AngularJS introduction

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

Page 18: 2013 - ICE Lingen: AngularJS introduction

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/

Page 19: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Modules

(function(){ angular.module( 'MyReverseModule', [] );}());

Page 20: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/m

rbill

/326

7227

227/

light

box/

Page 21: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Templates

<ul class="phones"> <li data-ng-repeat="phone in phones"> {{phone.name}} </li></ul>

Page 22: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.mel

itta.

de/

Page 23: 2013 - ICE Lingen: AngularJS introduction

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>

Page 24: 2013 - ICE Lingen: AngularJS introduction

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; } });

Page 25: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/pa

suka

ru76

/714

9885

419/

in/p

hoto

stre

am/

Page 26: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Directives

• <span data-my-dir="exp"></span>• <span class="my-dir:

exp;"></span>• <my-dir></my-dir>• <!-- directive: my-dir exp -->

Page 27: 2013 - ICE Lingen: AngularJS introduction

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• …

Page 28: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Custom Directives

app.directive( 'myDir', function() { });

Page 29: 2013 - ICE Lingen: AngularJS introduction

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) { ... } }; });

Page 30: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Page 31: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Value & Constant

app.constant('magicNumber', 42);app.value('magicNumber2', 41);

Page 32: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Value & Constant Usage

function Ctrl( $scope, magicNumber, magicNumber2) { $scope.someValue = magicNumber();}

Page 33: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//fa

rm4.

stati

cflic

kr.c

om/3

161/

2860

7564

32_5

c7a8

2b58

b_o_

d.jp

g

Page 34: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

HTTP Service

$http.get( '/myurl', ).success( function(result){ });

Page 35: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Custom Service

myApp.service( 'helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" };});

Page 36: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/m

inne

mom

/625

1907

193/

Page 37: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Factory

myApp.factory( 'helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } };});

Page 38: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/us

aghu

mph

reys

/733

3178

408/

Page 39: 2013 - ICE Lingen: AngularJS introduction

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');});

Page 40: 2013 - ICE Lingen: AngularJS introduction

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

Page 41: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/al

oha7

5/75

7146

5240

/

Page 42: 2013 - ICE Lingen: AngularJS introduction

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' }); } ]);

Page 43: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/w

etw

ebw

ork/

1310

5217

4/

Page 44: 2013 - ICE Lingen: AngularJS introduction

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>

Page 45: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

TIPPS

http:

//w

ww

.flic

kr.c

om/p

hoto

s/28

2085

34@

N07

/404

7355

843/

Page 46: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

Console Debugging

angular.element($0).scope();

or

angular.element( document.getElementById('elementId')).scope();

Page 47: 2013 - ICE Lingen: AngularJS introduction

devcoach.com

http:

//w

ww

.flic

kr.c

om/p

hoto

s/12

6392

10@

N08

/214

9271

817/

Page 48: 2013 - ICE Lingen: AngularJS introduction

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