Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
01515 009801 10446074 na godz. na dobę w sumie
Projektowanie nowoczesnych aplikacji sieciowych z użyciem AngularJS i Bootstrapa - ebook/pdf
Projektowanie nowoczesnych aplikacji sieciowych z użyciem AngularJS i Bootstrapa - ebook/pdf
Autor: Liczba stron: 208
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1850-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-20%), audiobook).
Osoby, które projektują nowoczesne aplikacje internetowe, z pewnością natknęły się na frameworki Bootstrap i AngularJS. Są to świetne projekty open source, dzięki którym praca przy tworzeniu aplikacji internetowych o różnej skali staje się wydajna i przyjemna, a kod powstający w JavaScripcie i CSS jest wyjątkowo poprawny strukturalnie. Jeśli doszedłeś do wniosku, że warto rozwinąć swoje umiejętności i wyjść poza HTML oraz CSS przy pisaniu nowoczesnych aplikacji sieciowych, to Bootstrap i AngularJS stanowią doskonałą propozycję.

Książka, którą trzymasz w dłoni, została pomyślana jako przystępny, bogato ilustrowany przewodnik po Bootstrapie i AngularJS. Jeśli masz podstawowe umiejętności w zakresie HTML, CSS i JavaScriptu, to dzięki niej zdobędziesz, a następnie rozwiniesz praktyczną wiedzę dotyczącą obu frameworków. Niejako przy okazji poznasz kilka istotnych koncepcji i ciekawych narzędzi, które okażą się zaskakująco przydatne przy programowaniu. Autor wyczerpująco, w interesujący sposób pokazuje, jak pisze się i rozwija aplikacje sieciowe.

Dzięki tej książce:

Odkryj AngularJS, zaprzyjaźnij się z Bootstrapem — i pisz świetne projekty!


