Tytuł oryginału: Learning Web Development with Bootstrap ...Instalowanie i zastosowanie AngularJS...

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 HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: 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/pnasabMoż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ść

http://helion.pl/rt/pnasab

http://helion.pl/rf/pnasab

http://helion.pl/ro/pnasab

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 10

O recenzentach 11

Przedmowa 13

Rozdzia 1. Witaj, {{imi }} 17

Przygotowania 17Instalowanie i zastosowanie AngularJS oraz Bootstrapa 18

Instalowanie Bootstrapa 18Instalowanie AngularJS 19Zastosowanie AngularJS 20Bootstrap 23

Pytania sprawdzaj ce 27Podsumowanie 27

Rozdzia 2. Projektowanie za pomoc AngularJS i Bootstrapa 29

Przygotowania 29Struktura 30

Nawigacja 30Zastosowanie dyrektyw 36

Dyrektywy ng-click i ng-mouseover 37Dyrektywa ng-init 39Dyrektywy ng-show i ng-hide 39Dyrektywa ng-if 40Dyrektywa ng-repeat 40Dyrektywa ng-class 42Dyrektywa ng-style 42Dyrektywa ng-cloak 43


Poleć książkęKup książkę



Spis tre ci

4

Rozdzia 3. Filtry 47

Stosowanie filtra w widoku 47Waluta i liczby 48Ma e i wielkie litery 49Filtr limitTo 49Data 49Filtr Filter 51Sortowanie za pomoc orderBy 52JSON 52

Stosowanie filtrów z poziomu JavaScriptu 53Tworzenie w asnego filtra 55

Modu y 55Tworzenie filtra 56


Rozdzia 4. Routing 59

Instalowanie ngRoute 59Tworzenie tras podstawowych 60Trasy z parametrami 63Trasa domy lna 64Routing w HTML5 albo usuwanie # 64

W czanie HTML5Mode 64Odsy acze do tras 65Pytania sprawdzaj ce 65Podsumowanie 66

Rozdzia 5. Budowanie widoków 67

Konstruowanie widoku Indeks 67Konstruowanie widoku Dodaj kontakt 70

Formularze poziome 72Konstruowanie widoku Wy wietl kontakt 73

Tytu i Gravatar 74Klasa form-horizontal 75


Rozdzia 6. CRUD 79

R jak Read 79Wspó dzielenie danych mi dzy widokami 80Tworzenie niestandardowej dyrektywy 86Uwzgl dnianie zako cze linii 91Wyszukiwanie oraz definiowanie klasy dla aktywnej strony aplikacji 92

C jak Create 94




Spis tre ci

5

U jak Update 95W a ciwo scope 96Kontroler 96

czenie elementów 97D jak Delete 100Pytania sprawdzaj ce 101Podsumowanie 101

Rozdzia 7. AngularStrap 103

Instalowanie AngularStrapa 103Zastosowanie AngularStrapa 104

Okno modalne 105Okienko podpowiedzi 105Okienka wyskakuj ce 107Ostrze enia 108

Zastosowanie us ug AngularStrapa 109Integrowanie AngularStrapa 110Pytania sprawdzaj ce 113Podsumowanie 113

Rozdzia 8. Komunikacja z serwerem 115

czenie za po rednictwem us ugi $http 116Przesy anie danych 118

czenie za pomoc modu u ngResource 118Podpinanie ngResource 119Konfigurowanie ngResource 119Pozyskiwanie informacji z serwera 120Wysy anie danych na serwer 121Usuwanie kontaktów 123Obs uga b dów 124

Inne metody czenia z serwerem 124RestAngular 124Firebase 125


Rozdzia 9. Automatyzacja zada 129

Instalowanie Node i NPM 129Zastosowanie Grunta 131

Instalowanie wiersza polece 131Instalowanie Grunta 131

Zastosowanie gulpa 137Globalna instalacja gulpa 137Instalowanie zale no ci gulpa 137Konfigurowanie pliku gulpfile 138




Spis tre ci

6

Restrukturyzacja projektu 141Pytania sprawdzaj ce 143Podsumowanie 143

Rozdzia 10. Dostosowywanie Bootstrapa 145

Kompilowanie plików Less za pomoc Grunta albo gulpa 145Pobieranie róde 146Kompilowanie z u yciem Grunta 146Kompilowanie z u yciem gulpa 149

ABC preprocesora Less 152Importowanie 152Zmienne 152Zagnie d one regu y 153Domieszki 154

Konfigurowanie stylów Bootstrapa 154Typografia 154Pasek nawigacji 155Formularze 156Przyciski 157

Motywy Bootstrapa 158Gdzie szuka dodatkowych motywów Bootstrapa? 158Pytania sprawdzaj ce 158Podsumowanie 159

Rozdzia 11. Walidacja 161

Weryfikacja formularzy 161Zgodno ze wzorcem 166Zastosowanie dyrektyw minlength, maxlength, min i max 167Tworzenie niestandardowego walidatora 167


Rozdzia 12. Narz dzia opracowane przez spo eczno 171

Batarang 171Instalowanie Bataranga 172

Inspekcja obiektu scope i w a ciwo ci 173Analiza wydajno ci 174Wizualizacja zale no ci 175Opcje Bataranga 176

Projekt ng-annotate 177Instalacja ng-annotate 177W czanie ng-annotate do Grunta 178U ywanie ng-annotate w po czeniu z gulpem 185





Spis tre ci

7

Dodatek A. Ciekawi ludzie i projekty 189

Projekty zwi zane z Bootstrapem i ich autorzy 189Zespó odpowiedzialny za podstawowy projekt 189Bootstrap Expo 190BootSnipp 190Przewodnik kodowania autorstwa @mdo 190Roots 191Shoelace 191Snippety Bootstrapa 3 dla edytora Sublime Text 191Font Awesome 192Bootstrap Icons 192

