Projektowanie nowoczesnych aplikacji sieciowych z uzyciem AngularJS i Bootstrapa

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)’.

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.

Księgarnia internetowa

•

Lubię to! » Nasza społeczność

Spis treĂci

O autorze

O recenzentach

Przedmowa

Rozdziaï 1. Witaj, {{imiÚ}}

Przygotowania

Instalowanie i zastosowanie AngularJS oraz Bootstrapa

Instalowanie Bootstrapa

Instalowanie AngularJS

Zastosowanie AngularJS

Bootstrap

Pytania sprawdzajÈce

Podsumowanie

Rozdziaï 2. Projektowanie za pomocÈ 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Èce

Podsumowanie

Poleć książkę

Kup książkę

Spis

treĞci

Rozdziaï 3. Filtry

Stosowanie filtra w widoku

Waluta i liczby

Maïe i wielkie litery

Filtr limitTo

Data

Filtr Filter

Sortowanie za pomocÈ orderBy

JSON

Stosowanie filtrów z poziomu JavaScriptu

Tworzenie wïasnego filtra

Moduïy

Tworzenie filtra

Pytania sprawdzajÈce

Podsumowanie

Rozdziaï 4. Routing

Instalowanie ngRoute

Tworzenie tras podstawowych

Trasy z parametrami

Trasa domyĂlna

Routing w HTML5 albo usuwanie #

WïÈczanie HTML5Mode

Odsyïacze do tras

Pytania sprawdzajÈce

Podsumowanie

Rozdziaï 5. Budowanie widoków

Konstruowanie widoku Indeks

Konstruowanie widoku Dodaj kontakt

Formularze poziome

Konstruowanie widoku WyĂwietl kontakt

Tytuï i Gravatar

Klasa form-horizontal

Pytania sprawdzajÈce

Podsumowanie

Rozdziaï 6. CRUD

R jak Read

Wspóïdzielenie danych miÚdzy widokami

Tworzenie niestandardowej dyrektywy

UwzglÚdnianie zakoñczeñ linii

Wyszukiwanie oraz definiowanie klasy dla aktywnej strony aplikacji

C jak Create

Poleć książkę

Kup książkę

Spis treĞci

U jak Update

WïaĂciwoĂÊ scope

Kontroler

Èczenie elementów

D jak Delete

100

Pytania sprawdzajÈce

101

Podsumowanie

101

Rozdziaï 7. AngularStrap

103

Instalowanie AngularStrapa

103

Zastosowanie AngularStrapa

104

Okno modalne

105

Okienko podpowiedzi

105

Okienka wyskakujÈce

107

Ostrzeĝenia

108

Zastosowanie usïug AngularStrapa

109

Integrowanie AngularStrapa

110

Pytania sprawdzajÈce

113

Podsumowanie

113

Rozdziaï 8. Komunikacja z serwerem

115

Èczenie za poĂrednictwem usïugi $http

116

Przesyïanie danych

118

Èczenie za pomocÈ moduïu ngResource

118

Podpinanie ngResource

119

Konfigurowanie ngResource

119

Pozyskiwanie informacji z serwera

120

Wysyïanie danych na serwer

121

Usuwanie kontaktów

123

Obsïuga bïÚdów

124

Inne metody ïÈczenia z serwerem

124

RestAngular

124

Firebase

125

Pytania sprawdzajÈce

127

Podsumowanie

127

Rozdziaï 9. Automatyzacja zadañ

129

Instalowanie Node i NPM

129

Zastosowanie Grunta

131

Instalowanie wiersza poleceñ

131

Instalowanie Grunta

131

Zastosowanie gulpa

137

Globalna instalacja gulpa

137

Instalowanie zaleĝnoĂci gulpa

137

Konfigurowanie pliku gulpfile

138

Poleć książkę

Kup książkę

Spis

treĞci

Restrukturyzacja projektu

141

Pytania sprawdzajÈce

143

Podsumowanie

143

Rozdziaï 10. Dostosowywanie Bootstrapa

145

Kompilowanie plików Less za pomocÈ Grunta albo gulpa

145

Pobieranie ěródeï

146

Kompilowanie z uĝyciem Grunta

146

Kompilowanie z uĝyciem gulpa

149

ABC preprocesora Less

152

Importowanie

152

Zmienne

152

Zagnieĝdĝone reguïy

153

Domieszki

154

Konfigurowanie stylów Bootstrapa

154

Typografia

154

Pasek nawigacji

155

Formularze

156

Przyciski

157

Motywy Bootstrapa

158

Gdzie szukaÊ dodatkowych motywów Bootstrapa?

158

Pytania sprawdzajÈce

158

Podsumowanie

159

Rozdziaï 11. Walidacja

161

Weryfikacja formularzy

161

ZgodnoĂÊ ze wzorcem

166

Zastosowanie dyrektyw minlength, maxlength, min i max

167

Tworzenie niestandardowego walidatora

167

Pytania sprawdzajÈce

169

Podsumowanie

170

Rozdziaï 12. NarzÚdzia opracowane przez spoïecznoĂÊ

171

Batarang

171

Instalowanie Bataranga

172

Inspekcja obiektu scope i wïaĂciwoĂci

173

Analiza wydajnoĂci

174

Wizualizacja zaleĝnoĂci

175

Opcje Bataranga

176

Projekt ng-annotate

177

Instalacja ng-annotate

177

WïÈczanie ng-annotate do Grunta

178

Uĝywanie ng-annotate w poïÈczeniu z gulpem

185

Pytania sprawdzajÈce

187

Podsumowanie

187

Poleć książkę

Kup książkę

Spis treĞci

Dodatek A. Ciekawi ludzie i projekty

189

Projekty zwiÈzane z Bootstrapem i ich autorzy

189

Zespóï odpowiedzialny za podstawowy projekt

189

Bootstrap Expo

190

BootSnipp

190

Przewodnik kodowania autorstwa @mdo

190

Roots

191

Shoelace

191

Snippety Bootstrapa 3 dla edytora Sublime Text

191

Font Awesome

192

Bootstrap Icons

192

Projekty zwiÈzane z AngularJS i ich autorzy

192

Zespóï odpowiedzialny za podstawowy projekt

192

RestAngular

193

AngularStrap i AngularMotion

193

AngularUI

193

Mobile AngularUI

194

Ionic

194

AngularGM

195

A teraz Twoja kolej…

195

Dodatek B. Gdzie szukaÊ pomocy?

197

Oficjalna dokumentacja

197

GitHub

197

Stack Overflow

198

Grupa AngularJS w Google

198

Egghead.io

198

Twitter

198

Dodatek C. Odpowiedzi na pytania sprawdzajÈce

201

Skorowidz

205

Poleć książkę

Kup książkę

Spis

treĞci

Poleć książkę

Kup książkę

Projektowanie

za 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ów
do zbudowania aplikacji typu „menedĝer kontaktów”, wyposaĝonej w wyszukiwarkÚ tekstowÈ
oraz funkcje umoĝliwiajÈce tworzenie, edytowanie i usuwanie rekordów. Zastanowimy siÚ, jak
utworzyÊ ïatwy w utrzymaniu kod, a zarazem przyjrzymy siÚ potencjaïowi obydwu platform.
A zatem do dzieïa!

Przygotowania

Przygotujmy 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 to
bazowy 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:

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

<!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>

Struktura

Dysponujemy podstawowÈ strukturÈ folderów oraz plikiem bazowym, moĝemy wiÚc zaczÈÊ
budowaÊ makietÚ aplikacji za pomocÈ Bootstrapa. Oprócz zbioru komponentów, takich jak
elementy 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órego
moĝliwoĂci takĝe wykorzystamy w naszej aplikacji.

Nawigacja

Do przeïÈczania miÚdzy widokami uĝyjemy komponentu

navbar

. BÚdzie on, rzecz jasna,

znajdowaï siÚ w górnej czÚĂci ekranu.

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

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 doĂÊ
skomplikowany. 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

navbar-collapse

. Te elementy odno-

szÈ siÚ tylko do wersji mobilnej i decydujÈ o tym, co jest widoczne, a co ukryte po uĝyciu
przeïÈcznika nawigacji.

Atrybut

data-target

dla przycisku odpowiada atrybutowi

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.

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

NawigacjÚ umieĂcimy w znaczniku

<body>

