Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00230 004546 12796085 na godz. na dobę w sumie
AngularJS. Pierwsze kroki - ebook/pdf
AngularJS. Pierwsze kroki - ebook/pdf
Autor: , Liczba stron: 208
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1590-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).

Poznaj AngularJS i najnowsze trendy w tworzeniu aplikacji internetowych!

AngularJS jest frameworkiem MVC napisanym w JavaScripcie. Ta stworzona przez Google’a technologia daje programistom ogromne możliwości, a w ciągu ostatnich dwóch lat dla wielu firm stała się standardem przy tworzeniu aplikacji sieciowych. O jej popularności najlepiej świadczą pojawiające się jak grzyby po deszczu oferty pracy dla programistów AngularJS. Każdy, kto poważnie myśli o tworzeniu aplikacji dla sieci, powinien poznać cechy tego frameworka, jego zalety oraz ograniczenia.

Jeśli i Ty chciałbyś rozpocząć przygodę z AngularJS i w pełni korzystać z opcji oferowanych przez JavaScript, sięgnij po tę książkę! Dowiesz się z niej, jak szybko i sprawnie tworzyć dynamiczne, łatwe w utrzymaniu aplikacje internetowe działające po stronie klienta. Poznasz praktyczne przykłady, które pomogą Ci zrozumieć prezentowany materiał, a także nauczysz się samodzielnie pisać wydajny kod z wykorzystaniem AngularJS, zaś dzięki podsumowującym każdy rozdział pytaniom kontrolnym skutecznie utrwalisz zdobyte wiadomości.

Naucz się obsługi nowego frameworka!