Projekty zwi zane z AngularJS i ich autorzy 192Zespó odpowiedzialny za podstawowy projekt 192RestAngular 193AngularStrap i AngularMotion 193AngularUI 193Mobile AngularUI 194Ionic 194AngularGM 195

A teraz Twoja kolej… 195

Dodatek B. Gdzie szuka pomocy? 197

Oficjalna dokumentacja 197GitHub 197Stack Overflow 198Grupa AngularJS w Google 198Egghead.io 198Twitter 198

Dodatek C. Odpowiedzi na pytania sprawdzaj ce 201

Skorowidz 205




Spis tre ci

8




2

Projektowanieza pomoc AngularJS

i Bootstrapa

Teraz, gdy masz ju za sob opracowanie pierwszej aplikacji z u yciem AngularJS i Bootstra-pa, pora podnie poprzeczk . W dalszej cz ci ksi ki b dziemy u ywa obu frameworkówdo zbudowania aplikacji typu „mened er kontaktów”, wyposa onej w wyszukiwark tekstoworaz funkcje umo liwiaj ce tworzenie, edytowanie i usuwanie rekordów. Zastanowimy si , jakutworzy atwy w utrzymaniu kod, a zarazem przyjrzymy si potencja owi obydwu platform.A zatem do dzie a!

PrzygotowaniaPrzygotujmy nowy katalog dla naszej aplikacji i nadajmy mu struktur podobn jak dla pro-gramu „Witaj, wiecie”, opisanego w rozdziale 1. „Witaj, {{imi }}.

Struktura taka jak poni sza b dzie w sam raz (patrz rysunek na nast pnej stronie).

Zauwa , e umie ci em znane Ci ju foldery w nadrz dnym katalogu assets, aby unikn ba-aganu. Skopiuj pliki Angulara i Bootstrapa z folderu rozdzia u 1. „Witaj, {{imi }}” do odpo-

wiednich folderów w nowym katalogu, natomiast w katalogu g ównym utwórz plik index.html,który b dzie podstaw naszej aplikacji do zarz dzania kontaktami. Poni szy fragment kodu tobazowy dokument HTML zawieraj cy odwo ania do Bootstrapa i Angulara. Jak wida , zaini-cjalizowa em ju Angulara przy u yciu atrybutu ng-app, umieszczonego w znaczniku <html>.Na tym etapie zawarto strony powinna by taka:




Projektowanie nowoczesnych aplikacji sieciowych z u yciem AngularJS i Bootstrapa

30

<!DOCTYPE html><html lang="pl" ng-app><head> <meta charset="utf-8"> <title>Mened 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>

StrukturaDysponujemy podstawow struktur folderów oraz plikiem bazowym, mo emy wi c zaczbudowa makiet aplikacji za pomoc Bootstrapa. Oprócz zbioru komponentów, takich jakelementy nawigacji i przyciski, których u yjemy do zbudowania struktury mened era kon-taktów, Bootstrap jest te wyposa ony w elastyczny, responsywny system siatkowy, któregomo liwo ci tak e wykorzystamy w naszej aplikacji.

NawigacjaDo prze czania mi dzy widokami u yjemy komponentu navbar. B dzie on, rzecz jasna,znajdowa si w górnej cz ci ekranu.




Rozdzia 2. • Projektowanie za pomoc AngularJS i Bootstrapa

31

Zanim roz o ymy nawigacj na sk adowe, przyjrzyjmy si , jak b dzie wygl da a w ca o 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 er kontaktów</a> </div> <div class="collapse navbar-collapse" id="nav-toggle"> <ul class="nav navbar-nav"> <li class="active"><a href="/">Przegl 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 , co ma by bardzo prostym komponentem naszej strony, ten kod wygl da na doskomplikowany. Ale je li przeanalizujemy go krok po kroku, oka e si , e zawiera tylko naj-potrzebniejsze sk adniki.

Znacznik <nav> obejmuje wszystkie elementy naszego paska nawigacji. Wewn trz niego na-wigacja jest podzielona na dwie sekcje: navbar-header i navbar-collapse. Te elementy odno-sz si tylko do wersji mobilnej i decyduj o tym, co jest widoczne, a co ukryte po u yciuprze cznika nawigacji.

Atrybut data-target dla przycisku odpowiada atrybutowi id elementu navbar-collapse, dzi -ki czemu Bootstrap „wie”, czym powinien sterowa ten przycisk. Poni szy zrzut ekranu pre-zentuje wygl d elementów nawigacji na urz dzeniach wi kszych od tabletu.





32

Nawigacj umie cimy w znaczniku <body>, dzi ki czemu jej elementy b d rozci ga y si naca szeroko okna przegl darki.

Je li zw zisz okno przegl darki do szeroko ci poni ej 768 pikseli (szeroko ekranu iPadaw u o eniu pionowym), Bootstrap prze czy nawigacj na wariant dostosowany do urz dzemobilnych, z prze cznikiem w formie przycisku. Ale je li klikniesz ów przycisk, nic si niestanie. To dlatego, e na razie nie do czyli my jeszcze biblioteki ze skryptami JavaScript dlaBootstrapa, znajduj cej si w pobranym wcze niej archiwum.

Skopiuj plik z t bibliotek do katalogu js i do cz j do dokumentu w pliku index.html. Oprócztego do aplikacji trzeba do czy bibliotek jQuery, poniewa wymagaj jej skrypty JS dla Boot-strapa. Najnowsz wersj jQuery mo esz pobra ze strony http://jquery.com. Tak jak poprzedniepliki, nale y umie ci j w katalogu js i do czy w kodzie przed plikiem bootstrap.js. Upew-nij si , e kolejno do czania plików JavaScript w kodzie jest nast puj 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 li od wie ysz stron w przegl darce, przycisk powinien teraz uaktywnia nawigacj w wersjimobilnej.