Stephen Radford — wszechstronny programista aplikacji sieciowych. Pracował w wielu firmach i zrealizował wiele ciekawych projektów, takich jak FTPloy — narzędzie typu SaaS, ułatwiające ciągłą aktualizację zmian w projektach. Obecnie prowadzi firmę Cocoon, specjalizującą się w aplikacjach sieciowych, takich jak FTPloy i Former. Firma Cocoon blisko współpracuje z kilkoma start-upami i przedsiębiorstwami w zakresie rozwijania nowych idei i tworzenia na ich podstawie aplikacji internetowych.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Learning Web Development with Bootstrap and AngularJS Tłumaczenie: Piotr Cieślak ISBN: 978-83-283-1847-2 Copyright © Packt Publishing 2015. First published in the English language under the title ‘Learning Web Development with Bootstrap and AngularJS – (9781783287550)’. Polish edition copyright © 2016 by Helion S.A. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. 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. 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/pnasab.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/pnasab Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O autorze O recenzentach Przedmowa Rozdzia(cid:239) 1. Witaj, {{imi(cid:218)}} Przygotowania Instalowanie i zastosowanie AngularJS oraz Bootstrapa Instalowanie Bootstrapa Instalowanie AngularJS Zastosowanie AngularJS Bootstrap Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 2. Projektowanie za pomoc(cid:200) AngularJS i Bootstrapa Przygotowania Struktura Nawigacja Zastosowanie dyrektyw Dyrektywy ng-click i ng-mouseover Dyrektywa ng-init Dyrektywy ng-show i ng-hide Dyrektywa ng-if Dyrektywa ng-repeat Dyrektywa ng-class Dyrektywa ng-style Dyrektywa ng-cloak Pytania sprawdzaj(cid:200)ce Podsumowanie 10 11 13 17 17 18 18 19 20 23 27 27 29 29 30 30 36 37 39 39 40 40 42 42 43 44 44 Poleć książkęKup książkę Spis tre(cid:286)ci Rozdzia(cid:239) 3. Filtry Stosowanie filtra w widoku Waluta i liczby Ma(cid:239)e i wielkie litery Filtr limitTo Data Filtr Filter Sortowanie za pomoc(cid:200) orderBy JSON Stosowanie filtrów z poziomu JavaScriptu Tworzenie w(cid:239)asnego filtra Modu(cid:239)y Tworzenie filtra Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 4. Routing Instalowanie ngRoute Tworzenie tras podstawowych Trasy z parametrami Trasa domy(cid:258)lna Routing w HTML5 albo usuwanie # W(cid:239)(cid:200)czanie HTML5Mode Odsy(cid:239)acze do tras Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 5. Budowanie widoków Konstruowanie widoku Indeks Konstruowanie widoku Dodaj kontakt Formularze poziome Konstruowanie widoku Wy(cid:258)wietl kontakt Tytu(cid:239) i Gravatar Klasa form-horizontal Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 6. CRUD R jak Read Wspó(cid:239)dzielenie danych mi(cid:218)dzy widokami Tworzenie niestandardowej dyrektywy Uwzgl(cid:218)dnianie zako(cid:241)cze(cid:241) linii Wyszukiwanie oraz definiowanie klasy dla aktywnej strony aplikacji C jak Create 4 47 47 48 49 49 49 51 52 52 53 55 55 56 58 58 59 59 60 63 64 64 64 65 65 66 67 67 70 72 73 74 75 77 77 79 79 80 86 91 92 94 Poleć książkęKup książkę Spis tre(cid:286)ci U jak Update W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) scope Kontroler (cid:146)(cid:200)czenie elementów D jak Delete Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 7. AngularStrap Instalowanie AngularStrapa Zastosowanie AngularStrapa Okno modalne Okienko podpowiedzi Okienka wyskakuj(cid:200)ce Ostrze(cid:285)enia Zastosowanie us(cid:239)ug AngularStrapa Integrowanie AngularStrapa Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 8. Komunikacja z serwerem (cid:146)(cid:200)czenie za po(cid:258)rednictwem us(cid:239)ugi $http Przesy(cid:239)anie danych (cid:146)(cid:200)czenie za pomoc(cid:200) modu(cid:239)u ngResource Podpinanie ngResource Konfigurowanie ngResource Pozyskiwanie informacji z serwera Wysy(cid:239)anie danych na serwer Usuwanie kontaktów Obs(cid:239)uga b(cid:239)(cid:218)dów Inne metody (cid:239)(cid:200)czenia z serwerem RestAngular Firebase Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 9. Automatyzacja zada(cid:241) Instalowanie Node i NPM Zastosowanie Grunta Instalowanie wiersza polece(cid:241) Instalowanie Grunta Zastosowanie gulpa Globalna instalacja gulpa Instalowanie zale(cid:285)no(cid:258)ci gulpa Konfigurowanie pliku gulpfile 95 96 96 97 100 101 101 103 103 104 105 105 107 108 109 110 113 113 115 116 118 118 119 119 120 121 123 124 124 124 125 127 127 129 129 131 131 131 137 137 137 138 5 Poleć książkęKup książkę Spis tre(cid:286)ci Restrukturyzacja projektu Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 10. Dostosowywanie Bootstrapa Kompilowanie plików Less za pomoc(cid:200) Grunta albo gulpa Pobieranie (cid:283)róde(cid:239) Kompilowanie z u(cid:285)yciem Grunta Kompilowanie z u(cid:285)yciem gulpa ABC preprocesora Less Importowanie Zmienne Zagnie(cid:285)d(cid:285)one regu(cid:239)y Domieszki Konfigurowanie stylów Bootstrapa Typografia Pasek nawigacji Formularze Przyciski Motywy Bootstrapa Gdzie szuka(cid:202) dodatkowych motywów Bootstrapa? Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 11. Walidacja Weryfikacja formularzy Zgodno(cid:258)(cid:202) ze wzorcem Zastosowanie dyrektyw minlength, maxlength, min i max Tworzenie niestandardowego walidatora Pytania sprawdzaj(cid:200)ce Podsumowanie Rozdzia(cid:239) 12. Narz(cid:218)dzia opracowane przez spo(cid:239)eczno(cid:258)(cid:202) Batarang Instalowanie Bataranga Inspekcja obiektu scope i w(cid:239)a(cid:258)ciwo(cid:258)ci Analiza wydajno(cid:258)ci Wizualizacja zale(cid:285)no(cid:258)ci Opcje Bataranga Projekt ng-annotate Instalacja ng-annotate W(cid:239)(cid:200)czanie ng-annotate do Grunta U(cid:285)ywanie ng-annotate w po(cid:239)(cid:200)czeniu z gulpem Pytania sprawdzaj(cid:200)ce Podsumowanie 6 141 143 143 145 145 146 146 149 152 152 152 153 154 154 154 155 156 157 158 158 158 159 161 161 166 167 167 169 170 171 171 172 173 174 175 176 177 177 178 185 187 187 Poleć książkęKup książkę Spis tre(cid:286)ci Dodatek A. Ciekawi ludzie i projekty Projekty zwi(cid:200)zane z Bootstrapem i ich autorzy Zespó(cid:239) odpowiedzialny za podstawowy projekt Bootstrap Expo BootSnipp Przewodnik kodowania autorstwa @mdo Roots Shoelace Snippety Bootstrapa 3 dla edytora Sublime Text Font Awesome Bootstrap Icons Projekty zwi(cid:200)zane z AngularJS i ich autorzy Zespó(cid:239) odpowiedzialny za podstawowy projekt RestAngular AngularStrap i AngularMotion AngularUI Mobile AngularUI Ionic AngularGM A teraz Twoja kolej… Dodatek B. Gdzie szuka(cid:202) pomocy? Oficjalna dokumentacja GitHub Stack Overflow Grupa AngularJS w Google Egghead.io Twitter Dodatek C. Odpowiedzi na pytania sprawdzaj(cid:200)ce Skorowidz 189 189 189 190 190 190 191 191 191 192 192 192 192 193 193 193 194 194 195 195 197 197 197 198 198 198 198 201 205 7 Poleć książkęKup książkę Spis tre(cid:286)ci 8 Poleć książkęKup książkę 2 Projektowanie za pomoc(cid:200) AngularJS i Bootstrapa Teraz, gdy masz ju(cid:285) za sob(cid:200) opracowanie pierwszej aplikacji z u(cid:285)yciem AngularJS i Bootstra- pa, pora podnie(cid:258)(cid:202) poprzeczk(cid:218). W dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki b(cid:218)dziemy u(cid:285)ywa(cid:202) obu frameworków do zbudowania aplikacji typu „mened(cid:285)er kontaktów”, wyposa(cid:285)onej w wyszukiwark(cid:218) tekstow(cid:200) oraz funkcje umo(cid:285)liwiaj(cid:200)ce tworzenie, edytowanie i usuwanie rekordów. Zastanowimy si(cid:218), jak utworzy(cid:202) (cid:239)atwy w utrzymaniu kod, a zarazem przyjrzymy si(cid:218) potencja(cid:239)owi obydwu platform. A zatem do dzie(cid:239)a! Przygotowania Przygotujmy nowy katalog dla naszej aplikacji i nadajmy mu struktur(cid:218) podobn(cid:200) jak dla pro- gramu „Witaj, (cid:258)wiecie”, opisanego w rozdziale 1. „Witaj, {{imi(cid:218)}}. Struktura taka jak poni(cid:285)sza b(cid:218)dzie w sam raz (patrz rysunek na nast(cid:218)pnej stronie). Zauwa(cid:285), (cid:285)e umie(cid:258)ci(cid:239)em znane Ci ju(cid:285) foldery w nadrz(cid:218)dnym katalogu assets, aby unikn(cid:200)(cid:202) ba- (cid:239)aganu. Skopiuj pliki Angulara i Bootstrapa z folderu rozdzia(cid:239)u 1. „Witaj, {{imi(cid:218)}}” do odpo- wiednich folderów w nowym katalogu, natomiast w katalogu g(cid:239)ównym utwórz plik index.html, który b(cid:218)dzie podstaw(cid:200) naszej aplikacji do zarz(cid:200)dzania kontaktami. Poni(cid:285)szy fragment kodu to bazowy dokument HTML zawieraj(cid:200)cy odwo(cid:239)ania do Bootstrapa i Angulara. Jak wida(cid:202), zaini- cjalizowa(cid:239)em ju(cid:285) Angulara przy u(cid:285)yciu atrybutu ng-app, umieszczonego w znaczniku html . Na tym etapie zawarto(cid:258)(cid:202) strony powinna by(cid:202) taka: Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa !DOCTYPE html html lang= pl ng-app head meta charset= utf-8 title Mened(cid:285)er kontaktów /title link rel= stylesheet href= assets/css/bootstrap.min.css script type= text/javascript src= assets/js/angular.min.js /script /head body /body /html Struktura Dysponujemy podstawow(cid:200) struktur(cid:200) folderów oraz plikiem bazowym, mo(cid:285)emy wi(cid:218)c zacz(cid:200)(cid:202) budowa(cid:202) makiet(cid:218) aplikacji za pomoc(cid:200) Bootstrapa. Oprócz zbioru komponentów, takich jak elementy nawigacji i przyciski, których u(cid:285)yjemy do zbudowania struktury mened(cid:285)era kon- taktów, Bootstrap jest te(cid:285) wyposa(cid:285)ony w elastyczny, responsywny system siatkowy, którego mo(cid:285)liwo(cid:258)ci tak(cid:285)e wykorzystamy w naszej aplikacji. Nawigacja Do prze(cid:239)(cid:200)czania mi(cid:218)dzy widokami u(cid:285)yjemy komponentu navbar. B(cid:218)dzie on, rzecz jasna, znajdowa(cid:239) si(cid:218) w górnej cz(cid:218)(cid:258)ci ekranu. 30 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa Zanim roz(cid:239)o(cid:285)ymy nawigacj(cid:218) na sk(cid:239)adowe, przyjrzyjmy si(cid:218), jak b(cid:218)dzie wygl(cid:200)da(cid:239)a w ca(cid:239)o(cid:258)ci: nav class= navbar navbar-default role= navigation div class= navbar-header button type= button class= navbar-toggle data-toggle= collapse data-target= #nav-toggle span class= icon-bar /span span class= icon-bar /span span class= icon-bar /span /button a class= navbar-brand href= / Mened(cid:285)er kontaktów /a /div div class= collapse navbar-collapse id= nav-toggle ul class= nav navbar-nav li class= active a href= / Przegl(cid:200)daj /a /li li a href= /add Dodaj kontakt /a /li /ul form class= navbar-form navbar-right role= search input type= text class= form-control placeholder= Szukaj /form /div /nav Jak na co(cid:258), co ma by(cid:202) bardzo prostym komponentem naszej strony, ten kod wygl(cid:200)da na do(cid:258)(cid:202) skomplikowany. Ale je(cid:258)li przeanalizujemy go krok po kroku, oka(cid:285)e si(cid:218), (cid:285)e zawiera tylko naj- potrzebniejsze sk(cid:239)adniki. Znacznik nav obejmuje wszystkie elementy naszego paska nawigacji. Wewn(cid:200)trz niego na- wigacja jest podzielona na dwie sekcje: navbar-header i navbar-collapse. Te elementy odno- sz(cid:200) si(cid:218) tylko do wersji mobilnej i decyduj(cid:200) o tym, co jest widoczne, a co ukryte po u(cid:285)yciu prze(cid:239)(cid:200)cznika nawigacji. Atrybut data-target dla przycisku odpowiada atrybutowi id elementu navbar-collapse, dzi(cid:218)- ki czemu Bootstrap „wie”, czym powinien sterowa(cid:202) ten przycisk. Poni(cid:285)szy zrzut ekranu pre- zentuje wygl(cid:200)d elementów nawigacji na urz(cid:200)dzeniach wi(cid:218)kszych od tabletu. 31 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa Nawigacj(cid:218) umie(cid:258)cimy w znaczniku body , dzi(cid:218)ki czemu jej elementy b(cid:218)d(cid:200) rozci(cid:200)ga(cid:239)y si(cid:218) na ca(cid:239)(cid:200) szeroko(cid:258)(cid:202) okna przegl(cid:200)darki. Je(cid:258)li zw(cid:218)zisz okno przegl(cid:200)darki do szeroko(cid:258)ci poni(cid:285)ej 768 pikseli (szeroko(cid:258)(cid:202) ekranu iPada w u(cid:239)o(cid:285)eniu pionowym), Bootstrap prze(cid:239)(cid:200)czy nawigacj(cid:218) na wariant dostosowany do urz(cid:200)dze(cid:241) mobilnych, z prze(cid:239)(cid:200)cznikiem w formie przycisku. Ale je(cid:258)li klikniesz ów przycisk, nic si(cid:218) nie stanie. To dlatego, (cid:285)e na razie nie do(cid:239)(cid:200)czyli(cid:258)my jeszcze biblioteki ze skryptami JavaScript dla Bootstrapa, znajduj(cid:200)cej si(cid:218) w pobranym wcze(cid:258)niej archiwum. Skopiuj plik z t(cid:200) bibliotek(cid:200) do katalogu js i do(cid:239)(cid:200)cz j(cid:200) do dokumentu w pliku index.html. Oprócz tego do aplikacji trzeba do(cid:239)(cid:200)czy(cid:202) bibliotek(cid:218) jQuery, poniewa(cid:285) wymagaj(cid:200) jej skrypty JS dla Boot- strapa. Najnowsz(cid:200) wersj(cid:218) jQuery mo(cid:285)esz pobra(cid:202) ze strony http://jquery.com. Tak jak poprzednie pliki, nale(cid:285)y umie(cid:258)ci(cid:202) j(cid:200) w katalogu js i do(cid:239)(cid:200)czy(cid:202) w kodzie przed plikiem bootstrap.js. Upew- nij si(cid:218), (cid:285)e kolejno(cid:258)(cid:202) do(cid:239)(cid:200)czania plików JavaScript w kodzie jest nast(cid:218)puj(cid:200)ca: script src= assets/js/jquery.min.js /script script src= assets/js/bootstrap.min.js /script script src= assets/js/angular.min.js /script Je(cid:258)li od(cid:258)wie(cid:285)ysz stron(cid:218) w przegl(cid:200)darce, przycisk powinien teraz uaktywnia(cid:202) nawigacj(cid:218) w wersji mobilnej. Kilka s(cid:239)ów o systemie siatkowym Bootstrapa Dwunastokolumnowy system siatkowy Bootstrapa jest niezwykle elastyczny i umo(cid:285)liwia utwo- rzenie makiety aplikacji responsywnej przy u(cid:285)yciu zaledwie kilku elementów — z wykorzy- staniem modu(cid:239)owego charakteru CSS. Siatka Bootstrapa sk(cid:239)ada si(cid:218) z wierszy i kolumn, które za pomoc(cid:200) dost(cid:218)pnych klas mo(cid:285)na w ró(cid:285)ny sposób przystosowywa(cid:202) do w(cid:239)asnych potrzeb. Za- nim zaczniemy si(cid:218) ni(cid:200) pos(cid:239)ugiwa(cid:202), powinni(cid:258)my utworzy(cid:202) dodatkowy kontener na wiersze siatki, bo w przeciwnym razie ca(cid:239)a struktura nie b(cid:218)dzie reagowa(cid:202) tak, jak powinna. Funkcj(cid:218) tego kontenera b(cid:218)dzie pe(cid:239)ni(cid:239) zwyk(cid:239)y znacznik div , który umie(cid:258)cimy pod paskiem nawigacji: div class= container /div 32 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa W rezultacie siatka zostanie wy(cid:258)rodkowana, a dodanie w(cid:239)a(cid:258)ciwo(cid:258)ci max-width sprawi, (cid:285)e ca- (cid:239)o(cid:258)(cid:202) b(cid:218)dzie wygl(cid:200)da(cid:239)a elegancko. Istniej(cid:200) cztery prefiksy nazw klas, decyduj(cid:200)ce o zachowaniu kolumn siatki. W wi(cid:218)kszo(cid:258)ci wy- padków b(cid:218)dziemy si(cid:218) pos(cid:239)ugiwa(cid:202) prefiksem col-sm-. Prefiks ten sprawia, (cid:285)e po zw(cid:218)(cid:285)eniu kontenera do szeroko(cid:258)ci poni(cid:285)ej 750 pikseli kolumny s(cid:200) ustawiane jedna nad drug(cid:200). Pozosta(cid:239)e klasy odnosz(cid:200) si(cid:218) do innych rozmiarów ekranu, ale ich zachowanie jest podobne. Poni(cid:285)sza tabela (zaczerpni(cid:218)ta z oficjalnej strony Bootstrapa: http://getbootstrap.com) ilustruje ró(cid:285)nice mi(cid:218)dzy wszystkimi czterema klasami: Telefony ( 768 px) Tablety ((cid:149) 768 px) Komputery ((cid:149) 992 px) Komputery ((cid:149) 1200 px) Zachowanie siatki Pozioma przez ca(cid:239)y czas Pocz(cid:200)tkowo zwini(cid:218)ta, pozioma po przekroczeniu okre(cid:258)lonej szeroko(cid:258)ci Maksymalna szeroko(cid:258)(cid:202) kontenera Brak (automatyczna) 750 px Prefiks klasy Maksymalna szeroko(cid:258)(cid:202) kolumny Przesuni(cid:218)cie (offset) Kolejno(cid:258)(cid:202) kolumn Automatyczna Tak Tak .col-xs- .col-sm- ~62 px 970 px .col-md- ~81 px 1170 px .col-lg- ~97 px Utwórzmy zatem prosty uk(cid:239)ad dwukolumnowy z obszarem na g(cid:239)ówn(cid:200) tre(cid:258)(cid:202) i paskiem bocz- nym. Poniewa(cid:285) siatka sk(cid:239)ada si(cid:218) z 12 kolumn, musimy zadba(cid:202) o dopasowanie do niej obszaru na tre(cid:258)(cid:202), aby nie pozostawi(cid:202) na ekranie pustego miejsca. Moim zdaniem osiem kolumn na tre(cid:258)(cid:202) i cztery na pasek boczny to doskona(cid:239)e rozwi(cid:200)zanie, tyl- ko jak zrealizowa(cid:202) ten zamys(cid:239) w praktyce? Najpierw wewn(cid:200)trz kontenera musimy utworzy(cid:202) nowy znacznik div klasy row. B(cid:218)dzie to wiersz siatki, których to wierszy mo(cid:285)emy utworzy(cid:202) dowoln(cid:200) liczb(cid:218); ka(cid:285)dy z nich rozci(cid:200)ga si(cid:218) na wszystkie 12 kolumn. div class= container div class= row /div /div Poniewa(cid:285) chcemy, aby na urz(cid:200)dzeniach mobilnych kolumny automatycznie zmienia(cid:239)y uk(cid:239)ad na pionowy, u(cid:285)yjemy prefiksu col-sm-. Tworzenie kolumn jest bardzo proste: wystarczy wzi(cid:200)(cid:202) (cid:285)(cid:200)dany prefiks i doda(cid:202) do niego liczb(cid:218) kolumn siatki Bootstrapa, jak(cid:200) ma ona obejmowa(cid:202). Zo- baczmy, jak b(cid:218)dzie wygl(cid:200)da(cid:239) nasz prosty uk(cid:239)ad dwukolumnowy: 33 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa div class= container div class= row div class= col-sm-8 To jest obszar na tre(cid:258)(cid:202). /div div class= col-sm-4 To jest pasek boczny. /div /div /div Po wy(cid:258)wietleniu uk(cid:239)adu na ekranie wi(cid:218)kszym ni(cid:285) ekran urz(cid:200)dzenia mobilnego Bootstrap automa- tycznie doda 30 pikseli odst(cid:218)pu mi(cid:218)dzy kolumnami (po 15 pikseli z ka(cid:285)dej strony). W niektó- rych wypadkach b(cid:218)dzie nam jednak zale(cid:285)a(cid:239)o na zwi(cid:218)kszeniu tego odst(cid:218)pu albo przeciwnie — na nieznacznym (cid:258)cie(cid:258)nieniu kolumn. Bootstrap umo(cid:285)liwia takie modyfikacje za po(cid:258)rednic- twem kolejnych klas, które nale(cid:285)y doda(cid:202) do kolumny. Tak jak przy okre(cid:258)laniu szeroko(cid:258)ci, trzeba w tym celu u(cid:285)y(cid:202) odpowiedniego prefiksu — tym razem ze s(cid:239)owem offset: div class= col-sm-4 col-sm-offset-1 /div W tej sytuacji liczba na ko(cid:241)cu oznacza liczb(cid:218) kolumn siatki, wzgl(cid:218)dem których chcesz doko- na(cid:202) przesuni(cid:218)cia kolumny projektu. W rezultacie zwi(cid:218)ksza si(cid:218) margines po jej lewej stronie. Pami(cid:218)taj, (cid:285)e przesuni(cid:218)cia kolumn s(cid:200) uwzgl(cid:218)dniane w (cid:239)(cid:200)cznej liczbie 12 kolumn Bootstrapa w wierszu. Wewn(cid:200)trz istniej(cid:200)cych kolumn mo(cid:285)emy zagnie(cid:283)dzi(cid:202) kolejne wiersze i kolumny, aby otrzyma(cid:202) bardziej skomplikowany szablon. Zobaczmy: div class= container div class= row div class= col-sm-8 div class= row div class= col-sm-6 p Lorem ipsum dolor... p /div div class= col-sm-6 p Class aptent taciti... /p /div /div /div /div /div Ten kod tworzy dwie kolumny w przeznaczonym na g(cid:239)ówn(cid:200) tre(cid:258)(cid:202) kontenerze, który przygotowali- (cid:258)my wcze(cid:258)niej. Aby by(cid:239)o to widoczne, wstawi(cid:239)em w te kolumny fragmenty tekstu roboczego. 34 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa Je(cid:258)li otworzysz tak przygotowany dokument w przegl(cid:200)darce, zapewne zauwa(cid:285)ysz, (cid:285)e strona zosta(cid:239)a podzielona na trzy kolumny. Dzi(cid:218)ki zagnie(cid:285)d(cid:285)eniu siatki zawsze mo(cid:285)emy jednak utworzy(cid:202) nowy wiersz z jedn(cid:200) kolumn(cid:200), trzema kolumnami albo dowoln(cid:200) ich liczb(cid:200), jaka b(cid:218)- dzie potrzebna. Klasy pomocnicze Bootstrap jest wyposa(cid:285)ony w kilka klas pomocniczych, których mo(cid:285)na u(cid:285)y(cid:202) do dostosowania projektu. S(cid:200) to klasy u(cid:285)ytkowe, maj(cid:200)ce jedno okre(cid:258)lone zastosowanie. Przyjrzyjmy si(cid:218) kilku przyk(cid:239)adom. Elementy „p(cid:239)ywaj(cid:200)ce” Zastosowanie elementów „p(cid:239)ywaj(cid:200)cych” jest niekiedy konieczne do uzyskania oczekiwanej struktury strony WWW. Bootstrap jest wyposa(cid:285)ony w dwie klasy, umo(cid:285)liwiaj(cid:200)ce przesuwanie elementów w lew(cid:200) albo w praw(cid:200) stron(cid:218): div class= pull-left ... /div div class= pull-right ... /div Aby skutecznie si(cid:218) pos(cid:239)ugiwa(cid:202) elementami „p(cid:239)ywaj(cid:200)cymi”, trzeba je uj(cid:200)(cid:202) w klas(cid:218) clearfix. Dzi(cid:218)ki temu zostan(cid:200) one wyodr(cid:218)bnione ze struktury dokumentu i nie b(cid:218)d(cid:200) zaburza(cid:239)y jego uk(cid:239)adu: div class= clearfix div class= pull-left ... /div div class= pull-right ... /div /div Je(cid:258)li klasy „p(cid:239)ywaj(cid:200)ce” zostan(cid:200) u(cid:285)yte bezpo(cid:258)rednio w odniesieniu do elementu klasy row, to nie trzeba dodatkowo troszczy(cid:202) si(cid:218) o r(cid:218)czne anulowanie „p(cid:239)ywania” za pomoc(cid:200) klasy clearfix, poniewa(cid:285) Bootstrap zrobi to automatycznie. Wy(cid:258)rodkowywanie elementów Oprócz uaktywnienia „p(cid:239)ywania” czasami zachodzi potrzeba wy(cid:258)rodkowania elementów blo- kowych. Bootstrap umo(cid:285)liwia to za po(cid:258)rednictwem klasy center-block: div class= center-block ... /div Powoduje ona ustawienie w(cid:239)a(cid:258)ciwo(cid:258)ci margin-left i margin-right na auto, co w konsekwencji wy(cid:258)rodkowuje element. Wy(cid:258)wietlanie i ukrywanie Za pomoc(cid:200) CSS da si(cid:218) ukrywa(cid:202) i wy(cid:258)wietla(cid:202) elementy, a Bootstrap jest wyposa(cid:285)ony w dwie klasy, które to umo(cid:285)liwiaj(cid:200): div class= show ... /div div class= hidden ... /div 35 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa Warto zauwa(cid:285)y(cid:202), (cid:285)e klasa show powoduje zmian(cid:218) sposobu wy(cid:258)wietlania elementu na blokowy, nale(cid:285)y jej wi(cid:218)c u(cid:285)ywa(cid:202) tylko do elementów typu block, a nie wierszowych (inline) czy mie- szanych (inline-block). Bootstrap oferuje ponadto wiele klas umo(cid:285)liwiaj(cid:200)cych ukrywanie i wy(cid:258)wietlanie elementów przy okre(cid:258)lonych rozmiarach ekranu. Klasy te bazuj(cid:200) na tych samych predefiniowanych wiel- ko(cid:258)ciach ekranu, co siatka Bootstrapa. Na przyk(cid:239)ad poni(cid:285)szy kod spowoduje ukrycie danego elementu przy okre(cid:258)lonej wielko(cid:258)ci ekranu: div class= hidden-md /div Nast(cid:218)puj(cid:200)cy kod za(cid:258) spowoduje ukrycie elementu na urz(cid:200)dzeniach (cid:258)redniej wielko(cid:258)ci, ale element ten b(cid:218)dzie nadal widoczny na telefonach, tabletach i zwyk(cid:239)ych komputerach. Aby ukry(cid:202) element na ró(cid:285)nych urz(cid:200)dzeniach, trzeba zastosowa(cid:202) odpowiednio wiele klas: div class= hidden-md hidden-lg /div Na tej samej zasadzie, tylko na odwrót, dzia(cid:239)aj(cid:200) klasy uwidaczniaj(cid:200)ce elementy przy okre(cid:258)lo- nych wielko(cid:258)ciach ekranu. Jednak w odró(cid:285)nieniu od klas typu hidden wymagaj(cid:200) one okre(cid:258)le- nia metody wy(cid:258)wietlania: block, inline albo inline-block: div class= visible-md-block /div div class= visible-md-inline /div div class= visible-md-inline-block /div Oczywi(cid:258)cie poszczególnych klas mo(cid:285)na u(cid:285)ywa(cid:202) w parach. Je(cid:258)li na przyk(cid:239)ad chcieliby(cid:258)my, aby na mniejszym ekranie dany element by(cid:239) wy(cid:258)wietlany jako blokowy, na wi(cid:218)kszym za(cid:258) — w mieszanym trybie inline-block, mogliby(cid:258)my u(cid:285)y(cid:202) nast(cid:218)puj(cid:200)cego kodu: div class= visible-sm-block visible-md-inline-block /div Je(cid:258)li zapomnisz nazw poszczególnych klas, po prostu ponownie zerknij do podpunktu „Kilka s(cid:239)ów o systemie siatkowym Bootstrapa”. Zastosowanie dyrektyw Mia(cid:239)e(cid:258) ju(cid:285) okazj(cid:218) u(cid:285)y(cid:202) dyrektyw Angulara, cho(cid:202) na razie niewiele wspomina(cid:239)em na ich te- mat. W istocie s(cid:200) to pot(cid:218)(cid:285)ne funkcje, które mo(cid:285)na wywo(cid:239)a(cid:202) z poziomu atrybutu albo nawet w(cid:239)asnego niestandardowego elementu — w Angularze jest mnóstwo takich funkcji. Dzi(cid:218)ki nim operacje takie jak zap(cid:218)tlanie przetwarzania danych, obs(cid:239)uga klikni(cid:218)(cid:202) czy wysy(cid:239)anie for- mularzy s(cid:200) szybkie i proste. Po raz pierwszy u(cid:285)y(cid:239)e(cid:258) dyrektywy do zainicjalizowania Angulara na stronie; jak zapewne pa- mi(cid:218)tasz, by(cid:239)a to dyrektywa ng-app. Wszystkich dyrektyw, z którymi b(cid:218)dziesz mia(cid:239) do czynie- nia w tym rozdziale, u(cid:285)ywa si(cid:218) podobnie — poprzez dodanie atrybutu do elementu. 36 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa Zanim przyjrzymy si(cid:218) kolejnym wbudowanym dyrektywom, musimy napisa(cid:202) prosty kontroler. Utwórz nowy plik i nazwij go controller.js. Zapisz go w folderze js projektu i otwórz w edyto- rze tekstowym. Zgodnie z tym, czego dowiedzia(cid:239)e(cid:258) si(cid:218) w rozdziale 1., zatytu(cid:239)owanym „Witaj, {{imi(cid:218)}}”, kon- trolery to standardowe konstruktory JavaScript, do których mo(cid:285)emy wstrzykn(cid:200)(cid:202) (ang. inject) us(cid:239)u- gi Angulara, takie jak $scope. Instancje tych konstruktorów s(cid:200) generowane w chwili wykrycia przez Angulara atrybutu ng-controller. To oznacza, (cid:285)e w ramach danej aplikacji mo(cid:285)emy dysponowa(cid:202) wieloma instancjami danego kontrolera, to za(cid:258) pozwala na wielokrotne u(cid:285)ytko- wanie kodu. W wypadku naszego kontrolera wystarczy prosta deklaracja funkcji: function AppCtrl(){ } Aby poinformowa(cid:202) Angulara, (cid:285)e chcemy u(cid:285)y(cid:202) tego kontrolera, powinni(cid:258)my umie(cid:258)ci(cid:202) go na stronie ju(cid:285) po za(cid:239)adowaniu biblioteki AngularJS. Musimy te(cid:285) pami(cid:218)ta(cid:202) o dodaniu dyrektywy ng-controller do otwieraj(cid:200)cego znacznika html : html ng-controller= AppCtrl … script type= text/javascript src= assets/js/controller.js /script Dyrektywy ng-click i ng-mouseover Jedn(cid:200) z najprostszych rzeczy, jak(cid:200) mo(cid:285)na zrobi(cid:202) w JavaScripcie, jest przechwycenie zdarzenia klikni(cid:218)cia. Mo(cid:285)na tego dokona(cid:202) za pomoc(cid:200) atrybutu onclick dla elementu, biblioteki jQuery albo detektora zdarzenia (ang. listener). W Angularze u(cid:285)ywa si(cid:218) do tego dyrektyw. Aby zademonstrowa(cid:202) ich dzia(cid:239)anie, utworzymy przycisk powoduj(cid:200)cy wy(cid:258)wietlenie okienka z komunikatem — prosta sprawa. Najpierw dodajmy przycisk do przygotowanego wcze(cid:258)niej obszaru tre(cid:258)ci: div class= col-sm-8 button Kliknij mnie /button /div Je(cid:258)li otworzysz tak zmodyfikowan(cid:200) stron(cid:218) w przegl(cid:200)darce, zobaczysz na niej zwyk(cid:239)y, standar- dowy przycisk HTML, co nie powinno stanowi(cid:202) zaskoczenia. Zanim do(cid:239)(cid:200)czymy dyrektyw(cid:218) do tego elementu, musimy jeszcze umie(cid:258)ci(cid:202) odpowiedni uchwyt w kontrolerze. B(cid:218)dzie to funk- cja kontrolera, powi(cid:200)zana z jego zakresem. To bardzo wa(cid:285)ne, by funkcja by(cid:239)a powi(cid:200)zana z za- kresem, bo w przeciwnym razie nie b(cid:218)dzie do niej dost(cid:218)pu z poziomu widoku: function AppCtrl($scope){ $scope.clickHandler = function(){ window.alert( Klikni(cid:218)ty! ); }; } 37 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa Jak ju(cid:285) wiesz, na stronie mo(cid:285)e funkcjonowa(cid:202) wiele zakresów, które s(cid:200) po prostu obiektami, do których Angular umo(cid:285)liwia dost(cid:218)p widokom i kontrolerowi. Aby zapewni(cid:202) ów dost(cid:218)p kontro- lerowi, wstrzykn(cid:218)li(cid:258)my do niego us(cid:239)ug(cid:218) $scope. Us(cid:239)uga ta zapewnia dost(cid:218)p do zakresu zwi(cid:200)- zanego z elementem, do którego dodali(cid:258)my atrybut ng-controller. Funkcjonowanie Angulara w du(cid:285)ej mierze opiera si(cid:218) na wstrzykiwaniu zale(cid:285)no(cid:258)ci — to poj(cid:218)cie, z którym by(cid:202) mo(cid:285)e nie mia(cid:239)e(cid:258) dotychczas do czynienia. Mog(cid:239)e(cid:258) si(cid:218) ju(cid:285) przekona(cid:202), (cid:285)e Angular jest podzielony na modu(cid:239)y i us(cid:239)ugi. Ka(cid:285)dy modu(cid:239) i us(cid:239)uga s(cid:200) zale(cid:285)ne od innych, a wstrzykiwa- nie zale(cid:285)no(cid:258)ci zapewnia przejrzysto(cid:258)(cid:202) relacji mi(cid:218)dzy nimi. Podczas testów jednostkowych mo(cid:285)na wstrzykiwa(cid:202) specjalnie spreparowane obiekty, umo(cid:285)liwiaj(cid:200)ce zweryfikowanie popraw- no(cid:258)ci dzia(cid:239)ania danego elementu aplikacji. Wstrzykiwanie zale(cid:285)no(cid:258)ci umo(cid:285)liwia poinformo- wanie Angulara, od jakich us(cid:239)ug zale(cid:285)y dzia(cid:239)anie naszego kontrolera. Framework dba o to, by us(cid:239)ugi te by(cid:239)y dost(cid:218)pne. Kompleksowe omówienie wstrzykiwania zale(cid:285)no(cid:258)ci w AngularJS znajdziesz w oficjalnej do- kumentacji pod adresem https://docs.angularjs.org/guide/di. Uchwyt jest ju(cid:285) przygotowany, teraz trzeba jeszcze doda(cid:202) dyrektyw(cid:218) do przycisku. Tak jak poprzednio, nale(cid:285)y to zrobi(cid:202) w postaci dodatkowego atrybutu. Tym razem przeka(cid:285)emy do niego nazw(cid:218) funkcji, któr(cid:200) zamierzamy wykona(cid:202), czyli w tym wypadku clickHandler. Angular potraktuje ca(cid:239)(cid:200) zawarto(cid:258)(cid:202) dyrektywy jako wyra(cid:285)enie, trzeba zatem pami(cid:218)ta(cid:202) o dodaniu nawia- sów wskazuj(cid:200)cych, (cid:285)e mamy do czynienia z funkcj(cid:200): button ng-click= clickHandler() Kliknij mnie /button Je(cid:258)li teraz otworzysz t(cid:218) stron(cid:218) w przegl(cid:200)darce, to po klikni(cid:218)ciu przycisku pojawi si(cid:218) na ekra- nie okno komunikatu. Zauwa(cid:285), (cid:285)e podczas wywo(cid:239)ywania funkcji nie musimy si(cid:218) w widoku odwo(cid:239)ywa(cid:202) do zmiennej $scope. Funkcje i zmienne, z których mo(cid:285)na skorzysta(cid:202) w danym wi- doku, funkcjonuj(cid:200) w bie(cid:285)(cid:200)cym zakresie lub dowolnym zakresie nadrz(cid:218)dnym. 38 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa Je(cid:258)li chcieliby(cid:258)my wy(cid:258)wietli(cid:202) okno komunikatu w reakcji na wskazanie elementu kursorem myszy, a nie klikni(cid:218)cie, to wystarczy(cid:239)oby zmieni(cid:202) nazw(cid:218) dyrektywy na ng-mouseover, gdy(cid:285) dzia(cid:239)anie obydwu jest identyczne. Dyrektywa ng-init Dyrektywa ng-init s(cid:239)u(cid:285)y do przetwarzania wyra(cid:285)e(cid:241) w bie(cid:285)(cid:200)cym zakresie i mo(cid:285)e by(cid:202) u(cid:285)ywana samodzielnie lub w po(cid:239)(cid:200)czeniu z innymi dyrektywami. Ma ona wy(cid:285)szy priorytet ni(cid:285) inne dy- rektywy, aby wyra(cid:285)enie zosta(cid:239)o przetworzone odpowiednio wcze(cid:258)nie. Oto prosty przyk(cid:239)ad zastosowania dyrektywy ng-init: div ng-init= test = Witaj, (cid:258)wiecie. /div {{test}} Otwarcie strony z tym kodem w przegl(cid:200)darce spowoduje wy(cid:258)wietlenie napisu „Witaj, (cid:258)wie- cie.”. Jak wida(cid:202), przypisali(cid:258)my warto(cid:258)(cid:202) modelowi o nazwie test, a potem — za pomoc(cid:200) sk(cid:239)adni z podwójnymi nawiasami klamrowymi — wy(cid:258)wietlili(cid:258)my j(cid:200) na ekranie. Dyrektywy ng-show i ng-hide W pewnych sytuacjach przydaje si(cid:218) mo(cid:285)liwo(cid:258)(cid:202) sterowania wy(cid:258)wietlaniem jakiego(cid:258) elementu na drodze programowej. Dyrektywami ng-show i ng-hide mo(cid:285)na sterowa(cid:202) za po(cid:258)rednictwem warto(cid:258)ci zwracanych przez funkcj(cid:218) albo model. Spróbujmy rozbudowa(cid:202) utworzon(cid:200) wcze(cid:258)niej funkcj(cid:218) clickHandler, aby zademonstrowa(cid:202) za- stosowanie dyrektywy ng-click do prze(cid:239)(cid:200)czania widoczno(cid:258)ci elementu. Utworzymy w tym celu nowy model i b(cid:218)dziemy sterowa(cid:202) widoczno(cid:258)ci(cid:200) elementu poprzez prze(cid:239)(cid:200)czanie mi(cid:218)dzy logiczn(cid:200) prawd(cid:200) a fa(cid:239)szem. Zacznijmy od utworzenia elementu, który b(cid:218)dziemy ukrywa(cid:202) i wy(cid:258)wietla(cid:202). W kodzie pod przyciskiem umie(cid:258)(cid:202) nast(cid:218)puj(cid:200)cy fragment: div ng-hide= isHidden Kliknij przycisk powy(cid:285)ej, aby prze(cid:239)(cid:200)czy(cid:202) widoczno(cid:258)(cid:202). /div Modelem jest tutaj warto(cid:258)(cid:202) atrybutu ng-hide. Poniewa(cid:285) funkcjonuje on w ramach naszego za- kresu, mo(cid:285)emy (cid:239)atwo zmodyfikowa(cid:202) go za po(cid:258)rednictwem kontrolera: $scope.clickHandler = function(){ $scope.isHidden = !$scope.isHidden; }; Ten kod po prostu zamienia warto(cid:258)(cid:202) modelu na przeciwn(cid:200), co w rezultacie prze(cid:239)(cid:200)cza widocz- no(cid:258)(cid:202) elementu div . 39 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa Je(cid:258)li wypróbujesz ten przyk(cid:239)ad w przegl(cid:200)darce, oka(cid:285)e si(cid:218), (cid:285)e element nie jest domy(cid:258)lnie ukryty. Istnieje kilka sposobów na zmian(cid:218) tego stanu rzeczy. Pierwszy polega na ustawieniu warto(cid:258)ci $scope.isHidden na true w kontrolerze. Mo(cid:285)na te(cid:285) zmieni(cid:202) warto(cid:258)(cid:202) tej zmiennej na true za pomoc(cid:200) dyrektywy ng-init. Ewentualnie mogliby(cid:258)my u(cid:285)y(cid:202) dyrektywy ng-show, która dzia(cid:239)a odwrotnie ni(cid:285) ng-hide i wy(cid:258)wietla element wtedy, gdy warto(cid:258)(cid:202) modelu wynosi true. Pami(cid:218)taj o za(cid:239)adowaniu Angulara w nag(cid:239)ówku strony, bo w przeciwnym razie dyrektywy ng-hide i ng-show nie zadzia(cid:239)aj(cid:200). To dlatego, (cid:285)e Angular korzysta z w(cid:239)asnych klas do ukrywania elementów i musz(cid:200) one zosta(cid:202) za(cid:239)adowane przed wy(cid:258)wietleniem strony. Dyrektywa ng-if Angular jest ponadto wyposa(cid:285)ony w dyrektyw(cid:218) ng-if, której dzia(cid:239)anie jest podobne do ng-show i ng-hide. Z tym (cid:285)e ng-if fizycznie usuwa element z drzewa DOM, podczas gdy ng-show i ng-hide tylko prze(cid:239)(cid:200)czaj(cid:200) jego widoczno(cid:258)(cid:202). Przyjrzyjmy si(cid:218), jak mo(cid:285)na u(cid:285)y(cid:202) dyrektywy ng-if w odniesieniu do poprzedniego kodu: div ng-if= isHidden Kliknij przycisk powy(cid:285)ej, aby prze(cid:239)(cid:200)czy(cid:202) widoczno(cid:258)(cid:202). /div Je(cid:258)li chcieliby(cid:258)my odwróci(cid:202) dzia(cid:239)anie instrukcji, wystarczy(cid:239)oby poprzedzi(cid:202) wyra(cid:285)enie wykrzyk- nikiem: div ng-if= !isHidden Kliknij przycisk powy(cid:285)ej, aby prze(cid:239)(cid:200)czy(cid:202) widoczno(cid:258)(cid:202). /div Dyrektywa ng-repeat Podczas projektowania aplikacji internetowej zapewne bardzo szybko staniesz przed koniecz- no(cid:258)ci(cid:200) wygenerowania tablicy elementów. Na przyk(cid:239)ad w naszym mened(cid:285)erze kontaktów b(cid:218)- dzie to lista kontaktów, ale mo(cid:285)e to by(cid:202) cokolwiek innego. Angular umo(cid:285)liwia realizowanie tego typu zada(cid:241) za pomoc(cid:200) dyrektywy ng-repeat. Oto przyk(cid:239)adowe dane, z którymi mogliby(cid:258)my mie(cid:202) do czynienia. Jak wida(cid:202), jest to tablica obiektów z wieloma w(cid:239)a(cid:258)ciwo(cid:258)ciami. Aby wy(cid:258)wietli(cid:202) dane, trzeba b(cid:218)dzie odwo(cid:239)a(cid:202) si(cid:218) do ka(cid:285)- dej z tych w(cid:239)a(cid:258)ciwo(cid:258)ci. Na szcz(cid:218)(cid:258)cie dyrektywa ng-repeat poradzi sobie z tym doskonale. Oto kontroler z tablic(cid:200) obiektów z danymi, przypisan(cid:200) do modelu contacts: 40 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa function AppCtrl($scope){ $scope.contacts = [ { name: Janko Walski , phone: 01234567890 , email: janko@walski.com }, { name: Karen Nerka , phone: 09876543210 , email: karenne@email.com } ]; } Mamy tutaj do czynienia z zaledwie dwiema osobami, ale nietrudno sobie wyobrazi(cid:202), (cid:285)e ta- blica mog(cid:239)aby zawiera(cid:202) setki kontaktów pozyskanych za po(cid:258)rednictwem API, a z tak(cid:200) ilo(cid:258)ci(cid:200) informacji trudno by(cid:239)oby pracowa(cid:202) bez dyrektywy ng-repeat. Zacznij od umieszczenia w kontrolerze tablicy kontaktów i przypisania jej do w(cid:239)a(cid:258)ciwo(cid:258)ci $scope.contacts. Nast(cid:218)pnie otwórz plik index.html i utwórz znacznik ul . Poniewa(cid:285) b(cid:218)- dziemy wielokrotnie powtarza(cid:202) ca(cid:239)y punkt nienumerowanej listy, dyrektyw(cid:218) ng-repeat trzeba doda(cid:202) do elementu li : ul li ng-repeat= contact in contacts /li /ul Je(cid:258)li wiesz, jak funkcjonuj(cid:200) p(cid:218)tle w PHP albo w Ruby, to poczujesz si(cid:218) jak w domu. Utworzymy zmienn(cid:200), do której b(cid:218)dziemy mogli si(cid:218) odwo(cid:239)a(cid:202) w ramach powtarzanego elementu. Zmienna po s(cid:239)owie kluczowym in odwo(cid:239)uje si(cid:218) do modelu powi(cid:200)zanego z obiektem $scope w naszym kontrolerze. W rezultacie mo(cid:285)emy odwo(cid:239)a(cid:202) si(cid:218) do dowolnej w(cid:239)a(cid:258)ciwo(cid:258)ci tego obiektu, zysku- j(cid:200)c nowy zakres przy ka(cid:285)dej iteracji albo nowej pozycji. W(cid:239)a(cid:258)ciwo(cid:258)ci te mo(cid:285)emy wy(cid:258)wietli(cid:202) na stronie za pomoc(cid:200) sk(cid:239)adni z podwójnym nawiasem klamrowym Angulara, zgodnie z infor- macjami podanymi w rozdziale 1., zatytu(cid:239)owanym „Witaj, {{imi(cid:218)}}”: ul li ng-repeat= contact in contacts {{contact.name}} /li /ul Powy(cid:285)szy kod, zgodnie z oczekiwaniami, spowoduje wy(cid:258)wietlenie imion i nazwisk z naszej listy. W analogiczny sposób mo(cid:285)emy (cid:239)atwo odwo(cid:239)a(cid:202) si(cid:218) do dowolnej w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu contacts, korzystaj(cid:200)c ze standardowej sk(cid:239)adni z kropk(cid:200). 41 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa Dyrektywa ng-class Cz(cid:218)sto zachodzi potrzeba zmodyfikowania klasy albo dodania jej do elementu w sposób pro- gramowy. W tym celu mo(cid:285)emy u(cid:285)y(cid:202) dyrektywy ng-class. Umo(cid:285)liwia ona zdefiniowanie klasy do dodania lub usuni(cid:218)cia, w zale(cid:285)no(cid:258)ci od warto(cid:258)ci modelu. Dyrektyw(cid:200) ng-class mo(cid:285)na si(cid:218) pos(cid:239)u(cid:285)y(cid:202) na dwa sposoby. W najprostszej postaci Angular po prostu u(cid:285)yje warto(cid:258)ci modelu jako klasy CSS elementu: div ng-class= exampleClass /div Je(cid:258)li model, do którego si(cid:218) odwo(cid:239)ujemy, b(cid:218)dzie niew(cid:239)a(cid:258)ciwy lub zwróci fa(cid:239)sz logiczny, klasa nie zostanie zastosowana. Takie rozwi(cid:200)zanie dobrze sprawdza si(cid:218) przy pojedynczych klasach, ale je(cid:258)li chcia(cid:239)by(cid:258) mie(cid:202) troch(cid:218) wi(cid:218)ksz(cid:200) kontrol(cid:218) nad ca(cid:239)ym procesem albo zastosowa(cid:202) wiele klas do jednego elementu, wypróbuj poni(cid:285)sz(cid:200) sk(cid:239)adni(cid:218): div ng-class= {className: model, class2: model2} /div To podej(cid:258)cie jest troch(cid:218) inne. Mamy zbiór nazw klas po(cid:239)(cid:200)czonych z modelami, których war- to(cid:258)(cid:202) chcemy sprawdzi(cid:202). Je(cid:258)li model zwróci warto(cid:258)(cid:202) true, klasa zostanie dodana do elementu. Przyjrzyjmy si(cid:218) temu w praktyce. U(cid:285)yjemy pól wyboru i atrybutu ng-model, poznanego przez Ciebie w rozdziale 1. „Witaj, {{imi(cid:218)}}”, do przypisania kilku klas do akapitu: p ng-class= { text-center : center, text-danger : error} Lorem ipsum dolor sit amet /p Wykorzysta(cid:239)em tutaj dwie klasy Bootstrapa: text-center oraz text-danger. Ich zastosowanie jest uzale(cid:285)nione od dwóch modeli, na które mo(cid:285)emy wp(cid:239)ywa(cid:202) przy u(cid:285)yciu pól wyboru: label input type= checkbox ng-model= center tekst wy(cid:258)rodkowany /label label input type= checkbox ng-model= error tekst ostrzegawczy /label Ujmowanie nazw klas w pojedyncze cudzys(cid:239)owy jest potrzebne, tylko je(cid:258)li zawieraj(cid:200) one my(cid:258)lniki; w przeciw- nym razie bowiem Angular wygeneruje b(cid:239)(cid:200)d. Zaznaczenie pól spowoduje zastosowanie odpowiednich klas wzgl(cid:218)dem podanego wcze(cid:258)niej elementu. Dyrektywa ng-style Ta dyrektywa s(cid:239)u(cid:285)y do dynamicznej zmiany stylu elementu za po(cid:258)rednictwem Angulara, na podobnej zasadzie co ng-class. Aby to zademonstrowa(cid:202), utworzymy trzecie pole wyboru, któ- re doda nowe style do poprzedniego elementu — akapitu. 42 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa Dyrektywa ng-style bazuje na standardowym obiekcie JavaScript, gdzie klucze obiektu od- powiadaj(cid:200) stylom przeznaczonym do zmiany (takim jak kolor albo t(cid:239)o). Mo(cid:285)na je zastosowa(cid:202) z poziomu modelu lub za po(cid:258)rednictwem warto(cid:258)ci zwróconej przez funkcj(cid:218). Zobaczmy, jak powi(cid:200)za(cid:202) t(cid:218) dyrektyw(cid:218) z funkcj(cid:200) sprawdzaj(cid:200)c(cid:200) stan modelu. Dzi(cid:218)ki temu b(cid:218)- dziemy mogli w(cid:239)(cid:200)cza(cid:202) i wy(cid:239)(cid:200)cza(cid:202) style przy u(cid:285)yciu pola wyboru. Najpierw otwórz plik controller.js i utwórz now(cid:200) funkcj(cid:218) powi(cid:200)zan(cid:200) z zakresem. Swoj(cid:200) funk- cj(cid:218) nazwa(cid:239)em styleDemo: $scope.styleDemo = function(){ if(!$scope.styler){ return; } return { background: red , fontWeight: bold }; }; Wewn(cid:200)trz funkcji musimy sprawdzi(cid:202) warto(cid:258)(cid:202) modelu, który w tym wypadku nosi nazw(cid:218) styler. Je(cid:258)li b(cid:218)dzie to warto(cid:258)(cid:202) false, nie musimy niczego zwraca(cid:202) — w przeciwnym razie zwracamy obiekt z w(cid:239)a(cid:258)ciwo(cid:258)ciami CSS. Zauwa(cid:285), (cid:285)e w zwróconym obiekcie u(cid:285)yli(cid:258)my nazwy w(cid:239)a(cid:258)ciwo(cid:258)ci w formie fontWeight zamiast font-weight. Obie nazwy zadzia(cid:239)aj(cid:200), a Angular automatycznie prze- (cid:239)(cid:200)czy zapis w stylu CamelCase na odpowiedni(cid:200) nazw(cid:218) w(cid:239)a(cid:258)ciwo(cid:258)ci CSS. Trzeba jedynie pami(cid:218)ta(cid:202), (cid:285)e je(cid:258)li klucze obiektu JavaScript zawieraj(cid:200) my(cid:258)lniki, klucze te trzeba uj(cid:200)(cid:202) w cudzys(cid:239)owy. Ten model zostanie powi(cid:200)zany z polem wyboru, tak jak zrobili(cid:258)my to w wypadku dyrektywy ng-class: label input type= checkbox ng-model= styler ng-style /label Ostatnia rzecz polega na dodaniu dyrektywy ng-style do elementu akapitu: p .. ng-style= styleDemo() Lorem ipsum dolor sit amet /p Angular jest na tyle „sprytny”, (cid:285)e wywo(cid:239)a t(cid:218) funkcj(cid:218) ponownie przy ka(cid:285)dej zmianie zakresu. To oznacza, (cid:285)e gdy tylko warto(cid:258)(cid:202) modelu zmieni si(cid:218) z false na true, nasz styl zostanie w(cid:239)(cid:200)- czony, a w sytuacji odwrotnej — wy(cid:239)(cid:200)czony. Dyrektywa ng-cloak Na koniec przyjrzymy si(cid:218) dyrektywie ng-cloak. Je(cid:258)li w kodzie strony HTML zostan(cid:200) zastoso- wane szablony Angulara, to podczas wy(cid:258)wietlania strony w przegl(cid:200)darce — tu(cid:285) przed wczyta- niem AngularJS i skompilowaniem kodu — na ekranie przez chwil(cid:218) b(cid:218)d(cid:200) widoczne podwójne 43 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa nawiasy klamrowe. Aby tego unikn(cid:200)(cid:202), mo(cid:285)na tymczasowo ukry(cid:202) szablon a(cid:285) do chwili jego pe(cid:239)nego przetworzenia. W Angularze s(cid:239)u(cid:285)y do tego dyrektywa ng-cloak. Definiuje ona dla wczytywanego elementu dodatkow(cid:200) regu(cid:239)(cid:218) w postaci display: none !important;. Aby mie(cid:202) pewno(cid:258)(cid:202), (cid:285)e podczas wczytywania strony nic nie b(cid:218)dzie miga(cid:202), nale(cid:285)y pami(cid:218)ta(cid:202) o za(cid:239)adowa- niu Angulara w nag(cid:239)ówku ( head ) strony HTML. Pytania sprawdzaj(cid:200)ce 1. Co dodali(cid:258)my na górze strony, aby umo(cid:285)liwi(cid:202) prze(cid:239)(cid:200)czanie mi(cid:218)dzy widokami? 2. Z ilu kolumn sk(cid:239)ada si(cid:218) system siatkowy Bootstrapa? 3. Co to s(cid:200) dyrektywy i jak si(cid:218) najcz(cid:218)(cid:258)ciej ich u(cid:285)ywa? 4. Jak(cid:200) dyrektyw(cid:218) zastosowa(cid:239)by(cid:258) do zap(cid:218)tlenia przetwarzania danych? Podsumowanie W tym rozdziale omówili(cid:258)my wiele zagadnie(cid:241), zanim wi(cid:218)c przejdziemy do kolejnego, pod- sumujmy zdobyte wiadomo(cid:258)ci. Bootstrap pozwoli(cid:239) nam b(cid:239)yskawicznie opracowa(cid:202) responsywn(cid:200) nawigacj(cid:218). Aby umo(cid:285)liwi(cid:202) korzy- stanie z nawigacji dostosowanej do urz(cid:200)dze(cid:241) mobilnych, musieli(cid:258)my do(cid:239)(cid:200)czy(cid:202) do projektu plik JavaScript znajduj(cid:200)cy si(cid:218) w archiwum z Bootstrapem. Przyjrzeli(cid:258)my si(cid:218) te(cid:285) responsywnemu mechanizmowi siatkowemu o ogromnych mo(cid:285)liwo(cid:258)ciach, na którym opiera si(cid:218) Bootstrap, i utworzyli(cid:258)my prosty, dwukolumnowy uk(cid:239)ad tre(cid:258)ci. Przy oka- zji zapoznali(cid:258)my si(cid:218) z czterema prefiksami dla ró(cid:285)nych klas kolumn oraz z zagnie(cid:285)d(cid:285)aniem elementów siatki. Aby przystosowa(cid:202) uk(cid:239)ad strony do naszych potrzeb, wspomnieli(cid:258)my po- nadto o kilku dost(cid:218)pnych w Bootstrapie klasach pomocniczych, odpowiedzialnych za „p(cid:239)ywa- nie”, wy(cid:258)rodkowywanie i ukrywanie elementów. W tym rozdziale zapoznali(cid:258)my si(cid:218) te(cid:285) z wbudowanymi dyrektywami Angulara: funkcjami, które Angular pozwala wywo(cid:239)ywa(cid:202) z poziomu widoku. Zanim si(cid:218) nimi zaj(cid:218)li(cid:258)my, musieli(cid:258)my utworzy(cid:202) tak zwany kontroler, czyli funkcj(cid:218), do której mo(cid:285)emy przekazywa(cid:202) us(cid:239)ugi Angulara za po(cid:258)rednictwem procesu zwanego wstrzykiwaniem zale(cid:285)no(cid:258)ci. Dyrektywy omówione w tym rozdziale b(cid:218)d(cid:200) odgrywa(cid:239)y bardzo wa(cid:285)n(cid:200) rol(cid:218) w programowaniu mened(cid:285)era kontaktów w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki. Dyrektywy takie jak ng-click i ng-mouseover 44 Poleć książkęKup książkę Rozdzia(cid:225) 2. • Projektowanie za pomoc(cid:261) AngularJS i Bootstrapa s(cid:200) po prostu nowymi sposobami obs(cid:239)ugi zdarze(cid:241), które dotychczas z pewno(cid:258)ci(cid:200) obs(cid:239)ugiwa(cid:239)e(cid:258) w inny sposób, na przyk(cid:239)ad za po(cid:258)rednictwem jQuery albo czystego JavaScriptu. Z kolei dy- rektywy w rodzaju ng-repeat zapewne b(cid:218)d(cid:200) dla Ciebie nowo(cid:258)ci(cid:200). „Przemycaj(cid:200)” one do wido- ku pewne przydatne mechanizmy, na przyk(cid:239)ad p(cid:218)tle umo(cid:285)liwiaj(cid:200)ce cykliczne przetwarzanie danych i wy(cid:258)wietlanie ich na stronie. Przyjrzeli(cid:258)my si(cid:218) te(cid:285) dyrektywom, które (cid:258)ledz(cid:200) modele w danym zakresie i zale(cid:285)nie od ich warto(cid:258)ci wykonuj(cid:200) ró(cid:285)ne dzia(cid:239)ania. Z kolei dyrektywy takie jak ng-show i ng-hide umo(cid:285)liwiaj(cid:200) wy(cid:258)wietlenie elementu na podstawie warto(cid:258)ci modelu. Kolejnym przyk(cid:239)adem by(cid:239)a dyrektywa ng-class, która — na bazie warto(cid:258)ci modeli — umo(cid:285)liwi(cid:239)a nam dodanie do elementów pew- nych klas CSS. 45 Poleć książkęKup książkę Projektowanie nowoczesnych aplikacji sieciowych z u(cid:298)yciem AngularJS i Bootstrapa 46 Poleć książkęKup książkę Skorowidz ng-cloak, 43 ng-hide, 39 ng-if, 40 ng-init, 39 ng-keyup, 93 ng-mouseover, 37 ng-pattern, 166 ng-repeat, 40, 52, 53 ngRoute, 60 ng-show, 39 ng-style, 42 ng-view, 61, 62 dyrektywy niestandardowe, 86 elementy p(cid:239)ywaj(cid:200)ce, 35 E F filtr Filter, 51 limitTo, 49 paragraph, 91 filtry, 47 data, 49 liczby, 48 modu(cid:239)y, 55 tworzenie, 55, 56 waluta, 48 wielkie litery, 49 formularze, 156, 161 poziome, 72 funkcja console.log, 117 analiza wydajno(cid:258)ci, 174 AngularStrap, 103 automatyzacja, 149 zada(cid:241), 129, 141 A B Bootstrap, 145 budowanie widoków, 67 CRUD, 79 create, 94 delete, 100 read, 79 update, 95 C D debugowanie, 52 detektor zdarzenia, listener, 37 dokumentacja, 197 domieszki, 154 dostosowywanie Bootstrapa, 145 dwukierunkowe wi(cid:200)zanie danych, 23 dyrektywa, 36 max, 167 maxlength, 167 min, 167 minlength, 167 ng-class, 42, 93 ng-click, 37 Poleć książkęKup książkę Skorowidz Gravatar, 74 Grunt, 131 Hero Unit, 24 HTML5Mode, 64 G H I importowanie, 152 informacje z serwera, 120 inicjalizowanie, 19 inspekcja obiektu scope, 173 instalowanie AngularJS, 19 AngularStrapa, 103 Bataranga, 172 Bootstrapa, 18 gulpa, 137 Grunta, 131 ng-annotate, 177 ngRoute, 59 Node, 129 NPM, 129 wiersza polece(cid:241), 131 integrowanie AngularStrapa, 110 J JavaScript, 53 JSON, 52 Jumbotron, 24 K klasa form-horizontal, 75 kolor t(cid:239)a, 69 kolumny siatki, 33 kompilowanie, 146, 149 plików Less, 145 komponent navbar, 30 komunikacja z serwerem, 115 komunikat o b(cid:239)(cid:218)dzie, 62 konfigurowanie ngResource, 119 pakietu watch, 136 206 pliku Gruntfile, 131 pliku gulpfile, 138 routera, 60 zadania, 179 kontroler, 96 (cid:146) (cid:239)a(cid:241)cuchowanie tras, 61 (cid:239)(cid:200)czenie elementów, 97 M mened(cid:285)er kontaktów, 59, 67 metoda value, 82 metody (cid:239)(cid:200)czenia z serwerem, 124 minifikacja, 19 modu(cid:239), 55 ngResource, 118 motywy Bootstrapa, 158 N narz(cid:218)dzie, 171 Batarang, 171 Grunt, 146, 178 gulp, 149 ng-annotate, 177 nawigacja, 30 niestandardowe us(cid:239)ugi, 81 NPM, Node Package Manager, 129 O obiekt $rootScope, 80 scope, 173 obietnice, promises, 117 obs(cid:239)uga b(cid:239)(cid:218)dów, 124 RestAngulara, 125 odsy(cid:239)acze do tras, 65 okienka wyskakuj(cid:200)ce, 107 okienko podpowiedzi, 105 okno modalne, 105 opcje Bataranga, 176 ostrze(cid:285)enia, 108 Poleć książkęKup książkę Skorowidz P S pakiet watch, 136 parametry routingu, 85 pasek nawigacji, 155 plik Gruntfile.js, 132 gulpfile, 138 package.json, 131 pliki plugin Less, 145 lokalizacyjne, 48 less, 149 LiveReload, 147, 150 Watch, 147, 150 podpinanie ngResource, 119 pomoc, 197 preprocesor Less, 152 priorytet urz(cid:200)dze(cid:241) mobilnych, 23 projekt AngularGM, 195 AngularMotion, 193 AngularStrap, 193 AngularUI, 193 BootSnipp, 190 Bootstrap Expo, 190 Bootstrap Icons, 192 Font Awesome, 192 gulp, 137 Ionic, 194 Mobile AngularUI, 194 ng-annotate, 177 RestAngular, 193 Roots, 191 Shoelace, 191 Sublime Text, 191 projektowanie, 29 przesy(cid:239)anie danych, 118 przewodnik kodowania, 190 przyciski, 157 R regu(cid:239)y zagnie(cid:285)d(cid:285)one, 153 RestAngular, 124 RESTful, 115 routing, 59 serwer, 115 serwis Egghead.io, 198 GitHub, 197 Stack Overflow, 198 sie(cid:202) CDN, 18 singleton, 82 sortowanie, 52 stosowanie filtrów, 47, 53 ng-annotate, 185 strony aktywne, 92 struktura folderów, 30, 141 style Bootstrapa, 154 symbol kratki, 64 system siatkowy, 32 szablon HTML, 61 T trasa, route, 59 domy(cid:258)lna, 64 podstawowa, 60 z parametrami, 63 tworzenie filtra, 55, 56 modu(cid:239)u, 55 niestandardowego walidatora, 167 niestandardowej us(cid:239)ugi, 81 pliku Gruntfile.js, 132 pliku package.json, 131 tras podstawowych, 60 zadania domy(cid:258)lnego, 137 typografia, 154 U uruchamianie Grunta, 135 us(cid:239)uga $http, 116 factory, 82 Firebase, 125 service, 83 value, 82 207 Poleć książkęKup książkę wspó(cid:239)dzielenie danych, 80 wstrzykiwanie zale(cid:285)no(cid:258)ci, 38 wyra(cid:285)enie, 21 wysy(cid:239)anie danych, 121 wy(cid:258)rodkowywanie elementów, 35 wy(cid:258)wietlanie elementów, 35 Z zako(cid:241)czenie linii, 91 zale(cid:285)no(cid:258)ci, 175 gulpa, 137 zastosowanie AngularJS, 20 AngularStrapa, 104 Grunta, 131 gulpa, 137 us(cid:239)ug AngularStrapa, 109 zmienne, 152 Skorowidz us(cid:239)ugi AngularStrapa, 109 niestandardowe, 81 w(cid:239)asne, 84 usuwanie kontaktów, 123 W walidacja, 161 walidator niestandardowy, 167 weryfikacja formularzy, 161 widok, 67 Dodaj kontakt, 70 Indeks, 67 Wy(cid:258)wietl kontakt, 73 wiersz polece(cid:241), 131 wizualizacja zale(cid:285)no(cid:258)ci, 175 w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) scope, 96 w(cid:239)(cid:200)czanie HTML5Mode, 64 208 Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Projektowanie nowoczesnych aplikacji sieciowych z użyciem AngularJS i Bootstrapa
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ą: