Ulepszanie aplikacji

webowej z AngularJS

Tomasz Bąk

Agenda

● wprowadzenie do AngularJS

● kilka przykładów użycia bibliotek

● mała aplikacja kanban board

AngularJS

● 108 kBo vs jQuery 1.11 ~ 98 kB

o vs Ember.js 1.8.1 ~ 353 kB

o lodash.js ~ 28 kB

● 32 278★o vs jQuery 32 672★

o vs Ember.js 11 915★

o vs lodash.js 6 809★

http://www.mutuallyhuman.com/blog/2014/05/08/angularjs-services-and-factories-done-right/

MVC

Data binding

Dyrektywy

Wbudowane dyrektywyngApp

ngBind

ngBindHtml

ngBindTemplate

ngBlur

ngChange

ngChecked

ngClass

ngClassEven

ngClassOdd

ngClick

ngCloak

ngController

ngCopy

ngCsp

ngCut

ngDblclick

ngDisabled

ngFocus

ngForm

ngHide

ngHref

ngIf

ngInclude

ngInit

ngKeydown

ngKeypress

ngKeyup

ngList

ngModel

ngMousedown

ngMouseenter

ngMouseleave

ngMousemove

ngMouseover

ngMouseup

ngNonBindable

ngOpen

ngPaste

ngPluralize

ngReadonly

ngRepeat

ngSelected

ngShow

ngSrc

ngSrcset

ngStyle

ngSubmit

ngSwitch

ngTransclude

ngValue

ngmodules.org

● tysiące dyrektyw

● wiele z nich opakowuje biblioteki jQuery

AngularJS vs jQuery

● dyrektywy vs bindowanie

● dyrektywy vs operacije na DOM

AngularJS w przykładach

● 2 * 2 = 4

● sortowanie

http://jsbin.com/sopivo/3/edit

http://jsfiddle.net/df5r6c45/4/

http://jsfiddle.net/df5r6c45/4/

http://jsfiddle.net/df5r6c45/4/

http://jsfiddle.net/df5r6c45/4/

Więcej AngularJS w przykładach

● Excel w 20 min

● edycja danych tabelarycznych

● kanban

graunked/spreadsheet

● 15 LOC

vitalets/angular-xeditable

● 18 kB

● 814★

...

esvit/ng-table

● 10 kB

● 1079★

a5hik/ng-sortable

● 16 kB

● 194★

AngularJS sprawdza się do:

● szybko reagującego UIo edycja danych tabelarycznych

o kanban

o wykresy

● przetwarzania danych przed przesłaniem do serwerao wytnij i wklej

o kategoryzacja plików

Q&A