Kilka s ów o systemie siatkowym BootstrapaDwunastokolumnowy system siatkowy Bootstrapa jest niezwykle elastyczny i umo liwia utwo-rzenie makiety aplikacji responsywnej przy u yciu zaledwie kilku elementów — z wykorzy-staniem modu owego charakteru CSS. Siatka Bootstrapa sk ada si z wierszy i kolumn, któreza pomoc dost pnych klas mo na w ró ny sposób przystosowywa do w asnych potrzeb. Za-nim zaczniemy si ni pos ugiwa , powinni my utworzy dodatkowy kontener na wierszesiatki, bo w przeciwnym razie ca a struktura nie b dzie reagowa tak, jak powinna. Funkcjtego kontenera b dzie pe ni zwyk y znacznik <div>, który umie cimy pod paskiem nawigacji:

<div class="container"></div>





33

W rezultacie siatka zostanie wy rodkowana, a dodanie w a ciwo ci max-width sprawi, e ca-o b dzie wygl da a elegancko.

Istniej cztery prefiksy nazw klas, decyduj ce o zachowaniu kolumn siatki. W wi kszo ci wy-padków b dziemy si pos ugiwa prefiksem col-sm-. Prefiks ten sprawia, e po zw eniukontenera do szeroko ci poni ej 750 pikseli kolumny s ustawiane jedna nad drug .