* Książka opisuje wersję 1.4.x.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Opieka redakcyjna: Ewelina Burska Projekt okładki: Studio Gravite/Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/angupk Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. ISBN: 978-83-283-0586-1 Copyright © Helion 2015 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:264)ci Rozdzia(cid:228) 1. Wst(cid:246)p .............................................................................................. 7 Od czego zacz(cid:261)(cid:252) ............................................................................................................... 9 Biblioteka i ng-app, czyli bez czego nie mo(cid:298)e si(cid:266) obej(cid:286)(cid:252) (cid:298)adna aplikacja ........................ 9 Biblioteka ................................................................................................................... 9 Ng-app ...................................................................................................................... 10 Pierwsza aplikacja .......................................................................................................... 11 Framework SPA ............................................................................................................. 13 Podwójne wi(cid:261)zanie ......................................................................................................... 14 Jednostronne wi(cid:261)zanie .............................................................................................. 14 Dwustronne wi(cid:261)zanie ............................................................................................... 14 AngularJS i MVC ........................................................................................................... 15 Quiz ................................................................................................................................ 16 Rozdzia(cid:228) 2. $scope — niepozorny obiekt ........................................................... 17 Wprowadzenie ................................................................................................................ 17 $scope i $rootScope ................................................................................................. 17 Alternatywa dla $scope ............................................................................................ 18 Dziedziczenie ................................................................................................................. 19 Izolowany scope ....................................................................................................... 22 $digest(), $apply() i $watch() ......................................................................................... 22 Nas(cid:225)uchiwanie oraz $watch() ................................................................................... 22 $digest() ................................................................................................................... 24 $apply() .................................................................................................................... 24 Quiz ................................................................................................................................ 26 Rozdzia(cid:228) 3. Modu(cid:228)y .......................................................................................... 27 Wprowadzenie ................................................................................................................ 27 Modu(cid:225)y a kontrolery ....................................................................................................... 28 Modu(cid:225)y a globalna przestrze(cid:276) nazw ............................................................................... 29 Zmodularyzowana aplikacja ........................................................................................... 29 (cid:224)(cid:261)czenie modu(cid:225)ów ................................................................................................... 30 Quiz ................................................................................................................................ 31 Rozdzia(cid:228) 4. Dependency Injection — wstrzykiwanie zale(cid:276)no(cid:264)ci .......................... 33 Wprowadzenie ................................................................................................................ 33 Uzyskiwanie zale(cid:298)no(cid:286)ci .................................................................................................. 34 Metody wstrzykiwania zale(cid:298)no(cid:286)ci .................................................................................. 35 DI w praktyce ................................................................................................................. 37 Quiz ................................................................................................................................ 43 Kup książkęPoleć książkę 4 AngularJS. Pierwsze kroki Rozdzia(cid:228) 5. Poznaj pot(cid:246)g(cid:246) dyrektyw ................................................................. 45 Wprowadzenie ................................................................................................................ 45 Nazewnictwo .................................................................................................................. 48 Wbudowane dyrektywy .................................................................................................. 50 Dyrektywa a ............................................................................................................. 51 Dyrektywa form ....................................................................................................... 51 Dyrektywa input ....................................................................................................... 53 Dyrektywa ngBind ................................................................................................... 54 Dyrektywa ngBindHtml ........................................................................................... 54 Dyrektywa ngBindTemplate .................................................................................... 55 Dyrektywa ngCloak .................................................................................................. 56 Dyrektywy ngBlur i ngFocus ................................................................................... 57 Dyrektywa ngChange ............................................................................................... 57 Dyrektywa ngClass .................................................................................................. 62 Dyrektywa ngRepeat ................................................................................................ 65 Dyrektywa ngClick .................................................................................................. 72 Dyrektywa ngController ........................................................................................... 74 Dyrektywa ngCopy .................................................................................................. 75 Dyrektywa ngCut ..................................................................................................... 76 Dyrektywa ngDblclick ............................................................................................. 78 Dyrektywa ngFocus .................................................................................................. 78 Dyrektywa ngForm .................................................................................................. 79 Dyrektywa ngHref .................................................................................................... 79 Dyrektywa ngIf ........................................................................................................ 80 Dyrektywa ngInclude ............................................................................................... 80 Dyrektywy ngKeydown, ngKeypress i ngKeyup ..................................................... 80 Dyrektywa ngList ..................................................................................................... 81 Dyrektywa ngModel ................................................................................................. 81 Dyrektywa ngModelOptions .................................................................................... 82 Dyrektywy ngMousedown, ngMouseenter, ngMouseleave, ngMousemove, ngMouseover i ngMouseup ................................................................................... 84 Dyrektywa ngNonBindable ...................................................................................... 84 Dyrektywa ngPaste ................................................................................................... 85 Dyrektywa ngPluralize ............................................................................................. 85 Dyrektywa ngReadonly ............................................................................................ 88 Dyrektywa ngStyle ................................................................................................... 88 Dyrektywa ngSubmit ................................................................................................ 88 Dyrektywa ngSwitch ................................................................................................ 89 Dyrektywa ngTransclude ......................................................................................... 89 Dyrektywa ngValue .................................................................................................. 91 Dyrektywa script ...................................................................................................... 91 Dyrektywa select ...................................................................................................... 93 Dyrektywa textarea .................................................................................................. 96 Quiz ................................................................................................................................ 97 Rozdzia(cid:228) 6. Dyrektywy szyte na miar(cid:246) ............................................................... 99 Wprowadzenie ................................................................................................................ 99 Pierwsza w(cid:225)asna dyrektywa ............................................................................................ 99 W(cid:225)a(cid:286)ciwo(cid:286)ci .................................................................................................................. 101 $scope vs. scope ........................................................................................................... 105 Quiz .............................................................................................................................. 107 Kup książkęPoleć książkę Spis tre(cid:264)ci 5 Rozdzia(cid:228) 7. Filtry ............................................................................................ 109 Wprowadzenie .............................................................................................................. 109 Filtry wbudowane ......................................................................................................... 110 Operacje na stringach ............................................................................................. 110 Liczbowe ................................................................................................................ 111 Operacje na datach ................................................................................................. 112 JSON ...................................................................................................................... 113 Filtry dyrektywy ng-repeat ..................................................................................... 113 Linky ...................................................................................................................... 117 Quiz .............................................................................................................................. 118 Rozdzia(cid:228) 8. Funkcje ....................................................................................... 119 Wprowadzenie .............................................................................................................. 119 Opis funkcji .................................................................................................................. 119 Funkcja angular.bind .............................................................................................. 119 Funkcja angular.bootstrap ...................................................................................... 120 Funkcja angular.copy ............................................................................................. 120 Funkcja angular.element ........................................................................................ 122 Funkcja angular.equals ........................................................................................... 126 Funkcja angular.extend .......................................................................................... 126 Funkcja angular.forEach ........................................................................................ 127 Funkcje angular.fromJson i angular.toJson ............................................................ 127 Funkcja angular.identity ......................................................................................... 127 Funkcja angular.injector ......................................................................................... 129 Funkcje angular.isArray, angular.isDate, angular.isDefined, angular.isElement, angular.isFunction, angular.isNumber, angular.isObject, angular.isString i angular.isUndefined .................................... 131 Funkcje angular.lowercase i angular.uppercase ..................................................... 131 Funkcja angular.module ......................................................................................... 132 Funkcja angular.reloadWithDebugInfo .................................................................. 132 Quiz .............................................................................................................................. 132 Rozdzia(cid:228) 9. Routing — lepsza strona nawigacji ............................................... 133 Wprowadzenie .............................................................................................................. 133 Konfiguracja ................................................................................................................. 134 Widoki .......................................................................................................................... 134 Cztery kroki w procesie konfiguracji ............................................................................ 151 Quiz .............................................................................................................................. 151 Rozdzia(cid:228) 10. Animacje ..................................................................................... 153 Wprowadzenie .............................................................................................................. 153 Jak to dzia(cid:225)a .................................................................................................................. 154 Obietnice ...................................................................................................................... 154 CSS3 Transitions .......................................................................................................... 155 Animacje CSS3 i @keyframes ..................................................................................... 158 Animacje JavaScript ..................................................................................................... 161 Quiz .............................................................................................................................. 167 Rozdzia(cid:228) 11. Komunikacja z serwerem .............................................................. 169 Wprowadzenie .............................................................................................................. 169 Klasyczne zapytanie XHR a us(cid:225)uga $http ........................................................................ 169 XHR przy u(cid:298)yciu $http ................................................................................................. 170 Kup książkęPoleć książkę 6 AngularJS. Pierwsze kroki Odpowiedzi http ........................................................................................................... 172 Promises ................................................................................................................. 172 success() i error() .................................................................................................... 172 $q, obietnice i odroczenia ....................................................................................... 173 $q.all ....................................................................................................................... 176 Przechowywanie odpowiedzi ....................................................................................... 176 Pozosta(cid:225)e metody $http ................................................................................................. 177 Parametry metody $http ................................................................................................ 177 Obiekt konfiguracyjny ............................................................................................ 177 Dane ....................................................................................................................... 178 Same origin policy oraz JSONP i CORS na ratunek XHR ........................................... 179 JSON with padding oraz jego ograniczenia ............................................................ 179 CORS — Cross Origin Resource Sharing .............................................................. 179 Trzecie wyj(cid:286)cie: proxy ........................................................................................... 180 Quiz .............................................................................................................................. 180 Rozdzia(cid:228) 12. Formularze ................................................................................... 181 Wprowadzenie .............................................................................................................. 181 ngFormController ......................................................................................................... 181 U(cid:298)ywanie klas CSS ...................................................................................................... 181 Pierwszy formularz ....................................................................................................... 183 Quiz .............................................................................................................................. 184 Rozdzia(cid:228) 13. Dobre praktyki ............................................................................. 185 Wprowadzenie .............................................................................................................. 185 Nazewnictwo i podzia(cid:225) plików ..................................................................................... 185 Organizacja kodu .......................................................................................................... 188 Wydajno(cid:286)(cid:252) .................................................................................................................... 189 Quiz .............................................................................................................................. 191 Rozdzia(cid:228) 14. Testy ........................................................................................... 193 Wprowadzenie .............................................................................................................. 193 Jasmine ......................................................................................................................... 193 Dopasowania ................................................................................................................ 197 Quiz .............................................................................................................................. 204 Rozdzia(cid:228) 15. Zako(cid:254)czenie ................................................................................ 205 Skorowidz ..................................................................................... 206 Kup książkęPoleć książkę Rozdzia(cid:228) 2. $scope — niepozorny obiekt Wprowadzenie W tym rozdziale zajmiemy si(cid:266) wspomnianym przez nas wcze(cid:286)niej obiektem $scope. Jego podstawowe zadania to: (cid:141) transportowanie modelu pomi(cid:266)dzy widokiem a kontrolerem; (cid:141) nas(cid:225)uchiwanie zdarze(cid:276) b(cid:261)d(cid:296) zmian zachodz(cid:261)cych w modelu; (cid:141) propagacja zmian modelu. Mimo (cid:298)e odgrywa wyj(cid:261)tkow(cid:261) rol(cid:266), $scope to wci(cid:261)(cid:298) zwyk(cid:225)y obiekt POJO. Oznacza to, (cid:298)e mo(cid:298)emy dowolnie przypisywa(cid:252) mu oraz modyfikowa(cid:252) atrybuty wed(cid:225)ug w(cid:225)asnego uznania. Wyró(cid:298)nia go fakt, i(cid:298) w wi(cid:266)kszo(cid:286)ci przypadków jest on za nas automatycznie tworzony i wstrzykiwany. $scope i $rootScope W fazie (cid:225)adowania pocz(cid:261)tkowego aplikacji (tzw. bootstrap) AngularJS tworzy wi(cid:261)za- nie (binduje) pomi(cid:266)dzy znacznikiem zawieraj(cid:261)cym dyrektyw(cid:266) ng-app a wszystkim, co jest zawarte w elementach poni(cid:298)ej. $rootScope jest rodzicem wszystkich obiektów $scope i znajduje si(cid:266) najwy(cid:298)ej w hie- rarchii. Instancja $rootScope jest tworzona w momencie bootstrapowania aplikacji. Ka(cid:298)dy program posiada dok(cid:225)adnie jeden taki obiekt, po którym dziedzicz(cid:261) wszystkie inne obiekty scope. Nie zalecamy przypisywania mu zbyt wielu atrybutów, gdy(cid:298) jest on czym(cid:286) na wzór obiektu globalnego, którego nie powinno si(cid:266) za(cid:286)mieca(cid:252). Przy wy- korzystywaniu wi(cid:266)cej ni(cid:298) jednej biblioteki lub frameworka istnieje ryzyko wyst(cid:261)pienia Kup książkęPoleć książkę 18 AngularJS. Pierwsze kroki zbie(cid:298)no(cid:286)ci nazw atrybutów b(cid:261)d(cid:296) metod przypisanych do globalnych obiektów. Tego typu problemy s(cid:261) niezwykle uci(cid:261)(cid:298)liwe w usuwaniu. Wspominali(cid:286)my ju(cid:298), (cid:298)e ka(cid:298)dy element przypisany do $scope jest od razu dost(cid:266)pny w widoku. Przypisywanie atrybutów i funkcji do modelu po stronie kontrolera odbywa si(cid:266) w sposób ukazany w listingu 2.1. Listing 2.1. Kontroler — przypisanie atrybutów !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title Kontroler – przypisanie atrybutów /title /head body div ng-controller= dateCtrl Data: {{orginal() | date}} /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5/angular.min.js /script script var app = angular.module( app , []); app.run(function ($rootScope) { $rootScope.dateOrginal = new Date(); }); app.controller( dateCtrl , function ($rootScope, $scope) { $scope.orginal = function () { return $rootScope.dateOrginal; }; }); /script /body /html W powy(cid:298)szym przyk(cid:225)adzie zdefiniowali(cid:286)my w $rootScope w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) dateOrginal. Nast(cid:266)pnie w kontrolerze dateCtrl stworzyli(cid:286)my funkcj(cid:266) orginal, która zwraca nam dat(cid:266) z $rootScope. Alternatywa dla $scope Istnieje równie(cid:298) mo(cid:298)liwo(cid:286)(cid:252) przypisywania atrybutów do modelu po stronie widoku bez odwo(cid:225)ywania si(cid:266) do scope. W tym celu korzystamy z dyrektywy ng-model. Jest ona dok(cid:225)adnie opisana w rozdziale 5., po(cid:286)wi(cid:266)conym dyrektywom wbudowanym. Na tym etapie warto zapami(cid:266)ta(cid:252), (cid:298)e ng-model inicjuje nam $scope, którego mo(cid:298)emy u(cid:298)y(cid:252) w kon- trolerze. html ng-app ... div ng-model= wiadomosc p {{ wiadomosc }} /p /div /html Kup książkęPoleć książkę Rozdzia(cid:228) 2. (cid:105) $scope — niepozorny obiekt 19 Stosuj(cid:261)c si(cid:266) do dobrych praktyk, powinni(cid:286)my w miar(cid:266) mo(cid:298)liwo(cid:286)ci wybiera(cid:252) wariant pierwszy, bli(cid:298)szy ideologii MVC. Dziedziczenie W przyk(cid:225)adzie z listingu 2.1 wykorzystali(cid:286)my wcze(cid:286)niej wspomniany $rootScope. Jak ju(cid:298) mówili(cid:286)my, staramy si(cid:266) nie przypisywa(cid:252) atrybutów do obiektu g(cid:225)ównego, lecz do nowo utworzonego scope znajduj(cid:261)cego si(cid:266) w hierarchii poni(cid:298)ej. app.controller( dateCtrl , function ($scope) { $scope.wiadomosc = Przypisujemy wiadomosc do widoku! ; $scope.funkcjaA = function() { return wiadomosc + Dodajemy dodatkowe zdanie ; } } $scope odwzorowuje struktur(cid:266) DOM. Oznacza to, (cid:298)e mo(cid:298)emy swobodnie zagnie(cid:298)d(cid:298)a(cid:252) jego obiekty. Korzystanie z obiektów $scope nie wymaga ich wcze(cid:286)niejszej deklaracji. Wi(cid:266)kszo(cid:286)(cid:252) obiektów $scope tworzona jest dzi(cid:266)ki metodzie $new(), wywo(cid:225)ywanej za ka(cid:298)dym ra- zem, gdy napotykana jest dyrektywa ng-controller. Nowy obiekt zostaje automatycznie zagnie(cid:298)d(cid:298)ony poni(cid:298)ej obiektu $rootScope. Poza jednym wyj(cid:261)tkiem (izolowanym scope) wszystkie obiekty $scope maj(cid:261) dost(cid:266)p do obiektów znajduj(cid:261)cych si(cid:266) w hierarchii nad nimi. Je(cid:298)eli AngularJS nie znajdzie po(cid:298)(cid:261)- danej informacji w scope na swoim poziomie, to rozpocznie przeszukiwanie obiektu znajduj(cid:261)cego si(cid:266) wy(cid:298)ej, a(cid:298) dojdzie do $rootScope. Zobaczmy na listingu 2.2, jak mo(cid:298)emy korzysta(cid:252) z dziedziczenia kontrolerów: Listing 2.2. Kontrolery — dziedziczenie !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title Kontrolery — dziedziczenie /title /head body div ng-controller= defaultCtrl div ng-controller= inheritanceCtrl input type= text ng-model= uczen.imie placeholder= Imie (cid:180)Ucznia /input button ng-click= poprawaTestu() Poprawa testu /button /div {{ uczen }} /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5/angular.min.js /script script Kup książkęPoleć książkę 20 AngularJS. Pierwsze kroki var app = angular.module( app , []); app.controller( defaultCtrl , function ($scope) { $scope.uczen = { zdanyTest: false }; }); app.controller( inheritanceCtrl , function ($scope) { $scope.poprawaTestu = function () { $scope.uczen.zdanyTest = true; } }); /script /body /html Poniewa(cid:298) inheritanceCtrl zwi(cid:261)zali(cid:286)my w hierarchii ni(cid:298)ej ni(cid:298) defaultCtrl, otrzymuje on dost(cid:266)p do metod kontrolera bazowego. Tutaj warto odnotowa(cid:252), i(cid:298) dziedziczenie w Angu- larze odbywa si(cid:266) w jednym kierunku. W tym wypadku kontroler potomny jest silnie powi(cid:261)zany z rodzicem, czyli mo(cid:298)e odwo(cid:225)ywa(cid:252) si(cid:266) do jego metod. Jednak(cid:298)e kontroler bazowy nie mo(cid:298)e bezpo(cid:286)rednio odwo(cid:225)ywa(cid:252) si(cid:266) do potomka. By uzyska(cid:252) dost(cid:266)p do owych metod, nale(cid:298)y wykorzysta(cid:252) przesy(cid:225)anie zdarze(cid:276) (ang. event dispatching). W wi(cid:266)kszo- (cid:286)ci przypadków, kiedy musimy odwo(cid:225)ywa(cid:252) si(cid:266) do metod potomnych, oznacza to, (cid:298)e powinni(cid:286)my si(cid:266) przyjrze(cid:252) naszemu kodowi, gdy(cid:298) najprawdopodobniej robimy co(cid:286) (cid:296)le. Aby pó(cid:296)niej mie(cid:252) mo(cid:298)liwo(cid:286)(cid:252) odwo(cid:225)ania si(cid:266) do naszego scope, musimy umie(cid:286)ci(cid:252) dy- rektyw(cid:266) ng-controller w dowolnym elemencie DOM znajduj(cid:261)cym si(cid:266) na tym samym b(cid:261)d(cid:296) wy(cid:298)szym poziomie hierarchii co model (a konkretnie nasze odwo(cid:225)anie do niego poprzez interpolacj(cid:266)). html ng-app ... div ng-controller= Kontroler p {{ wiadomosc }} /p /div ... /html Dyrektywa ng-controller nale(cid:298)y do grupy tzw. tworz(cid:261)cych dyrektyw. Za ka(cid:298)dym ra- zem, gdy Angular napotyka jedn(cid:261) z takich dyrektyw, zostaje utworzona nowa instancja scope, dlatego wcze(cid:286)niejsza deklaracja w kontrolerze nie jest wymagana. Wielu czytelników na pewno zadaje sobie pytanie, jaki jest sens wprowadzenia kon- cepcji dziedziczenia do scope. By na nie odpowiedzie(cid:252), pos(cid:225)u(cid:298)ymy si(cid:266) opisan(cid:261) w rozdziale 5. dyrektyw(cid:261) ng-repeat. Przytoczymy krótki opis tej dyrektywy: Ng-repeat pozwala nam iterowa(cid:252) po dowol- nej kolekcji obiektów, dodatkowo tworzy osobne elementy szablonu DOM dla ka(cid:298)dego z elementów kolekcji. Listing 2.3 najlepiej nam to zobrazuje. Kup książkęPoleć książkę Rozdzia(cid:228) 2. (cid:105) $scope — niepozorny obiekt 21 Listing 2.3. Przyk(cid:225)ad zastosowania dyrektywy ng-repeat !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title Przyk(cid:239)ad zastosowania dyrektywy ng-repeat /title /head body div ng-controller= defaultCtrl ul li ng-repeat= oferta in oferty p Nazwa: {{ oferta.nazwa }} || cena: {{oferta.cena }} /p /li /ul /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5/angular.min.js /script script var app = angular.module( app , []); app.controller( defaultCtrl , function ($scope) { $scope.oferty = [ { nazwa: Krzes(cid:239)o , cena: 149.99 }, { nazwa: Stolik , cena: 189.99 }, { nazwa: Szafka , cena: 205.99 }, ]; }); /script /body /html Zmienne z ka(cid:298)dego obiektu w kolekcji zostan(cid:261) przypisane do scope, by pó(cid:296)niej zosta(cid:252) zrenderowanymi przez widok. W(cid:225)a(cid:286)nie w tym momencie pojawia si(cid:266) problem. Aby ka(cid:298)d(cid:261) now(cid:261) zmienn(cid:261) przypisa(cid:252) do $scope, musieliby(cid:286)my nadpisywa(cid:252) poprzedni(cid:261) ze wzgl(cid:266)du na zbie(cid:298)no(cid:286)(cid:252) nazw atry- butów. Dlatego te(cid:298) ka(cid:298)demu elementowi kolekcji przypisujemy nowy scope. Dana zmienna b(cid:266)dzie „(cid:298)y(cid:252)” jedynie w obr(cid:266)bie swojego scope. Wszystkie nowo utworzone obiekty uk(cid:225)adaj(cid:261) si(cid:266) w hierarchi(cid:266) przypominaj(cid:261)c(cid:261) t(cid:266) ze struktury DOM. Mamy mo(cid:298)- liwo(cid:286)(cid:252) wykorzystania tej samej nazwy dla zmiennej w ró(cid:298)nych obiektach scope. Podobnie jak w przypadku programowania zorientowanego obiektowo dziedziczenie pozwala na izolacj(cid:266) atrybutów i funkcjonalno(cid:286)ci poszczególnych elementów modelu. Dziedziczenie obiektów scope w Angularze odbywa si(cid:266) z u(cid:298)yciem wcze(cid:286)niej wspo- mnianej metody $new(). var obiektBazowy = $rootScope; var obiektPochodny = obiektBazowy.$new(); obiektBazowy.imie = Marian ; obiektPochodny.nazwisko = Kowalski ; W celu zniszczenia danego obiektu scope nale(cid:298)y zastosowa(cid:252) metod(cid:266) $destroy(), która usuwa wszystkie obiekty pochodne (i ich pochodne) z obiektu bazowego. Od tej chwili dany scope jest gotowy na „od(cid:286)miecanie”, czyli tzw. garbage collection. Kup książkęPoleć książkę 22 AngularJS. Pierwsze kroki Izolowany scope Mo(cid:298)liwe jest równie(cid:298) utworzenie tzw. izolowanego scope, który nie dziedziczy po swoich rodzicach — jest to wcze(cid:286)niej przez nas wspomniany wyj(cid:261)tek. U(cid:298)ywamy go podczas tworzenia komponentów, które chcieliby(cid:286)my pó(cid:296)niej kilkakrotnie wykorzysta(cid:252). Tworz(cid:261)c izolowany scope, tak naprawd(cid:266) bawimy si(cid:266) z pewnymi w(cid:225)asno(cid:286)ciami obiektu scope. Wyobra(cid:296)my sobie sytuacj(cid:266), i(cid:298) stworzyli(cid:286)my dyrektyw(cid:266) s(cid:225)u(cid:298)(cid:261)c(cid:261) np. do wy(cid:286)wietlania menu na stronie naszej restauracji. Nasza dyrektywa zawiera szablon dla wy(cid:286)wietlanych informacji. Podpinamy kontroler do modu(cid:225)u, przypisujemy potrawy do $scope i przy- pinamy dyrektyw(cid:266). Gdyby(cid:286)my teraz umie(cid:286)cili kilka tagów z dyrektyw(cid:261) wewn(cid:261)trz kodu HTML, to wy(cid:286)wietlana by(cid:225)aby jedna i ta sama informacja. By temu zapobiec, musie- liby(cid:286)my stworzy(cid:252) osobny kontroler z now(cid:261) instancj(cid:261) scope dla ka(cid:298)dej potrawy. Po- mys(cid:225) czasoch(cid:225)onny i zmuszaj(cid:261)cy do pisania masy nowego kodu, nie jest to wi(cid:266)c naj- lepsze rozwi(cid:261)zanie. Tutaj w(cid:225)a(cid:286)nie wkraczaj(cid:261) izolowane obiekty scope. Aby odizolowa(cid:252) scope, musimy wewn(cid:261)trz naszej dyrektywy umie(cid:286)ci(cid:252) element scope. ... return { scope: {} } ... Od tej chwili poszczególne instancje dyrektywy b(cid:266)d(cid:261) izolowa(cid:252) swój lokalny scope. Mo(cid:298)emy wi(cid:261)za(cid:252) ró(cid:298)ne elementy przypisane do scope. $digest(), $apply() i $watch() Jak wcze(cid:286)niej wspominali(cid:286)my, scope nie s(cid:225)u(cid:298)y jedynie jako most dla danych. Do jego obowi(cid:261)zków nale(cid:298)y mi(cid:266)dzy innymi nas(cid:225)uchiwanie zmian zachodz(cid:261)cych w modelu. W tym celu wykorzystujemy opisany w dalszej cz(cid:266)(cid:286)ci tego rozdzia(cid:225)u $swatch. Scope posiada równie(cid:298) umiej(cid:266)tno(cid:286)(cid:252) wprowadzania (propagacji) zmian w modelu, znajduj(cid:261)- cych si(cid:266) wewn(cid:261)trz aplikacji b(cid:261)d(cid:296) pochodz(cid:261)cych spoza niej. Nas(cid:228)uchiwanie oraz $watch() Po przypisaniu $watch do wybranego elementu AngularJS zaczyna oczekiwa(cid:252) na ewentu- alne zmiany. W momencie ich zaj(cid:286)cia wywo(cid:225)ywana jest tzw. funkcja nas(cid:225)uchuj(cid:261)ca (ang. listener function), która mo(cid:298)e reagowa(cid:252) na te zmiany. Przyjrzyjmy si(cid:266) bli(cid:298)ej temu, jak wygl(cid:261)da nas(cid:225)uchiwanie zmian przez kanciastego, ukazane na listingu 2.4. Kup książkęPoleć książkę Rozdzia(cid:228) 2. (cid:105) $scope — niepozorny obiekt 23 Listing 2.4. Nas(cid:225)uchiwanie !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title AngularJS - $watch /title link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/ (cid:180)css/bootstrap.min.css /head body div ng-controller= defaultCtrl div class= well Liczba: {{number}} /div div a class= btn btn-success href= # ng-click= add() + /a a class= btn btn-danger href= # ng-click= dec() - /a /div /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5/angular.min.js /script script var app = angular.module( app , []); app.controller( defaultCtrl , function ($scope) { $scope.number = 1; $scope.$watch( number , function () { console.log( Liczba: + $scope.number); }); $scope.add = function () { $scope.number++; }; $scope.dec = function () { $scope.number--; }; }); /script /body /html Wcze(cid:286)niej powiedzieli(cid:286)my, (cid:298)e dzi(cid:266)ki live binding ka(cid:298)da zmiana zachodz(cid:261)ca w kon- tek(cid:286)cie Angulara jest przez niego wy(cid:225)apywana. Naturalnie rodzi si(cid:266) wi(cid:266)c pytanie, czy ka(cid:298)dy element przypisany do $scope otrzymuje od razu w(cid:225)asny obiekt nas(cid:225)uchuj(cid:261)cy. Od- powied(cid:296) brzmi: nie, gdy(cid:298) nas(cid:225)uchiwanie zmian na wszystkich elementach zaj(cid:266)(cid:225)oby zbyt du(cid:298)o czasu. Mamy do wyboru dwa sposoby zadeklarowania nas(cid:225)uchiwania wy- branych elementów: (cid:141) Pierwszy z nich to… interpolacja. Kiedy Angular napotyka interpolacj(cid:266) w widoku, to wie, (cid:298)e automatycznie musi stworzy(cid:252) obiekt nas(cid:225)uchuj(cid:261)cy (w tym wypadku implicit watcher) na dany element. div {{ watchedElement }} /div (cid:141) Istnieje równie(cid:298) mo(cid:298)liwo(cid:286)(cid:252) tworzenia nas(cid:225)uchiwaczy w(cid:225)asnor(cid:266)cznie. Struktura typowego obiektu nas(cid:225)uchuj(cid:261)cego (ang. explicit watcher) prezentuje si(cid:266) mniej wi(cid:266)cej tak: Kup książkęPoleć książkę 24 AngularJS. Pierwsze kroki $watch( watchedElement , function(newValue, oldValue) { //functions body… }); Pierwszy parametr to nazwa elementu modelu b(cid:266)d(cid:261)cego pod obserwacj(cid:261). Drugi parametr to funkcja nas(cid:225)uchuj(cid:261)ca reaguj(cid:261)ca na zachodz(cid:261)ce zmiany — jej wywo(cid:225)anie nast(cid:266)- puje za ka(cid:298)dym razem, gdy warto(cid:286)(cid:252) obserwowanego elementu ulega zmianie. Po- równanie odbywa si(cid:266) poprzez metod(cid:266) angular.equals(); wykonywana jest równie(cid:298) metoda angular.copy() w celu zapisania obecnej warto(cid:286)ci elementu. Obydwa przypadki zawarte s(cid:261) w naszym poprzednim przyk(cid:225)adzie. Zapewne niejedna osoba zastanawia(cid:225)a si(cid:266), w jaki sposób Angular dowiaduje si(cid:266) o tych zmianach zachodz(cid:261)cych w modelu. Za ich nas(cid:225)uchiwanie odpowiada cykl $digest(). $digest() $digest rozpoczyna si(cid:266) jako efekt wywo(cid:225)ania $scope.digest(). Jest to cykl ewaluacji kolejno wszystkich obiektów nas(cid:225)uchuj(cid:261)cych wyst(cid:266)puj(cid:261)cych w danym scope oraz jego potomkach. Poniewa(cid:298) zachodz(cid:261)ce zmiany wywo(cid:225)uj(cid:261) tzw. funkcje nas(cid:225)uchuj(cid:261)ce, które mog(cid:261) modyfikowa(cid:252) dowolne elementy modelu (w tym te sprawdzone ju(cid:298) wcze(cid:286)niej), $digest() powtarzany jest dopóty, dopóki owe wezwania nie ustan(cid:261). Nawet je(cid:298)eli podczas wykonywania cyklu nie zostanie wezwana (cid:298)adna funkcja nas(cid:225)uchuj(cid:261)ca, zostanie on powtórzony co najmniej raz w celu upewnienia si(cid:266), i(cid:298) nie zasz(cid:225)a (cid:298)adna zmiana. Je- (cid:286)li zdarzy si(cid:266) tak, (cid:298)e cykl wpadnie w p(cid:266)tl(cid:266) niesko(cid:276)czon(cid:261), wówczas po 10 iteracjach zostanie zwrócony b(cid:225)(cid:261)d. Wywo(cid:225)anie cyklu nast(cid:266)puje automatycznie, np. dzi(cid:266)ki dyrektywom ng-model czy ng-click. Bezpo(cid:286)rednio jednak wywo(cid:225)ywany jest najpierw $apply(), który to pó(cid:296)niej wywo(cid:225)uje $digest(). Mo(cid:298)e zaistnie(cid:252) sytuacja, w której trzeba b(cid:266)dzie wywo(cid:225)a(cid:252) $apply() manualnie. Angular zbudowany jest tak, by wychwytywa(cid:252) zmiany zachodz(cid:261)ce mi(cid:266)dzy widokiem a mode- lem automatycznie, ale dzieje si(cid:266) to wy(cid:225)(cid:261)cznie w obr(cid:266)bie jego kontekstu. W sytuacji, gdy zmiana modelu odbywa si(cid:266) poza kontekstem Angulara, nale(cid:298)y go o niej poinfor- mowa(cid:252), wywo(cid:225)uj(cid:261)c $apply() manualnie — to st(cid:261)d Angular wie, (cid:298)e musi rozpocz(cid:261)(cid:252) nas(cid:225)uchiwanie. Nie powinni(cid:286)my nigdy bezpo(cid:286)rednio wywo(cid:225)ywa(cid:252) $digest(). Prawi- d(cid:225)owo powinni(cid:286)my wywo(cid:225)a(cid:252) $apply(), który pó(cid:296)niej wykona cykl $digest(). $apply() Us(cid:225)uga $apply zachowuje si(cid:266) jak goniec wysy(cid:225)any spoza kontekstu Angulara w celu poinformowania o zaistnia(cid:225)ych zmianach. Innymi s(cid:225)owy, $apply() s(cid:225)u(cid:298)y do integracji An- gulara z innymi frameworkami b(cid:261)d(cid:296) bibliotekami. $apply() zawiera funkcj(cid:266) pobieran(cid:261) jako parametr, za której wykonanie odpowiada $eval. Do jego zada(cid:276) nale(cid:298)y równie(cid:298) sprawdzenie, czy owa funkcja jest wykonywalna, oraz ewentualne poinformowanie Angulara o wykrytych nie(cid:286)cis(cid:225)o(cid:286)ciach poprzez zwrócenie wyj(cid:261)tku. Wykorzystywana jest tu tzw. obs(cid:225)uga wyj(cid:261)tków z poziomu aplikacji (ang. Application level error handling). Jej warto(cid:286)(cid:252) najcz(cid:266)(cid:286)ciej doceniana jest wraz ze wzrostem poziomu skomplikowania aplikacji. Kup książkęPoleć książkę Rozdzia(cid:228) 2. (cid:105) $scope — niepozorny obiekt 25 Nast(cid:266)pnie wywo(cid:225)ywany jest cykl $digest(). Gdy mówimy o integracji z Angularem, mamy na my(cid:286)li w(cid:225)a(cid:286)nie t(cid:266) us(cid:225)ug(cid:266): wystarczy otoczy(cid:252) kod wewn(cid:261)trz $apply() — prawda, (cid:298)e proste? Wiesz ju(cid:298), jak dzia(cid:225)a $apply(), przejd(cid:296)my teraz do przyk(cid:225)adu, który poka(cid:298)e Ci jego zastosowanie praktyczne. Na pytanie, co stanie si(cid:266) w momencie uruchomienia poni(cid:298)szej strony, najlepiej odpowie listing 2.5: Listing 2.5. $watch !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title AngularJS - $watch /title link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/ (cid:180)css/bootstrap.min.css /head body div ng-controller= defaultCtrl div class= well Wiadomo(cid:258)(cid:202): {{msg}} /div /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5/angular.min.js /script script var app = angular.module( app , []); app.controller( defaultCtrl , function ($scope) { $scope.go = function () { setTimeout(function () { $scope.msg = Wow, jestem opó(cid:283)nion(cid:200) informacj(cid:200)! ; console.log( message: + $scope.msg); }, 2000); } $scope.go(); }); /script /body /html Wynik wywo(cid:225)ania powy(cid:298)szej strony b(cid:266)dzie nie do ko(cid:276)ca zgodny z naszymi oczekiwa- niami. Naszym celem by(cid:225)o uaktualnienie w widoku {{msg}} po dwóch sekundach. Tak si(cid:266) jednak nie sta(cid:225)o, mimo (cid:298)e teoretycznie program zadzia(cid:225)a(cid:225) i po dwóch sekundach w logu otrzymali(cid:286)my oczekiwany tekst. Dlaczego widok nie zosta(cid:225) uaktualniony? Jak roz- wi(cid:261)za(cid:252) ten problem? Do tego pos(cid:225)u(cid:298)y nam $apply(). Przeanalizujmy teraz listing 2.6. Listing 2.6. $apply() !DOCTYPE html html xmlns= http://www.w3.org/1999/xhtml ng-app= app head title AngularJS - $apply() /title link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/bootstrap/ (cid:180)3.3.1/css/bootstrap.min.css /head body Kup książkęPoleć książkę 26 AngularJS. Pierwsze kroki div ng-controller= defaultCtrl div class= well Wiadomo(cid:258)(cid:202): {{msg}} /div /div script src= https://ajax.googleapis.com/ajax/libs/angularjs/ (cid:180)1.4.0-beta.5 /angular.min.js /script script var app = angular.module( app , []); app.controller( defaultCtrl , function ($scope) { $scope.go = function () { setTimeout(function () { $scope.msg = Wow, jestem opó(cid:283)nion(cid:200) informacj(cid:200)! ; console.log( message: + $scope.msg); $scope.$apply(); }, 2000); } $scope.go(); }); /script /body /html Jak wida(cid:252), dodali(cid:286)my tylko $scope.$apply(), zmieni(cid:225)o to jednak zasadniczo dzia(cid:225)anie ca(cid:225)ej aplikacji. Tym razem otrzymali(cid:286)my odpowiedni log oraz zmian(cid:266) z dwusekundowym opó(cid:296)nieniem po stronie widoku. Najwa(cid:298)niejsze przes(cid:225)anie p(cid:225)yn(cid:261)ce z tej cz(cid:266)(cid:286)ci rozdzia(cid:225)u jest takie: wsz(cid:266)dzie tam, gdzie AngularJS nie mo(cid:298)e wykry(cid:252) zmian samodzielnie, musimy to zrobi(cid:252) r(cid:266)cznie. Quiz 1. Co to jest $scope? 2. Czym si(cid:266) ró(cid:298)ni $scope od $rootScope? 3. Co to jest drzewo DOM? 4. Jak stworzy(cid:252) izolowany scope? 5. Co to s(cid:261) obiekty nas(cid:225)uchuj(cid:261)ce? 6. Jak dzia(cid:225)a cykl $digest? 7. W jakich sytuacjach nale(cid:298)y korzysta(cid:252) z us(cid:225)ugi $apply? Kup książkęPoleć książkę D data, 18 definicja szablonu, 109 Dependency Injection Engine, 34 DI, Dependency Injection, 33 dobre praktyki nazewnictwo plików, 185 organizacja kodu, 188 podzia(cid:225) plików, 185 wydajno(cid:286)(cid:252), 189 dodawanie biblioteki, 9 filtrów, 110 konfiguracji, 42 10 dokumentacja, 7 DOM, Document Object Model, dopasowania, 197 dopasowanie toBe, 198 toBeCloseTo, 199 toBeDefined, 199 toBeFalsy, 199 toBeGreaterThan, 200 toBeLessThan, 200 toBeNaN, 200 toBeNull, 200 toBeTruthy, 199 toHaveBeenCalled, 201 toHaveBeenCalledWith, 201 toMatch, 202 toThrow, 202 Skorowidz $apply(), 24, 25 $digest(), 24 $inject, 35 $q, 173 $q.all, 176 $routeProvider, 134 $scope, 105 $watch(), 22, 25 @keyframes, 158 A AJAX, 169 akcja animacji, 162 animacja dyrektywy ngRepeat, 165 pomi(cid:266)dzy stronami, 158–162 animacje, 153 CSS3, 153, 158 JavaScript, 153, 161 API angular.module(), 28 aplikacje SPA, 7, 134 zmodularyzowane, 29 B biblioteka angular.js, 9 Bootstrap, 17, 135 jQuery, 135 C callback, 169, 172 callback hell, 172 camelCase, 48 CDN, Content Delivery Network, 10 CORS, Cross Origin Resource Sharing, 179 CSS, 181 CSS3 Transitions, 153, 155 cykl $digest, 25, 46 ewaluacji, 24 dyrektywa, 45 ngBlur, 57 ngEnd, 70 a, 51 form, 51 input, 53 ng-app, 10 ngBind, 54 ngBindHtml, 54 ngBindTemplate, 55 ngChange, 57 ngClass, 62 ngClick, 72 ngCloak, 56 ng-controller, 12, 13, 20 ngController, 74 ngCopy, 75 ngCut, 76 ngDblclick, 78 ngFocus, 57, 78 ngForm, 79 ngHref, 79 ngIf, 80 ngInclude, 80 ngKeydown, 80 ngKeypress, 80 ngKeyup, 80 ngList, 81 ng-model, 13 ngModel, 81 ngModelOptions, 82 ngMousedown, 84 ngMouseenter, 84 ngMouseleave, 84 ngMousemove, 84 ngMouseover, 84 ngMouseup, 84 ngNonBindable, 84 ngPaste, 85 ngPluralize, 85 ngReadonly, 88 ng-repeat, 21, 113 ngRepeat, 65, 167 ngStart, 70 ngStyle, 88 ngSubmit, 88 ngSwitch, 89 ngTransclude, 89 ngValue, 91 ngView, 146 script, 91 select, 93 textarea, 96 Kup książkęPoleć książkę Skorowidz dyrektywy wbudowane, 50 w(cid:225)asne, 99 dzia(cid:225)anie Jasmine, 195 serwisu, 39 dziedziczenie, 19 E Explicit Annotation, 35 explicit watcher, 23 F fabryka, 38 fabryka mountainsList, 150 filtr, 109 filter, 115 limitTo, 115 linky, 117 orderBy, 113 rangeTime, 137, 141 filtry wbudowane, 110 dyrektywy ng-repeat, 113 JSON, 113 liczbowe, 111 operacje na datach, 112 operacje na stringach, 110 format JSON, 178 formularz, 181 formularz kontaktowy, 183 framework Jasmine, 193 SPA, 13 funkcja, 119 $get(), 40 addConfig, 42 all, 176 angular.bind, 119 angular.bootstrap, 120 angular.copy, 120 angular.element, 122 angular.equals, 126 angular.extend, 126 angular.forEach, 127 angular.fromJson, 127 angular.identity, 127 angular.injector, 129 angular.isArray, 131 angular.isDate, 131 angular.isDefined, 131 angular.isElement, 131 angular.isFunction, 131 angular.isNumber, 131 angular.isObject, 131 angular.isString, 131 angular.isUndefined, 131 angular.lowercase, 131 angular.module, 132 angular.reloadWithDebugInfo, 132 angular.toJson, 127 angular.uppercase, 131 compile, 45 FirstCtrl, 13 firstTest, 196 getClass, 145 module.config(), 42 myModule.animation(), 154 nas(cid:225)uchuj(cid:261)ca, listener function, 22 when, 134 G garbage collection, 21 global namespace, 30 globalna przestrze(cid:276) nazw, 29 hard coding, 33 H I Implicit Annotation, 35 Implicit DI, 35 implicit watcher, 23 izolowany scope, 22 J Jasmine, 193 JSON, JavaScript Object Notation, 113, 170 JSONP, JSON with padding, 169, 179 K kalendarz, 135, 136 klasy CSS, 181 kompilator HTML, 48 komunikacja z serwerem, 169 komunikat o b(cid:225)(cid:266)dzie, 196 konfiguracja, 134, 151 $route, 134 modu(cid:225)u, 41 konstruktory dyrektyw, 101 kontroler, 15, 28 bazowy, 20 controller.js, 12 dateCtrl, 18 dziedziczenie, 19 potomny, 20 someCtrl, 28 kontrolki, 181 $animate.cancel(), 155 $destroy(), 21 $new(), 19, 21 angular.copy(), 24 angular.equals(), 24 angular.module(), 28 error(), 172 DELETE, 177 GET, 176 HEAD, 177 JSONP, 177 PATCH, 177 POST, 177 promise.finally(), 173 PUT, 177 reject(), 173 resolve(), 173 success(), 172 metody $http, 177 wstrzykiwania zale(cid:298)no(cid:286)ci, 35 wywo(cid:225)a(cid:276) dyrektyw, 49 minifikacja, 35 model, 15 model aplikacji, 13 modu(cid:225), 8, 27 app, 43 ngAnimate, 153 207 L, (cid:227) lista, 149 lista rozwijana, 140 live binding, 23 logika aplikacji, 13, 15 (cid:225)adowanie pocz(cid:261)tkowe aplikacji, 17 (cid:225)(cid:261)czenie modu(cid:225)ów, 30 M metoda MVC, Model-View-Controller, 15 N nas(cid:225)uchiwanie, 22 nazewnictwo dyrektyw, 48 notacja camelCase, 188 O obiekt $inject, 35, 36 $rootScope, 17 $scope, 12 $Scope, 17 Factory, 38 konfiguracyjny, 177 Kup książkęPoleć książkę 208 AngularJS. Pierwsze kroki obiekt promise, 173 Provider, 40 Value, 37 obiekty deferred, 174, 175 nas(cid:225)uchuj(cid:261)ce, 23 obietnice, promises, 154, 169, 173 obs(cid:225)uga animacji, 154 b(cid:225)(cid:266)dów, 181 wyj(cid:261)tków, 24 odpowiedzi, 176 odpowiedzi http, 172 odroczenia, deferreds, 173 od(cid:286)miecanie, 21 odwo(cid:225)anie do kontrolera, 12 operacje na datach, 112 na stringach, 110 organizacja kodu, 188 P parametry metody $http, 177 pierwsza aplikacja, 11 plik, 185 app.mdl.js, 143 app.rout.js, 143 categories-data.js, 138 controller.js, 13, 28, 29 data.json, 170, 171 default.html, 139 directives/ng-date-picker.js, 136 edit.tpl.html, 139 edit-ctrl.js, 139 filters.js, 137 filters/filters.js, 137 firstTest.js, 203 firstTestSpec.js, 196, 203 index.html, 30, 145, 203 index-ctrl.js, 145 json.tpl.html, 141 list.tpl.html, 142 list-ctrl.js, 142 ng-date-picker.js6, 136 secondTest.js, 198 secondTestSpec.js, 198 style.css, 135 todos-data.js, 138 pliki JSON, 58 pobieranie AngularJS, 8 Jasmine, 194 podpinanie kontrolera, 11 podwójne wi(cid:261)zanie, 14 prezentacja danych, 16 proces konfiguracji, 151 propagacja, 22 przechowywanie odpowiedzi, 176 przestrze(cid:276) nazw, 29 przesy(cid:225)anie zdarze(cid:276), event dispatching, 20 przypisanie atrybutów, 18 R reakcje (cid:225)a(cid:276)cuchowe obietnic, 175 regu(cid:225)a @keyframes, 158 reprezentacja problemu, 15 routing, 133 S same origin policy, 179 scope, 105 serwer proxy, 180 serwis, 39 serwis $animate, 154 snake-case, 48 SPA, Single Page Applications, 7, 13, 133 specyfikacja, 197 string, 110 struktura aplikacji, 187 katalogów, 135 system ocen, 102 szablon default.tpl.html, 144 szkielet animacji, 161 aplikacji, 12, 29 T test, 193 test zako(cid:276)czony niepowodzeniem, 196 powodzeniem, 196 testowanie JavaScriptu, 193 tworzenie animacji, 153 CSS, 153 CSS3 Transitions, 153 JavaScript, 153 dyrektyw, 101 fabryk, 40 konfiguracji, 134 sta(cid:225)ych, 42 typy obiektów, 37 U ukrywanie elementów, 166 us(cid:225)uga $apply, 24 $http, 169 uzyskiwanie zale(cid:298)no(cid:286)ci, 34 W warto(cid:286)(cid:252) NaN, 200 null, 200 wi(cid:261)zanie dwustronne, 14 jednostronne, 14 widok, 16 w(cid:225)a(cid:286)ciwo(cid:286)ci dyrektyw, 101 modu(cid:225)u, 43 ngFormController, 182 w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) dateOrginal, 18 wstrzykiwanie modu(cid:225)u animacji, 153 sta(cid:225)ej, 42 Value do Factory, 38 Value do Providera, 41 zale(cid:298)no(cid:286)ci, DI, 33 wydajno(cid:286)(cid:252), 189 wyj(cid:261)tek, 24 wyra(cid:298)enia regularne, 202 wywo(cid:225)anie $http, 170 X XHR, XmlHttpRequest, 169 Z zaciemnianie kodu, 35 zagnie(cid:298)d(cid:298)enie zapyta(cid:276), 172 zapytanie XHR, 169 zarz(cid:261)dzanie asynchronicznymi operacjami, 172 zale(cid:298)no(cid:286)ciami, 33 zastosowanie dyrektywy ng-repeat, 21 dyrektywy select, 146 explicit dependency injection, implicit dependency injection, 36 35 obiektu $inject, 36 Value, 37 zestaw specyfikacji, 197 zmodularyzowana aplikacja, 29 znak |, 109 dwukropka, 150 Kup książkęPoleć książkę Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

AngularJS. Pierwsze kroki
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: