{"id":74,"date":"2015-03-23T20:05:04","date_gmt":"2015-03-23T19:05:04","guid":{"rendered":""},"modified":"2018-11-05T20:06:41","modified_gmt":"2018-11-05T19:06:41","slug":"ng-clanok-opat-o-angularjs","status":"publish","type":"post","link":"https:\/\/spireng.sk\/en\/ng-clanok-opat-o-angularjs\/","title":{"rendered":"ng-\u010dl\u00e1nok &#8211; op\u00e4\u0165 o AngularJS"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"imgp_img\" style=\"float: left; margin: 2px 5px;\" src=\"\/sites\/default\/files\/imagepicker\/1\/df4d5as6.jpg\" alt=\"Obr\u00e1zok\" width=\"150\" height=\"194\" \/>O AngularJS som u\u017e p\u00edsal v jednom zo svojich predch\u00e1dzaj\u00facich<span style=\"background: transparent;\"> <a href=\"http:\/\/spireng.sk\/en\/angularjs-mvc-framework-pre-javascript\/\">\u010dl\u00e1nko<\/a><\/span><a href=\"https:\/\/spireng.sk\/en\/content\/angularjs-mvc-framework-javascript\/\"><span style=\"background: transparent;\">v<\/span><\/a><span style=\"background: transparent;\">. Je to JavaScriptov<\/span><span style=\"background: transparent;\">\u00fd<\/span><span style=\"background: transparent;\"> framework, ktor\u00fd v\u00e1m umo\u017en\u00ed vytv\u00e1ra\u0165 SPA (Single Page Aplication) na z\u00e1klade Model-View-Controler vzoru. To je s\u00edce defin\u00edcia v jednej vete, ale z\u010faleka nie v\u0161etko, \u010do sa o Angulari d\u00e1 poveda\u0165. Preto sa dnes pozrieme na knihu <a href=\"http:\/\/www.bookdepository.com\/Complete-Book-on-Angularjs-Ari-Lerner\/9780991344604\">ng-book<\/a> od Aria Lernera.<!--break--><\/span><!--more--><\/p>\n<p><span style=\"background: transparent;\">ng-book je kniha, ktor\u00e1 m\u00e1 591 str\u00e1n, \u010do ju tie\u017e umo\u017e\u0148uje v pr\u00edpade n\u00fadze pou\u017ei\u0165 na sebaobranu. Tak\u00fd rozsah ale nie je n\u00e1hoda, preto\u017ee Angular nie je nov\u00fd ani mal\u00fd framework, a tak je o \u010dom p\u00edsa\u0165. Autor vysvet\u013euje Angular od \u00fapln\u00fdch z\u00e1kladov a\u017e po komplikovan\u00e9 t\u00e9my. Je preto vhodn\u00e1 aj pre \u010dloveka, ktor\u00fd z Angularu zatia\u013e pozn\u00e1 iba jeho n\u00e1zov.<\/span><\/p>\n<p><span style=\"background: transparent;\">Po povinnej jazde v podobne prv\u00e9ho (nie\u010do ako \u201eHello world\u201c) pr\u00edkladu prich\u00e1dza vysvet\u013eovanie modulov, scopu a kontrolerov. Aj ke\u010f kniha miestami pripom\u00edna referen\u010dn\u00fa pr\u00edru\u010dku t\u00fdm, \u017ee vymenuje v\u0161etky met\u00f3dy objektu a popri tom vysvetl\u00ed v\u0161etky parametre t\u00fdchto met\u00f3d, je tento \u0161t\u00fdl striedan\u00fd norm\u00e1lnym read-friendly pr\u00edstupom, ktor\u00fd rob\u00ed knihu \u013eahko konzumovate\u013en\u00fa.<\/span><\/p>\n<p><span style=\"background: transparent;\">Po \u00fapln\u00fdch z\u00e1kladoch nasleduj\u00fa \u010fal\u0161ie typick\u00e9 Angular-t\u00e9my ako Expressions a filtre. \u010eal\u0161ie tri kapitoly s\u00fa potom venovan\u00e9 direkt\u00edvam. To je v\u017edy komplikovan\u00e1 t\u00e9ma, ke\u010f\u017ee direkt\u00edvy svojim sp\u00f4sobom roz\u0161iruj\u00fa mo\u017enosti Angularu, a tak aby ich \u010dlovek vedel p\u00edsa\u0165, mus\u00ed im u\u017e tak trochu rozumie\u0165. Aj ke\u010f na internete n\u00e1jdete mnoho postupov ako ich p\u00edsa\u0165 a existuje aj ofici\u00e1lna dokument\u00e1cia, tieto tri kapitoly patria k tomu lep\u0161iemu, \u010do som o tejto t\u00e9me na\u0161iel. Minim\u00e1lne vysvetlenie Binding Strategies (sp\u00f4sob, ak\u00fdm prepoj\u00edte scope direkt\u00edvy so scopom jej rodi\u010da) a met\u00f3dy compile a link s\u00fa tu vysvetlen\u00e9 celkom dobre. Ari postupne prech\u00e1dza v\u0161etky parametre konfigur\u00e1cie, ktor\u00e9 s\u00fa pri vytv\u00e1ran\u00ed direkt\u00edvy mo\u017en\u00e9 a vysvet\u013euje ich.<\/span><\/p>\n<p><span style=\"background: transparent;\">\u010eal\u0161ie dve kapitoly s\u00fa o konfigur\u00e1cii a na\u010d\u00edtan\u00ed modulu a o smerovan\u00ed (routing) a po nich nasleduj\u00fa pomerne d\u00f4le\u017eit\u00e9 t\u00e9my a to Dependency Injection a slu\u017eby. Vedeli ste, \u017ee na vytvorenie slu\u017eieb m\u00e1 Angular p\u00e4\u0165 r\u00f4znych met\u00f3d? (je viem, mo\u017eno ani neviete o \u010dom hovor\u00edm, ak nepozn\u00e1te Angular a ja sa v\u00e1s op\u00fdtam toto&#8230;). <em>factory<\/em><span style=\"font-style: normal;\">, <\/span><em>service<\/em><span style=\"font-style: normal;\">, <\/span><em>constant<\/em><span style=\"font-style: normal;\">, <\/span><em>value<\/em><span style=\"font-style: normal;\"> a <\/span><em>provider<\/em><span style=\"font-style: normal;\">. A vedeli ste, ak\u00fd je medzi nimi rozdiel? No nejak\u00e9 tam s\u00fa a Ari ich vysvet\u013euje. Op\u00e4\u0165 jedna z t\u00fdch u\u017eito\u010dnej\u0161\u00edch kapitol.<\/span><\/span><\/p>\n<p><span style=\"background: transparent;\">Nasleduj\u00fa t\u00e9my XHR komunik\u00e1cie (Ajax) a Promises. To druh\u00e9 ani tak nie je Angular t\u00e9ma ako t\u00e9ma JavaScriptu v\u0161eobecne. Aj preto je celkom sympatick\u00e9, \u017ee je tomu venovan\u00e1 cela kapitola. Promises je vlastne nov\u00fd vzor na programovanie k\u00f3du, ktor\u00fd sa mus\u00ed vysporiada\u0165 s asynchroniciout. Klasick\u00fd pr\u00edstup je cez callbacky, ale ten dok\u00e1\u017ee sp\u00f4sobi\u0165 takzvan\u00e9 callback-hell, kedy m\u00e1te do seba vnoren\u00fdch 5 a viac anonymn\u00fdch met\u00f3d (ak ste sa ich n\u00e1hodou nerozhodli aspo\u0148 pomenova\u0165, \u010do je celkom dobr\u00fd zvyk). Nehovoriac o tom, ak\u00fa komplexitu k\u00f3du by v\u00e1m nameral nejak\u00fd statick\u00fd analyz\u00e1tor k\u00f3du, je to \u010dasto k\u00f3d, v ktorom sa vyzn\u00e1 len autor a to e\u0161te tak maxim\u00e1lne do jedn\u00e9ho mesiaca po tom, \u010do ho nap\u00edsal. Preto Promises prich\u00e1dza s nov\u00fdm modelom, kedy odpove\u010f na konci asynchronnej met\u00f3dy nie je vlo\u017een\u00e1 v p\u00f4vodnom volan\u00ed, ale je pripojen\u00e1 za \u0148u.<\/span><\/p>\n<p><span style=\"font-style: normal;\"><span style=\"background: transparent;\">Nasleduj\u00faca kapitola m\u00e1 n\u00e1zov \u201eServer Communication\u201c <\/span><\/span><span style=\"font-style: normal;\"><span style=\"background: transparent;\">a je to r\u00fdchlokurz in\u0161tal\u00e1cie a spustenia NodeJS (\u010do je JavaScriptov\u00fd server, o ktorom som p\u00edsal v jednom zo svoj<\/span><\/span><span style=\"font-style: normal;\"><span style=\"background: transparent;\">i<\/span><\/span><span style=\"font-style: normal;\"><span style=\"background: transparent;\">ch predch\u00e1dzaj\u00facich <a href=\"http:\/\/spireng.sk\/en\/nodejs-alebo-javascript-server\/\">\u010dl\u00e1nkov<\/a>), ako aj konfigur\u00e1ciu a pripojenie na Amazone AWS (Amazone Web Services). Autor toti\u017e chce uk\u00e1za\u0165 re\u00e1lnu komunik\u00e1ciu medzi Angular klientom a serverom, a tak sa pok\u00fasil n\u00e1js\u0165 sp\u00f4sob, ako to uk\u00e1za\u0165 s minim\u00e1lnou nutnou n\u00e1mahou. Nie je to kapitola priamo o Angulari a pod\u013ea m\u00f4jho n\u00e1zoru v knihe ani nemusela by\u0165, ale je to t\u00e9ma st\u00e1le bl\u00edzko Angularu, tak to a\u017e tak\u00e9 nelogick\u00e9 nie je.<\/span><\/span><\/p>\n<p><span style=\"background: transparent;\"><span style=\"font-style: normal;\">Nasleduj\u00fa kapitol<\/span><span style=\"font-style: normal;\">y<\/span><span style=\"font-style: normal;\"> o testovan<\/span><span style=\"font-style: normal;\">\u00ed<\/span><span style=\"font-style: normal;\"> (ako Unit Test tak aj End-2-End testy), udalostiach a odpor\u00fa\u010danej architekt\u00fare pri v\u00e4\u010d\u0161\u00edch projektoch <\/span><span style=\"font-style: normal;\">a potom to u\u017e za\u010d\u00edna by\u0165 zauj\u00edmav\u00e9. Kapitola \u201eAngular Animation\u201c hovor\u00ed o nieko\u013ek\u00fdch sp\u00f4soboch ako dosiahnu\u0165 v Angulari anim\u00e1cie (CSS3 Transition\/Animations, JavaScript anim\u00e1cie a kni<\/span><span style=\"font-style: normal;\">\u017eni<\/span><span style=\"font-style: normal;\">ce tret\u00edch str\u00e1n). Nasleduje kapitola s n\u00e1zvom \u201eThe Digest Loop and $apply\u201c, \u010do je op\u00e4\u0165 exkurzia do \u00fatrob Angularu a vysvet\u013euje ako vlastne funguje naviazanie View na hodnoty v scope (\u010do je jeden zo z\u00e1kladn\u00fdch princ\u00edpov Angularu, ktor\u00fd sa len m\u00e1lokedy vysvet\u013euje). \u010eal\u0161ie zauj\u00edmav\u00e9 kapitoly s\u00fa \u201eEssential AngularJS Extension\u201c, kde s\u00fa (aspo\u0148 v kr\u00e1tkosti) pop\u00edsan<\/span><span style=\"font-style: normal;\">\u00e9<\/span><span style=\"font-style: normal;\"> roz\u0161\u00edrenia Angularu ako <\/span><em>AngularUI<\/em><span style=\"font-style: normal;\"> alebo <\/span><em>ui-utils<\/em><span style=\"font-style: normal;\">.<\/span><\/span><\/p>\n<p><span style=\"background: transparent;\"><span style=\"font-style: normal;\">L<\/span><span style=\"font-style: normal;\">okaliz\u00e1cia, cach<\/span><span style=\"font-style: normal;\">e<\/span><span style=\"font-style: normal;\">ovanie (Angular m\u00e1 na to priamo podporu, \u010do som doteraz netu\u0161il) a bezpe\u010dnos<\/span><span style=\"font-style: normal;\">\u0165<\/span><span style=\"font-style: normal;\"> s\u00fa t\u00e9my nasleduj\u00facich troch kapitol. Po nich nasleduj\u00fa \u010fal\u0161ie dve o Angulari a Internet Exploreri a o p\u00edsan\u00ed Chrome Apps pomoc<\/span><span style=\"font-style: normal;\">o<\/span><span style=\"font-style: normal;\">u Angularu. Posledn\u00e9 kapitoly pojedn\u00e1vaj\u00fa o optimaliz\u00e1cii a debugovan<\/span><span style=\"font-style: normal;\">\u00ed<\/span><span style=\"font-style: normal;\">. Pr\u00e1ve t\u00e1 optimaliz\u00e1cia je pre Angular t\u00e9ma, <\/span><span style=\"font-style: normal;\">ktor\u00e1 sa rozober\u00e1<\/span><span style=\"font-style: normal;\"> len m\u00e1lokedy, <\/span><span style=\"font-style: normal;\">a pritom<\/span><span style=\"font-style: normal;\"> je dos\u0165 podstatn\u00e1.<\/span><\/span><\/p>\n<p><span style=\"background: transparent;\">AngularJS je pomerne popul\u00e1rny framework a ng-book je kniha, ktor\u00e1 o \u0148om pojedn\u00e1va dos\u0165 komplexne. Nie len, \u017ee vysvet\u013euje veci podrobne ale rozober\u00e1 aj t\u00e9my, ktor\u00fdm sa v in\u00fdch (ten\u0161\u00edch) knih\u00e1ch a\u017e tak nevenuj\u00fa. Aj preto je to zatia\u013e asi najlep\u0161ia kniha o Angulari, ktor\u00fa som dr\u017eal v ruk\u00e1ch.<\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>O AngularJS som u\u017e p\u00edsal v jednom zo svojich predch\u00e1dzaj\u00facich \u010dl\u00e1nkov. Je to JavaScriptov\u00fd framework, ktor\u00fd v\u00e1m umo\u017en\u00ed vytv\u00e1ra\u0165 SPA (Single Page Aplication) na z\u00e1klade Model-View-Controler vzoru. To je s\u00edce defin\u00edcia v jednej vete, ale z\u010faleka nie v\u0161etko, \u010do sa o Angulari d\u00e1 poveda\u0165. Preto sa dnes pozrieme na knihu ng-book od Aria Lernera.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-vyvoj-softveru"],"_links":{"self":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":2,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/74\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}