Porównam na kilku przykładach rozwiązania AJAX / jQuery z alternatywą w postaci AngularJS.

1. Ulepszanie aplikacji
webowej z AngularJS
Tomasz Bąk

2. Agenda
● wprowadzenie do AngularJS
● kilka przykładów użycia bibliotek
● mała aplikacja kanban board

3. AngularJS
● 108 kB
o 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★

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

5. Data binding

6. Dyrektywy

7. Wbudowane dyrektywy
ngApp
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

8. ngmodules.org
● tysiące dyrektyw
● wiele z nich opakowuje biblioteki jQuery

9. AngularJS vs jQuery
● dyrektywy vs bindowanie
● dyrektywy vs operacije na DOM

10. AngularJS w przykładach
● 2 * 2 = 4
● sortowanie

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

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

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

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

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

16. Więcej AngularJS w przykładach
● Excel w 20 min
● edycja danych tabelarycznych
● kanban

17. graunked/spreadsheet
● 15 LOC

20. vitalets/angular-xeditable
● 18 kB
● 814★

22. ...

25. esvit/ng-table
● 10 kB
● 1079★

30. a5hik/ng-sortable
● 16 kB
● 194★

36. AngularJS sprawdza się do:
● szybko reagującego UI
o edycja danych tabelarycznych
o kanban
o wykresy
● przetwarzania danych przed przesłaniem do serwera
o wytnij i wklej
o kategoryzacja plików

37. Q&A