, dziÚki czemu jej elementy bÚdÈ rozciÈgaïy siÚ na

caïÈ szerokoĂÊ okna przeglÈdarki.

JeĂli zwÚzisz okno przeglÈdarki do szerokoĂci poniĝej 768 pikseli (szerokoĂÊ ekranu iPada
w uïoĝeniu pionowym), Bootstrap przeïÈczy nawigacjÚ na wariant dostosowany do urzÈdzeñ
mobilnych, z przeïÈcznikiem w formie przycisku. Ale jeĂli klikniesz ów przycisk, nic siÚ nie
stanie. To dlatego, ĝe na razie nie doïÈczyliĂmy jeszcze biblioteki ze skryptami JavaScript dla
Bootstrapa, 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ócz
tego 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 poprzednie
pliki, 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:

JeĂli odĂwieĝysz stronÚ w przeglÈdarce, przycisk powinien teraz uaktywniaÊ nawigacjÚ w wersji
mobilnej.

Kilka sïów o systemie siatkowym Bootstrapa

Dwunastokolumnowy 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óre
za 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 wiersze
siatki, bo w przeciwnym razie caïa struktura nie bÚdzie reagowaÊ tak, jak powinna. FunkcjÚ
tego kontenera bÚdzie peïniï zwykïy znacznik

<div>

, który umieĂcimy pod paskiem nawigacji:

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

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Úĝeniu

kontenera 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) ilustruje
róĝnice miÚdzy wszystkimi czterema klasami:

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

Zachowanie siatki

Pozioma
przez caïy czas

PoczÈtkowo zwiniÚta, pozioma po przekroczeniu okreĂlonej
szerokoĂci

Maksymalna
szerokoĂÊ kontenera

Brak (automatyczna) 750 px

970 px

1170 px

Prefiks klasy

.col-xs-

.col-sm-

.col-md-

.col-lg-

Maksymalna
szerokoĂÊ 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 obszaru
na 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 to

wiersz siatki, których to wierszy moĝemy utworzyÊ dowolnÈ liczbÚ; kaĝdy z nich rozciÈga siÚ
na wszystkie 12 kolumn.

</div>
</div>

Poniewaĝ chcemy, aby na urzÈdzeniach mobilnych kolumny automatycznie zmieniaïy ukïad
na 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:

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

<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 — tym
razem ze sïowem

offset

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 otrzymaÊ
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ïównÈ treĂÊ kontenerze, który przygotowali-
Ămy wczeĂniej. Aby byïo to widoczne, wstawiïem w te kolumny fragmenty tekstu roboczego.

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

JeĂli otworzysz tak przygotowany dokument w przeglÈdarce, zapewne zauwaĝysz, ĝe strona
zostaïa podzielona na trzy kolumny. DziÚki zagnieĝdĝeniu siatki zawsze moĝemy jednak
utworzyÊ nowy wiersz z jednÈ kolumnÈ, trzema kolumnami albo dowolnÈ ich liczbÈ, jaka bÚ-
dzie potrzebna.

Klasy pomocnicze

Bootstrap jest wyposaĝony w kilka klas pomocniczych, których moĝna uĝyÊ do dostosowania
projektu. SÈ to klasy uĝytkowe, majÈce jedno okreĂlone zastosowanie. Przyjrzyjmy siÚ kilku
przykïadom.

Elementy „pïywajÈce”

Zastosowanie elementów „pïywajÈcych” jest niekiedy konieczne do uzyskania oczekiwanej
struktury strony WWW. Bootstrap jest wyposaĝony w dwie klasy, umoĝliwiajÈce przesuwanie
elementów w lewÈ albo w prawÈ stronÚ:

Aby skutecznie siÚ posïugiwaÊ elementami „pïywajÈcymi”, trzeba je ujÈÊ w klasÚ

clearfix

. DziÚki

temu zostanÈ one wyodrÚbnione ze struktury dokumentu i nie bÚdÈ zaburzaïy jego ukïadu:

JeĂli klasy „pïywajÈce” zostanÈ uĝyte bezpoĂrednio w odniesieniu do elementu klasy

row

, to

nie trzeba dodatkowo troszczyÊ siÚ o rÚczne anulowanie „pïywania” za pomocÈ klasy

clearfix

