Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 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 3...
MVC 
http://www.mutuallyhuman.com/blog/2014/05/08/angularjs-services-and-factories-done-right/
Data binding
Dyrektywy
Wbudowane dyrektywy 
ngApp 
ngBind 
ngBindHtml 
ngBindTemplate 
ngBlur 
ngChange 
ngChecked 
ngClass 
ngClassEven 
ngClass...
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 UI 
o edycja danych tabelarycznych 
o kanban 
o wykresy 
● przetwarzania ...
Q&A
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
Upcoming SlideShare
Loading in …5
×

Ulepszanie aplikacji webowej z AngularJS

939 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ulepszanie aplikacji webowej z AngularJS

  1. 1. Ulepszanie aplikacji webowej z AngularJS Tomasz Bąk
  2. 2. Agenda ● wprowadzenie do AngularJS ● kilka przykładów użycia bibliotek ● mała aplikacja kanban board
  3. 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. 4. MVC http://www.mutuallyhuman.com/blog/2014/05/08/angularjs-services-and-factories-done-right/
  5. 5. Data binding
  6. 6. Dyrektywy
  7. 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. 8. ngmodules.org ● tysiące dyrektyw ● wiele z nich opakowuje biblioteki jQuery
  9. 9. AngularJS vs jQuery ● dyrektywy vs bindowanie ● dyrektywy vs operacije na DOM
  10. 10. AngularJS w przykładach ● 2 * 2 = 4 ● sortowanie
  11. 11. http://jsbin.com/sopivo/3/edit
  12. 12. http://jsfiddle.net/df5r6c45/4/
  13. 13. http://jsfiddle.net/df5r6c45/4/
  14. 14. http://jsfiddle.net/df5r6c45/4/
  15. 15. http://jsfiddle.net/df5r6c45/4/
  16. 16. Więcej AngularJS w przykładach ● Excel w 20 min ● edycja danych tabelarycznych ● kanban
  17. 17. graunked/spreadsheet ● 15 LOC
  18. 18. vitalets/angular-xeditable ● 18 kB ● 814★
  19. 19. ...
  20. 20. esvit/ng-table ● 10 kB ● 1079★
  21. 21. a5hik/ng-sortable ● 16 kB ● 194★
  22. 22. 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
  23. 23. Q&A

×