Pozosta e klasy odnosz si do innych rozmiarów ekranu, ale ich zachowanie jest podobne.Poni sza tabela (zaczerpni ta z oficjalnej strony Bootstrapa: http://getbootstrap.com) ilustrujeró nice mi dzy wszystkimi czterema klasami:

Telefony (< 768 px) Tablety ( 768 px) Komputery ( 992 px) Komputery ( 1200 px)

Zachowanie siatkiPoziomaprzez ca y czas

Pocz tkowo zwini ta, pozioma po przekroczeniu okre lonejszeroko ci

Maksymalnaszeroko kontenera Brak (automatyczna) 750 px 970 px 1170 px

Prefiks klasy .col-xs- .col-sm- .col-md- .col-lg-

Maksymalnaszeroko kolumny

Automatyczna ~62 px ~81 px ~97 px

Przesuni cie (offset) Tak

Kolejno kolumn Tak

Utwórzmy zatem prosty uk ad dwukolumnowy z obszarem na g ówn tre i paskiem bocz-nym. Poniewa siatka sk ada si z 12 kolumn, musimy zadba o dopasowanie do niej obszaruna tre , aby nie pozostawi na ekranie pustego miejsca.

Moim zdaniem osiem kolumn na tre i cztery na pasek boczny to doskona e rozwi zanie, tyl-ko jak zrealizowa ten zamys w praktyce?

Najpierw wewn trz kontenera musimy utworzy nowy znacznik <div> klasy row. B dzie towiersz siatki, których to wierszy mo emy utworzy dowoln liczb ; ka dy z nich rozci ga sina wszystkie 12 kolumn.

<div class="container"> <div class="row">

</div></div>

Poniewa chcemy, aby na urz dzeniach mobilnych kolumny automatycznie zmienia y uk adna pionowy, u yjemy prefiksu col-sm-. Tworzenie kolumn jest bardzo proste: wystarczy wzi

dany prefiks i doda do niego liczb kolumn siatki Bootstrapa, jak ma ona obejmowa . Zo-baczmy, jak b dzie wygl da nasz prosty uk ad dwukolumnowy:





34

<div class="container"> <div class="row"> <div class="col-sm-8"> To jest obszar na tre . </div> <div class="col-sm-4"> To jest pasek boczny. </div> </div></div>

Po wy wietleniu uk adu na ekranie wi kszym ni ekran urz dzenia mobilnego Bootstrap automa-tycznie doda 30 pikseli odst pu mi dzy kolumnami (po 15 pikseli z ka dej strony). W niektó-rych wypadkach b dzie nam jednak zale a o na zwi kszeniu tego odst pu albo przeciwnie —na nieznacznym cie nieniu kolumn. Bootstrap umo liwia takie modyfikacje za po rednic-twem kolejnych klas, które nale y doda do kolumny.

Tak jak przy okre laniu szeroko ci, trzeba w tym celu u y odpowiedniego prefiksu — tymrazem ze s owem offset:

<div class="col-sm-4 col-sm-offset-1"></div>

W tej sytuacji liczba na ko cu oznacza liczb kolumn siatki, wzgl dem których chcesz doko-na przesuni cia kolumny projektu. W rezultacie zwi ksza si margines po jej lewej stronie.

Pami taj, e przesuni cia kolumn s uwzgl dniane w cznej liczbie 12 kolumn Bootstrapa w wierszu.

Wewn trz istniej cych kolumn mo emy zagnie dzi kolejne wiersze i kolumny, aby otrzymabardziej 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 ówn tre kontenerze, który przygotowali-my wcze niej. Aby by o to widoczne, wstawi em w te kolumny fragmenty tekstu roboczego.





35

Je li otworzysz tak przygotowany dokument w przegl darce, zapewne zauwa ysz, e stronazosta a podzielona na trzy kolumny. Dzi ki zagnie d eniu siatki zawsze mo emy jednakutworzy nowy wiersz z jedn kolumn , trzema kolumnami albo dowoln ich liczb , jaka b -dzie potrzebna.

Klasy pomocniczeBootstrap jest wyposa ony w kilka klas pomocniczych, których mo na u y do dostosowaniaprojektu. S to klasy u ytkowe, maj ce jedno okre lone zastosowanie. Przyjrzyjmy si kilkuprzyk adom.

Elementy „p ywaj ce”Zastosowanie elementów „p ywaj cych” jest niekiedy konieczne do uzyskania oczekiwanejstruktury strony WWW. Bootstrap jest wyposa ony w dwie klasy, umo liwiaj ce przesuwanieelementów w lew albo w praw stron :

<div class="pull-left">...</div><div class="pull-right">...</div>

Aby skutecznie si pos ugiwa elementami „p ywaj cymi”, trzeba je uj w klas clearfix. Dzi kitemu zostan one wyodr bnione ze struktury dokumentu i nie b d zaburza y jego uk adu:

<div class="clearfix"> <div class="pull-left">...</div> <div class="pull-right">...</div></div>

Je li klasy „p ywaj ce” zostan u yte bezpo rednio w odniesieniu do elementu klasy row, tonie trzeba dodatkowo troszczy si o r czne anulowanie „p ywania” za pomoc klasy clearfix,poniewa Bootstrap zrobi to automatycznie.

Wy rodkowywanie elementówOprócz uaktywnienia „p ywania” czasami zachodzi potrzeba wy rodkowania elementów blo-kowych. Bootstrap umo liwia to za po rednictwem klasy center-block:

<div class="center-block">...</div>

Powoduje ona ustawienie w a ciwo ci margin-left i margin-right na auto, co w konsekwencjiwy rodkowuje element.

Wy wietlanie i ukrywanieZa pomoc CSS da si ukrywa i wy wietla elementy, a Bootstrap jest wyposa ony w dwieklasy, które to umo liwiaj :

<div class="show">...</div><div class="hidden">...</div>





36

Warto zauwa y , e klasa show powoduje zmian sposobu wy wietlania elementu na blokowy,nale y jej wi c u ywa tylko do elementów typu block, a nie wierszowych (inline) czy mie-szanych (inline-block).

Bootstrap oferuje ponadto wiele klas umo liwiaj cych ukrywanie i wy wietlanie elementówprzy okre lonych rozmiarach ekranu. Klasy te bazuj na tych samych predefiniowanych wiel-ko ciach ekranu, co siatka Bootstrapa.

Na przyk ad poni szy kod spowoduje ukrycie danego elementu przy okre lonej wielko ci ekranu:

<div class="hidden-md"></div>

Nast puj cy kod za spowoduje ukrycie elementu na urz dzeniach redniej wielko ci, aleelement ten b dzie nadal widoczny na telefonach, tabletach i zwyk ych komputerach. Abyukry element na ró nych urz dzeniach, trzeba zastosowa odpowiednio wiele klas:

<div class="hidden-md hidden-lg"></div>

Na tej samej zasadzie, tylko na odwrót, dzia aj klasy uwidaczniaj ce elementy przy okre lo-nych wielko ciach ekranu. Jednak w odró nieniu od klas typu hidden wymagaj one okre le-nia metody wy 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 cie poszczególnych klas mo na u ywa w parach. Je li na przyk ad chcieliby my, abyna mniejszym ekranie dany element by wy wietlany jako blokowy, na wi kszym za —w mieszanym trybie inline-block, mogliby my u y nast puj cego kodu:

<div class="visible-sm-block visible-md-inline-block"></div>

Je li zapomnisz nazw poszczególnych klas, po prostu ponownie zerknij do podpunktu „Kilkas ów o systemie siatkowym Bootstrapa”.

Zastosowanie dyrektywMia e ju okazj u y dyrektyw Angulara, cho na razie niewiele wspomina em na ich te-mat. W istocie s to pot ne funkcje, które mo na wywo a z poziomu atrybutu albo nawetw asnego niestandardowego elementu — w Angularze jest mnóstwo takich funkcji. Dzi kinim operacje takie jak zap tlanie przetwarzania danych, obs uga klikni czy wysy anie for-mularzy s szybkie i proste.

Po raz pierwszy u y e dyrektywy do zainicjalizowania Angulara na stronie; jak zapewne pa-mi tasz, by a to dyrektywa ng-app. Wszystkich dyrektyw, z którymi b dziesz mia do czynie-nia w tym rozdziale, u ywa si podobnie — poprzez dodanie atrybutu do elementu.





37

Zanim przyjrzymy si kolejnym wbudowanym dyrektywom, musimy napisa 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 e si w rozdziale 1., zatytu owanym „Witaj, {{imi }}”, kon-trolery to standardowe konstruktory JavaScript, do których mo emy wstrzykn (ang. inject) us u-gi Angulara, takie jak $scope. Instancje tych konstruktorów s generowane w chwili wykryciaprzez Angulara atrybutu ng-controller. To oznacza, e w ramach danej aplikacji mo emydysponowa wieloma instancjami danego kontrolera, to za pozwala na wielokrotne u ytko-wanie kodu. W wypadku naszego kontrolera wystarczy prosta deklaracja funkcji:

function AppCtrl(){}

Aby poinformowa Angulara, e chcemy u y tego kontrolera, powinni my umie ci go nastronie ju po za adowaniu biblioteki AngularJS. Musimy te pami ta o dodaniu dyrektywyng-controller do otwieraj cego znacznika <html>:

<html ng-controller="AppCtrl">…<script type="text/javascript" src="assets/js/controller.js"></script>

Dyrektywy ng-click i ng-mouseoverJedn z najprostszych rzeczy, jak mo na zrobi w JavaScripcie, jest przechwycenie zdarzeniaklikni cia. Mo na tego dokona za pomoc atrybutu onclick dla elementu, biblioteki jQueryalbo detektora zdarzenia (ang. listener). W Angularze u ywa si do tego dyrektyw.

Aby zademonstrowa ich dzia anie, utworzymy przycisk powoduj cy wy wietlenie okienkaz komunikatem — prosta sprawa. Najpierw dodajmy przycisk do przygotowanego wcze niejobszaru tre ci:

<div class="col-sm-8"> <button>Kliknij mnie</button></div>

Je li otworzysz tak zmodyfikowan stron w przegl darce, zobaczysz na niej zwyk y, standar-dowy przycisk HTML, co nie powinno stanowi zaskoczenia. Zanim do czymy dyrektyw dotego elementu, musimy jeszcze umie ci odpowiedni uchwyt w kontrolerze. B dzie to funk-cja kontrolera, powi zana z jego zakresem. To bardzo wa ne, by funkcja by a powi zana z za-kresem, bo w przeciwnym razie nie b dzie do niej dost pu z poziomu widoku:

function AppCtrl($scope){ $scope.clickHandler = function(){ window.alert('Klikni ty!'); };}





38

Jak ju wiesz, na stronie mo e funkcjonowa wiele zakresów, które s po prostu obiektami, doktórych Angular umo liwia dost p widokom i kontrolerowi. Aby zapewni ów dost p kontro-lerowi, wstrzykn li my do niego us ug $scope. Us uga ta zapewnia dost p do zakresu zwi -zanego z elementem, do którego dodali my atrybut ng-controller.

Funkcjonowanie Angulara w du ej mierze opiera si na wstrzykiwaniu zale no ci — to poj cie,z którym by mo e nie mia e dotychczas do czynienia. Mog e si ju przekona , e Angularjest podzielony na modu y i us ugi. Ka dy modu i us uga s zale ne od innych, a wstrzykiwa-nie zale no ci zapewnia przejrzysto relacji mi dzy nimi. Podczas testów jednostkowychmo na wstrzykiwa specjalnie spreparowane obiekty, umo liwiaj ce zweryfikowanie popraw-no ci dzia ania danego elementu aplikacji. Wstrzykiwanie zale no ci umo liwia poinformo-wanie Angulara, od jakich us ug zale y dzia anie naszego kontrolera. Framework dba o to, byus ugi te by y dost pne.

Kompleksowe omówienie wstrzykiwania zale no ci w AngularJS znajdziesz w oficjalnej do-kumentacji pod adresem https://docs.angularjs.org/guide/di.

Uchwyt jest ju przygotowany, teraz trzeba jeszcze doda dyrektyw do przycisku. Tak jakpoprzednio, nale y to zrobi w postaci dodatkowego atrybutu. Tym razem przeka emy doniego nazw funkcji, któr zamierzamy wykona , czyli w tym wypadku clickHandler. Angularpotraktuje ca zawarto dyrektywy jako wyra enie, trzeba zatem pami ta o dodaniu nawia-sów wskazuj cych, e mamy do czynienia z funkcj :

<button ng-click="clickHandler()">Kliknij mnie</button>

Je li teraz otworzysz t stron w przegl darce, to po klikni ciu przycisku pojawi si na ekra-nie okno komunikatu. Zauwa , e podczas wywo ywania funkcji nie musimy si w widokuodwo ywa do zmiennej $scope. Funkcje i zmienne, z których mo na skorzysta w danym wi-doku, funkcjonuj w bie cym zakresie lub dowolnym zakresie nadrz dnym.





39

Je li chcieliby my wy wietli okno komunikatu w reakcji na wskazanie elementu kursoremmyszy, a nie klikni cie, to wystarczy oby zmieni nazw dyrektywy na ng-mouseover, gdydzia anie obydwu jest identyczne.

Dyrektywa ng-initDyrektywa ng-init s u y do przetwarzania wyra e w bie cym zakresie i mo e by u ywanasamodzielnie lub w po czeniu z innymi dyrektywami. Ma ona wy szy priorytet ni inne dy-rektywy, aby wyra enie zosta o przetworzone odpowiednio wcze nie.

Oto prosty przyk ad zastosowania dyrektywy ng-init:

<div ng-init="test = 'Witaj, wiecie.'"></div>{{test}}

Otwarcie strony z tym kodem w przegl darce spowoduje wy wietlenie napisu „Witaj, wie-cie.”. Jak wida , przypisali my warto modelowi o nazwie test, a potem — za pomocsk adni z podwójnymi nawiasami klamrowymi — wy wietlili my j na ekranie.

Dyrektywy ng-show i ng-hideW pewnych sytuacjach przydaje si mo liwo sterowania wy wietlaniem jakiego elementuna drodze programowej. Dyrektywami ng-show i ng-hide mo na sterowa za po rednictwemwarto ci zwracanych przez funkcj albo model.

Spróbujmy rozbudowa utworzon wcze niej funkcj clickHandler, aby zademonstrowa za-stosowanie dyrektywy ng-click do prze czania widoczno ci elementu. Utworzymy w tym celunowy model i b dziemy sterowa widoczno ci elementu poprzez prze czanie mi dzy logicznprawd a fa szem.

Zacznijmy od utworzenia elementu, który b dziemy ukrywa i wy wietla . W kodzie podprzyciskiem umie nast puj cy fragment:

<div ng-hide="isHidden"> Kliknij przycisk powy ej, aby prze czy widoczno .</div>

Modelem jest tutaj warto atrybutu ng-hide. Poniewa funkcjonuje on w ramach naszego za-kresu, mo emy atwo zmodyfikowa go za po rednictwem kontrolera:

$scope.clickHandler = function(){ $scope.isHidden = !$scope.isHidden;};

Ten kod po prostu zamienia warto modelu na przeciwn , co w rezultacie prze cza widocz-no elementu <div>.





40

Je li wypróbujesz ten przyk ad w przegl darce, oka e si , e element nie jest domy lnieukryty. Istnieje kilka sposobów na zmian tego stanu rzeczy. Pierwszy polega na ustawieniuwarto ci $scope.isHidden na true w kontrolerze. Mo na te zmieni warto tej zmiennej natrue za pomoc dyrektywy ng-init. Ewentualnie mogliby my u y dyrektywy ng-show, któradzia a odwrotnie ni ng-hide i wy wietla element wtedy, gdy warto modelu wynosi true.

Pami taj o za adowaniu Angulara w nag ówku strony, bo w przeciwnym razie dyrektywy ng-hidei ng-show nie zadzia aj . To dlatego, e Angular korzysta z w asnych klas do ukrywania elementówi musz one zosta za adowane przed wy wietleniem strony.

Dyrektywa ng-ifAngular jest ponadto wyposa ony w dyrektyw ng-if, której dzia anie jest podobne do ng-showi ng-hide. Z tym e ng-if fizycznie usuwa element z drzewa DOM, podczas gdy ng-show i ng-hidetylko prze czaj jego widoczno .

Przyjrzyjmy si , jak mo na u y dyrektywy ng-if w odniesieniu do poprzedniego kodu:

<div ng-if="isHidden"> Kliknij przycisk powy ej, aby prze czy widoczno .</div>

Je li chcieliby my odwróci dzia anie instrukcji, wystarczy oby poprzedzi wyra enie wykrzyk-nikiem:

<div ng-if="!isHidden"> Kliknij przycisk powy ej, aby prze czy widoczno .</div>

Dyrektywa ng-repeatPodczas projektowania aplikacji internetowej zapewne bardzo szybko staniesz przed koniecz-no ci wygenerowania tablicy elementów. Na przyk ad w naszym mened erze kontaktów b -dzie to lista kontaktów, ale mo e to by cokolwiek innego. Angular umo liwia realizowanietego typu zada za pomoc dyrektywy ng-repeat.

Oto przyk adowe dane, z którymi mogliby my mie do czynienia. Jak wida , jest to tablicaobiektów z wieloma w a ciwo ciami. Aby wy wietli dane, trzeba b dzie odwo a si do ka -dej z tych w a ciwo ci. Na szcz cie dyrektywa ng-repeat poradzi sobie z tym doskonale.

Oto kontroler z tablic obiektów z danymi, przypisan do modelu contacts:





41

function AppCtrl($scope){

$scope.contacts = [ { name: 'Janko Walski', phone: '01234567890', email: '[email protected]' }, { name: 'Karen Nerka', phone: '09876543210', email: '[email protected]' } ];}

Mamy tutaj do czynienia z zaledwie dwiema osobami, ale nietrudno sobie wyobrazi , e ta-blica mog aby zawiera setki kontaktów pozyskanych za po rednictwem API, a z tak ilo ciinformacji trudno by oby pracowa bez dyrektywy ng-repeat.

Zacznij od umieszczenia w kontrolerze tablicy kontaktów i przypisania jej do w a ciwo ci$scope.contacts. Nast pnie otwórz plik index.html i utwórz znacznik <ul>. Poniewa b -dziemy wielokrotnie powtarza ca y punkt nienumerowanej listy, dyrektyw ng-repeat trzebadoda do elementu <li>:

<ul> <li ng-repeat="contact in contacts"></li></ul>

Je li wiesz, jak funkcjonuj p tle w PHP albo w Ruby, to poczujesz si jak w domu. Utworzymyzmienn , do której b dziemy mogli si odwo a w ramach powtarzanego elementu. Zmiennapo s owie kluczowym in odwo uje si do modelu powi zanego z obiektem $scope w naszymkontrolerze. W rezultacie mo emy odwo a si do dowolnej w a ciwo ci tego obiektu, zysku-j c nowy zakres przy ka dej iteracji albo nowej pozycji. W a ciwo ci te mo emy wy wietlina stronie za pomoc sk adni z podwójnym nawiasem klamrowym Angulara, zgodnie z infor-macjami podanymi w rozdziale 1., zatytu owanym „Witaj, {{imi }}”:

<ul> <li ng-repeat="contact in contacts"> {{contact.name}} </li></ul>

Powy szy kod, zgodnie z oczekiwaniami, spowoduje wy wietlenie imion i nazwisk z naszej listy.W analogiczny sposób mo emy atwo odwo a si do dowolnej w a ciwo ci obiektu contacts,korzystaj c ze standardowej sk adni z kropk .





42

Dyrektywa ng-classCz sto zachodzi potrzeba zmodyfikowania klasy albo dodania jej do elementu w sposób pro-gramowy. W tym celu mo emy u y dyrektywy ng-class. Umo liwia ona zdefiniowanie klasydo dodania lub usuni cia, w zale no ci od warto ci modelu.

Dyrektyw ng-class mo na si pos u y na dwa sposoby. W najprostszej postaci Angular poprostu u yje warto ci modelu jako klasy CSS elementu:

<div ng-class="exampleClass"></div>

Je li model, do którego si odwo ujemy, b dzie niew a ciwy lub zwróci fa sz logiczny, klasanie zostanie zastosowana. Takie rozwi zanie dobrze sprawdza si przy pojedynczych klasach,ale je li chcia by mie troch wi ksz kontrol nad ca ym procesem albo zastosowa wieleklas do jednego elementu, wypróbuj poni sz sk adni :

<div ng-class="{className: model, class2: model2}"></div>

To podej cie jest troch inne. Mamy zbiór nazw klas po czonych z modelami, których war-to chcemy sprawdzi . Je li model zwróci warto true, klasa zostanie dodana do elementu.

Przyjrzyjmy si temu w praktyce. U yjemy pól wyboru i atrybutu ng-model, poznanego przezCiebie w rozdziale 1. „Witaj, {{imi }}”, do przypisania kilku klas do akapitu:

<p ng-class="{'text-center': center, 'text-danger': error}"> Lorem ipsum dolor sit amet</p>

Wykorzysta em tutaj dwie klasy Bootstrapa: text-center oraz text-danger. Ich zastosowaniejest uzale nione od dwóch modeli, na które mo emy wp ywa przy u yciu pól wyboru:

<label><input type="checkbox" ng-model="center">tekst wy rodkowany</label><label><input type="checkbox" ng-model="error">tekst ostrzegawczy</label>

Ujmowanie nazw klas w pojedyncze cudzys owy jest potrzebne, tylko je li zawieraj one my lniki; w przeciw-nym razie bowiem Angular wygeneruje b d.

Zaznaczenie pól spowoduje zastosowanie odpowiednich klas wzgl dem podanego wcze niejelementu.

Dyrektywa ng-styleTa dyrektywa s u y do dynamicznej zmiany stylu elementu za po rednictwem Angulara, napodobnej zasadzie co ng-class. Aby to zademonstrowa , utworzymy trzecie pole wyboru, któ-re doda nowe style do poprzedniego elementu — akapitu.





43

Dyrektywa ng-style bazuje na standardowym obiekcie JavaScript, gdzie klucze obiektu od-powiadaj stylom przeznaczonym do zmiany (takim jak kolor albo t o). Mo na je zastosowaz poziomu modelu lub za po rednictwem warto ci zwróconej przez funkcj .

Zobaczmy, jak powi za t dyrektyw z funkcj sprawdzaj c stan modelu. Dzi ki temu b -dziemy mogli w cza i wy cza style przy u yciu pola wyboru.

Najpierw otwórz plik controller.js i utwórz now funkcj powi zan z zakresem. Swoj funk-cj nazwa em styleDemo:

$scope.styleDemo = function(){ if(!$scope.styler){ return; } return { background: 'red', fontWeight: 'bold' };};

Wewn trz funkcji musimy sprawdzi warto modelu, który w tym wypadku nosi nazw styler.Je li b dzie to warto false, nie musimy niczego zwraca — w przeciwnym razie zwracamyobiekt z w a ciwo ciami CSS. Zauwa , e w zwróconym obiekcie u yli my nazwy w a ciwo ciw formie fontWeight zamiast font-weight. Obie nazwy zadzia aj , a Angular automatycznie prze-

czy zapis w stylu CamelCase na odpowiedni nazw w a ciwo ci CSS. Trzeba jedynie pami ta ,e je li klucze obiektu JavaScript zawieraj my lniki, klucze te trzeba uj w cudzys owy.

Ten model zostanie powi zany z polem wyboru, tak jak zrobili my to w wypadku dyrektywyng-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”, e wywo a t funkcj ponownie przy ka dej zmianie zakresu.To oznacza, e gdy tylko warto modelu zmieni si z false na true, nasz styl zostanie w -czony, a w sytuacji odwrotnej — wy czony.

Dyrektywa ng-cloakNa koniec przyjrzymy si dyrektywie ng-cloak. Je li w kodzie strony HTML zostan zastoso-wane szablony Angulara, to podczas wy wietlania strony w przegl darce — tu przed wczyta-niem AngularJS i skompilowaniem kodu — na ekranie przez chwil b d widoczne podwójne





44

nawiasy klamrowe. Aby tego unikn , mo na tymczasowo ukry szablon a do chwili jegope nego przetworzenia.

W Angularze s u y do tego dyrektywa ng-cloak. Definiuje ona dla wczytywanego elementudodatkow regu w postaci display: none !important;.

Aby mie pewno , e podczas wczytywania strony nic nie b dzie miga , nale y pami ta o za adowa-niu Angulara w nag ówku (<head>) strony HTML.

Pytania sprawdzaj ce 1. Co dodali my na górze strony, aby umo liwi prze czanie mi dzy widokami? 2. Z ilu kolumn sk ada si system siatkowy Bootstrapa? 3. Co to s dyrektywy i jak si najcz ciej ich u ywa? 4. Jak dyrektyw zastosowa by do zap tlenia przetwarzania danych?

PodsumowanieW tym rozdziale omówili my wiele zagadnie , zanim wi c przejdziemy do kolejnego, pod-sumujmy zdobyte wiadomo ci.

Bootstrap pozwoli nam b yskawicznie opracowa responsywn nawigacj . Aby umo liwi korzy-stanie z nawigacji dostosowanej do urz dze mobilnych, musieli my do czy do projektuplik JavaScript znajduj cy si w archiwum z Bootstrapem.

Przyjrzeli my si te responsywnemu mechanizmowi siatkowemu o ogromnych mo liwo ciach,na którym opiera si Bootstrap, i utworzyli my prosty, dwukolumnowy uk ad tre ci. Przy oka-zji zapoznali my si z czterema prefiksami dla ró nych klas kolumn oraz z zagnie d aniemelementów siatki. Aby przystosowa uk ad strony do naszych potrzeb, wspomnieli my po-nadto o kilku dost pnych w Bootstrapie klasach pomocniczych, odpowiedzialnych za „p ywa-nie”, wy rodkowywanie i ukrywanie elementów.

W tym rozdziale zapoznali my si te z wbudowanymi dyrektywami Angulara: funkcjami,które Angular pozwala wywo ywa z poziomu widoku. Zanim si nimi zaj li my, musieli myutworzy tak zwany kontroler, czyli funkcj , do której mo emy przekazywa us ugi Angularaza po rednictwem procesu zwanego wstrzykiwaniem zale no ci.

Dyrektywy omówione w tym rozdziale b d odgrywa y bardzo wa n rol w programowaniumened era kontaktów w dalszej cz ci ksi ki. Dyrektywy takie jak ng-click i ng-mouseover





45

s po prostu nowymi sposobami obs ugi zdarze , które dotychczas z pewno ci obs ugiwa ew inny sposób, na przyk ad za po rednictwem jQuery albo czystego JavaScriptu. Z kolei dy-rektywy w rodzaju ng-repeat zapewne b d dla Ciebie nowo ci . „Przemycaj ” one do wido-ku pewne przydatne mechanizmy, na przyk ad p tle umo liwiaj ce cykliczne przetwarzaniedanych i wy wietlanie ich na stronie.

Przyjrzeli my si te dyrektywom, które ledz modele w danym zakresie i zale nie od ichwarto ci wykonuj ró ne dzia ania. Z kolei dyrektywy takie jak ng-show i ng-hide umo liwiajwy wietlenie elementu na podstawie warto ci modelu. Kolejnym przyk adem by a dyrektywang-class, która — na bazie warto ci modeli — umo liwi a nam dodanie do elementów pew-nych klas CSS.





46




Skorowidz

Aanaliza wydajno ci, 174AngularStrap, 103automatyzacja, 149

zada , 129, 141

BBootstrap, 145budowanie widoków, 67

CCRUD, 79

create, 94delete, 100read, 79update, 95

Ddebugowanie, 52detektor zdarzenia, listener, 37dokumentacja, 197domieszki, 154dostosowywanie Bootstrapa, 145dwukierunkowe wi zanie danych, 23dyrektywa, 36

max, 167maxlength, 167min, 167minlength, 167ng-class, 42, 93ng-click, 37

ng-cloak, 43ng-hide, 39ng-if, 40ng-init, 39ng-keyup, 93ng-mouseover, 37ng-pattern, 166ng-repeat, 40, 52, 53ngRoute, 60ng-show, 39ng-style, 42ng-view, 61, 62

dyrektywy niestandardowe, 86

Eelementy p ywaj ce, 35

Ffiltr

Filter, 51limitTo, 49paragraph, 91

filtry, 47data, 49liczby, 48modu y, 55tworzenie, 55, 56waluta, 48wielkie litery, 49

formularze, 156, 161poziome, 72

funkcja console.log, 117




Skorowidz

206

GGravatar, 74Grunt, 131

HHero Unit, 24HTML5Mode, 64

Iimportowanie, 152informacje z serwera, 120inicjalizowanie, 19inspekcja obiektu scope, 173instalowanie

AngularJS, 19AngularStrapa, 103Bataranga, 172Bootstrapa, 18gulpa, 137Grunta, 131ng-annotate, 177ngRoute, 59Node, 129NPM, 129wiersza polece , 131

integrowanie AngularStrapa, 110

JJavaScript, 53JSON, 52Jumbotron, 24

Kklasa form-horizontal, 75kolor t a, 69kolumny siatki, 33kompilowanie, 146, 149

plików Less, 145komponent navbar, 30komunikacja z serwerem, 115komunikat o b dzie, 62konfigurowanie

ngResource, 119pakietu watch, 136

pliku Gruntfile, 131pliku gulpfile, 138routera, 60zadania, 179

kontroler, 96

a cuchowanie tras, 61czenie elementów, 97

Mmened er kontaktów, 59, 67metoda value, 82metody czenia z serwerem, 124minifikacja, 19modu , 55

ngResource, 118motywy Bootstrapa, 158

Nnarz dzie, 171

Batarang, 171Grunt, 146, 178gulp, 149ng-annotate, 177

nawigacja, 30niestandardowe us ugi, 81NPM, Node Package Manager, 129

Oobiekt

$rootScope, 80scope, 173

obietnice, promises, 117obs uga

b dów, 124RestAngulara, 125

odsy acze do tras, 65okienka wyskakuj ce, 107okienko podpowiedzi, 105okno modalne, 105opcje Bataranga, 176ostrze enia, 108




Skorowidz

207

Ppakiet watch, 136parametry routingu, 85pasek nawigacji, 155plik

Gruntfile.js, 132gulpfile, 138package.json, 131

plikiLess, 145lokalizacyjne, 48

pluginless, 149LiveReload, 147, 150Watch, 147, 150

podpinanie ngResource, 119pomoc, 197preprocesor Less, 152priorytet urz dze mobilnych, 23projekt

AngularGM, 195AngularMotion, 193AngularStrap, 193AngularUI, 193BootSnipp, 190Bootstrap Expo, 190Bootstrap Icons, 192Font Awesome, 192gulp, 137Ionic, 194Mobile AngularUI, 194ng-annotate, 177RestAngular, 193Roots, 191Shoelace, 191Sublime Text, 191

projektowanie, 29przesy anie danych, 118przewodnik kodowania, 190przyciski, 157

Rregu y zagnie d one, 153RestAngular, 124RESTful, 115routing, 59

Sserwer, 115serwis

Egghead.io, 198GitHub, 197Stack Overflow, 198

sie CDN, 18singleton, 82sortowanie, 52stosowanie

filtrów, 47, 53ng-annotate, 185

strony aktywne, 92struktura folderów, 30, 141style Bootstrapa, 154symbol kratki, 64system siatkowy, 32szablon HTML, 61

Ttrasa, route, 59

domy lna, 64podstawowa, 60z parametrami, 63

tworzeniefiltra, 55, 56modu u, 55niestandardowego walidatora, 167niestandardowej us ugi, 81pliku Gruntfile.js, 132pliku package.json, 131tras podstawowych, 60zadania domy lnego, 137

typografia, 154

Uuruchamianie Grunta, 135us uga

$http, 116factory, 82Firebase, 125service, 83value, 82




Skorowidz

208

us ugiAngularStrapa, 109niestandardowe, 81w asne, 84

usuwanie kontaktów, 123

Wwalidacja, 161walidator niestandardowy, 167weryfikacja formularzy, 161widok, 67

Dodaj kontakt, 70Indeks, 67Wy wietl kontakt, 73

wiersz polece , 131wizualizacja zale no ci, 175w a ciwo scope, 96w czanie HTML5Mode, 64

wspó dzielenie danych, 80wstrzykiwanie zale no ci, 38wyra enie, 21wysy anie danych, 121wy rodkowywanie elementów, 35wy wietlanie elementów, 35

Zzako czenie linii, 91zale no ci, 175

gulpa, 137zastosowanie

AngularJS, 20AngularStrapa, 104Grunta, 131gulpa, 137us ug AngularStrapa, 109

zmienne, 152




http://program-partnerski.helion.pl

Tytuł oryginału: Learning Web Development with Bootstrap ...Instalowanie i zastosowanie AngularJS...

Documents

Transcript of Tytuł oryginału: Learning Web Development with Bootstrap ...Instalowanie i zastosowanie AngularJS...