poniewaĝ Bootstrap zrobi to automatycznie.

WyĂrodkowywanie elementów

Oprócz uaktywnienia „pïywania” czasami zachodzi potrzeba wyĂrodkowania elementów blo-
kowych. Bootstrap umoĝliwia to za poĂrednictwem klasy

center-block

Powoduje ona ustawienie wïaĂciwoĂci

margin-left

margin-right

auto

, co w konsekwencji

wyĂrodkowuje element.

WyĂwietlanie i ukrywanie

Za pomocÈ CSS da siÚ ukrywaÊ i wyĂwietlaÊ elementy, a Bootstrap jest wyposaĝony w dwie
klasy, które to umoĝliwiajÈ:

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

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ów
przy 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:

NastÚpujÈcy kod zaĂ spowoduje ukrycie elementu na urzÈdzeniach Ăredniej wielkoĂci, ale
element ten bÚdzie nadal widoczny na telefonach, tabletach i zwykïych komputerach. Aby
ukryÊ element na róĝnych urzÈdzeniach, trzeba zastosowaÊ odpowiednio wiele klas:

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

OczywiĂcie poszczególnych klas moĝna uĝywaÊ w parach. JeĂli na przykïad chcielibyĂmy, aby
na 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:

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

Zastosowanie dyrektyw

Miaï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 nawet
wïasnego niestandardowego elementu — w Angularze jest mnóstwo takich funkcji. DziÚki
nim 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.

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

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 wykrycia

przez Angulara atrybutu

ng-controller

. To oznacza, ĝe w ramach danej aplikacji moĝemy

dysponowaÊ 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 na
stronie juĝ po zaïadowaniu biblioteki AngularJS. Musimy teĝ pamiÚtaÊ o dodaniu dyrektywy

ng-controller

do otwierajÈcego znacznika

<html>

Dyrektywy ng-click i ng-mouseover

JednÈ z najprostszych rzeczy, jakÈ moĝna zrobiÊ w JavaScripcie, jest przechwycenie zdarzenia
klikniÚcia. Moĝna tego dokonaÊ za pomocÈ atrybutu

onclick

dla elementu, biblioteki jQuery

albo detektora zdarzenia (ang. listener). W Angularze uĝywa siÚ do tego dyrektyw.

Aby zademonstrowaÊ ich dziaïanie, utworzymy przycisk powodujÈcy wyĂwietlenie okienka
z komunikatem — prosta sprawa. Najpierw dodajmy przycisk do przygotowanego wczeĂniej
obszaru 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Ú do
tego 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!');
};
}

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

Jak juĝ wiesz, na stronie moĝe funkcjonowaÊ wiele zakresów, które sÈ po prostu obiektami, do
któ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 Angular
jest 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 jednostkowych
moĝ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, by
usï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 jak
poprzednio, naleĝy to zrobiÊ w postaci dodatkowego atrybutu. Tym razem przekaĝemy do
niego nazwÚ funkcji, którÈ zamierzamy wykonaÊ, czyli w tym wypadku

clickHandler

. Angular

potraktuje 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 widoku
odwoï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.

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

JeĂli chcielibyĂmy wyĂwietliÊ okno komunikatu w reakcji na wskazanie elementu kursorem
myszy, a nie klikniÚcie, to wystarczyïoby zmieniÊ nazwÚ dyrektywy na

ng-mouseover

, gdyĝ

dziaïanie obydwu jest identyczne.

Dyrektywa ng-init

Dyrektywa

ng-init

sïuĝy do przetwarzania wyraĝeñ w bieĝÈcym zakresie i moĝe byÊ uĝywana

samodzielnie 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 pomocÈ

skïadni z podwójnymi nawiasami klamrowymi — wyĂwietliliĂmy jÈ na ekranie.

Dyrektywy ng-show i ng-hide

W pewnych sytuacjach przydaje siÚ moĝliwoĂÊ sterowania wyĂwietlaniem jakiegoĂ elementu
na drodze programowej. Dyrektywami

ng-show

ng-hide

moĝna sterowaÊ za poĂrednictwem

wartoĂ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 celu

nowy model i bÚdziemy sterowaÊ widocznoĂciÈ elementu poprzez przeïÈczanie miÚdzy logicznÈ
prawdÈ a faïszem.

Zacznijmy od utworzenia elementu, który bÚdziemy ukrywaÊ i wyĂwietlaÊ. W kodzie pod
przyciskiem 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>

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

JeĂli wypróbujesz ten przykïad w przeglÈdarce, okaĝe siÚ, ĝe element nie jest domyĂlnie
ukryty. Istnieje kilka sposobów na zmianÚ tego stanu rzeczy. Pierwszy polega na ustawieniu
wartoĂci

$scope.isHidden

true

w kontrolerze. Moĝna teĝ zmieniÊ wartoĂÊ tej zmiennej na

true

za pomocÈ dyrektywy

ng-init

. Ewentualnie moglibyĂmy uĝyÊ dyrektywy

ng-show

, która

dziaï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-hide
i ng-show nie zadziaïajÈ. To dlatego, ĝe Angular korzysta z wïasnych klas do ukrywania elementów
i muszÈ one zostaÊ zaïadowane przed wyĂwietleniem strony.

Dyrektywa ng-if

Angular jest ponadto wyposaĝony w dyrektywÚ

ng-if

, której dziaïanie jest podobne do

ng-show

ng-hide

. Z tym ĝe

ng-if

fizycznie usuwa element z drzewa DOM, podczas gdy

ng-show

ng-hide

tylko 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-repeat

Podczas 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 realizowanie
tego typu zadañ za pomocÈ dyrektywy

ng-repeat

Oto przykïadowe dane, z którymi moglibyĂmy mieÊ do czynienia. Jak widaÊ, jest to tablica
obiektó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

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą 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Ê, ĝe ta-
blica mogïaby zawieraÊ setki kontaktów pozyskanych za poĂrednictwem API, a z takÈ iloĂciÈ
informacji 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

trzeba

dodaÊ do elementu

<li>

JeĂli wiesz, jak funkcjonujÈ pÚtle w PHP albo w Ruby, to poczujesz siÚ jak w domu. Utworzymy
zmiennÈ, do której bÚdziemy mogli siÚ odwoïaÊ w ramach powtarzanego elementu. Zmienna
po sïowie kluczowym

odwoïuje siÚ do modelu powiÈzanego z obiektem

$scope

w naszym

kontrolerze. 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ĂwietliÊ
na 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È.

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

Dyrektywa ng-class

CzÚ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 klasy

do 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 po

prostu uĝyje wartoĂci modelu jako klasy CSS elementu:

JeĂli model, do którego siÚ odwoïujemy, bÚdzie niewïaĂciwy lub zwróci faïsz logiczny, klasa
nie 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Ê wiele
klas do jednego elementu, wypróbuj poniĝszÈ skïadniÚ:

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 przez

Ciebie 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 zastosowanie

jest 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Ăniej
elementu.

Dyrektywa ng-style

Ta dyrektywa sïuĝy do dynamicznej zmiany stylu elementu za poĂrednictwem Angulara, na
podobnej zasadzie co

ng-class

. Aby to zademonstrowaÊ, utworzymy trzecie pole wyboru, któ-

re doda nowe style do poprzedniego elementu — akapitu.

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

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 zastosowaÊ
z 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 zwracamy

obiekt z wïaĂciwoĂciami CSS. Zauwaĝ, ĝe w zwróconym obiekcie uĝyliĂmy nazwy wïaĂciwoĂci
w 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 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”, ĝe wywoïa tÚ funkcjÚ ponownie przy kaĝdej zmianie zakresu.
To oznacza, ĝe gdy tylko wartoĂÊ modelu zmieni siÚ z

false

true

, nasz styl zostanie wïÈ-

czony, a w sytuacji odwrotnej — wyïÈczony.

Dyrektywa ng-cloak

Na 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

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

nawiasy klamrowe. Aby tego uniknÈÊ, moĝna tymczasowo ukryÊ szablon aĝ do chwili jego
peïnego przetworzenia.

W Angularze sïuĝy do tego dyrektywa

ng-cloak

. Definiuje ona dla wczytywanego elementu

dodatkowÈ 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?

Podsumowanie

W 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 projektu
plik 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ĝaniem
elementó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Ămy
utworzyÊ tak zwany kontroler, czyli funkcjÚ, do której moĝemy przekazywaÊ usïugi Angulara
za poĂrednictwem procesu zwanego wstrzykiwaniem zaleĝnoĂci.

Dyrektywy omówione w tym rozdziale bÚdÈ odgrywaïy bardzo waĝnÈ rolÚ w programowaniu
menedĝera kontaktów w dalszej czÚĂci ksiÈĝki. Dyrektywy takie jak

ng-click

ng-mouseover

Poleć książkę

Kup książkę

Rozdziaá 2. • Projektowanie za pomocą AngularJS i Bootstrapa

sÈ po prostu nowymi sposobami obsïugi zdarzeñ, które dotychczas z pewnoĂciÈ obsïugiwaïeĂ
w 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 przetwarzanie
danych i wyĂwietlanie ich na stronie.

PrzyjrzeliĂmy siÚ teĝ dyrektywom, które ĂledzÈ modele w danym zakresie i zaleĝnie od ich
wartoĂci wykonujÈ róĝne dziaïania. Z kolei dyrektywy takie jak

ng-show

ng-hide

umoĝliwiajÈ

wyĂwietlenie elementu na podstawie wartoĂci modelu. Kolejnym przykïadem byïa dyrektywa

ng-class

, która — na bazie wartoĂci modeli — umoĝliwiïa nam dodanie do elementów pew-

nych klas CSS.

Poleć książkę

Kup książkę

Projektowanie nowoczesnych aplikacji sieciowych z uĪyciem AngularJS i Bootstrapa

Poleć książkę

Kup książkę

Skorowidz

analiza wydajnoĂci, 174
AngularStrap, 103
automatyzacja, 149

zadañ, 129, 141

Bootstrap, 145
budowanie widoków, 67

CRUD, 79

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

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

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

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ïywajÈce, 35

filtr

Filter, 51
limitTo, 49
paragraph, 91

filtry, 47

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

formularze, 156, 161

poziome, 72

funkcja console.log, 117

Poleć książkę

Kup książkę

Skorowidz

206

Gravatar, 74
Grunt, 131

Hero Unit, 24
HTML5Mode, 64

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ñ, 131

integrowanie AngularStrapa, 110

JavaScript, 53
JSON, 52
Jumbotron, 24

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

plików Less, 145

komponent navbar, 30
komunikacja z serwerem, 115
komunikat o bïÚdzie, 62
konfigurowanie

ngResource, 119
pakietu watch, 136

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

kontroler, 96

ïañcuchowanie tras, 61
ïÈczenie elementów, 97

menedĝer kontaktów, 59, 67
metoda value, 82
metody ïÈczenia z serwerem, 124
minifikacja, 19
moduï, 55

ngResource, 118

motywy Bootstrapa, 158

narzÚdzie, 171

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

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

obiekt

$rootScope, 80
scope, 173

obietnice, promises, 117
obsïuga

bïÚdów, 124
RestAngulara, 125

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

Poleć książkę

Kup książkę

Skorowidz

207

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

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

pliki

Less, 145
lokalizacyjne, 48

plugin

less, 149
LiveReload, 147, 150
Watch, 147, 150

podpinanie ngResource, 119
pomoc, 197
preprocesor Less, 152
priorytet urzÈdzeñ 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ïanie danych, 118
przewodnik kodowania, 190
przyciski, 157

reguïy zagnieĝdĝone, 153
RestAngular, 124
RESTful, 115
routing, 59

serwer, 115
serwis

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

sieÊ 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

trasa, route, 59

domyĂlna, 64
podstawowa, 60
z parametrami, 63

tworzenie

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

typografia, 154

uruchamianie Grunta, 135
usïuga

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

Poleć książkę

Kup książkę

Skorowidz

208

usïugi

AngularStrapa, 109
niestandardowe, 81
wïasne, 84

usuwanie kontaktów, 123

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

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

wiersz poleceñ, 131
wizualizacja zaleĝnoĂci, 175
wïaĂciwoĂÊ scope, 96
wïÈczanie HTML5Mode, 64

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

zakoñczenie linii, 91
zaleĝnoĂci, 175

gulpa, 137

zastosowanie

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

zmienne, 152

Poleć książkę

Kup książkę