Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00218 016686 17206943 na godz. na dobę w sumie
Node.js, MongoDB, AngularJS. Kompendium wiedzy - książka
Node.js, MongoDB, AngularJS. Kompendium wiedzy - książka
Autor: Liczba stron: 672
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0111-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook (-25%), audiobook).

Node.js to wiodące, serwerowe środowisko programistyczne. MongoDB to najpopularniejsza baza danych NoSQL, a AngularJS to szybko zyskujące wiodącą rolę środowisko służące do projektowania interfejsów opartych na technologii MVC. Czego chcieć więcej?

W sieci króluje połączenie serwera Apache z bazą danych MySQL i językiem PHP. Do niedawna wydawało się, że pozycja tej trójcy na fotelu lidera jest niezagrożona. Jednak na horyzoncie pojawili się nowi gracze: Node.js, MongoDB oraz AngularJS! Node.js to platforma, która pozwoli Ci stworzyć niezwykle wydajną aplikację internetową przy użyciu języka JavaScript. AngularJS specjalizuje się w interfejsie użytkownika opartym na MVC. Natomiast MongoDB to jedna z najpopularniejszych baz danych NoSQL. Co wynika z połączenia tych trzech narzędzi? Przekonasz się, gdy sięgniesz po tę niezwykłą książkę!

W trakcie lektury poznasz składnię i niuanse języka JavaScript, a następnie zgłębisz tajemnice środowiska Node.js. Na kolejnych stronach znajdziesz informacje na temat korzystania ze zdarzeń, procesów nasłuchiwania, wywołań zwrotnych oraz obsługi operacji wejścia-wyjścia. Ponadto przekonasz się, jak w Node.js zaimplementować usługi HTTP oraz skalować tworzoną aplikację. W dalszej części przejdziesz do poznawania tajników bazy MongoDB. Skonfigurujesz połączenie z bazą oraz poznasz dokumenty i ich kolekcje w MongoDB. Na sam koniec zobaczysz, jak przygotować klienta Twoich usług za pomocą AngularJS. Ta książka jest pasjonująca i prezentuje wszystkie warstwy nowoczesnej aplikacji internetowej — to lektura obowiązkowa każdego programisty!

Stwórz skalowalną aplikację za pomocą najnowocześniejszych narzędzi!


  • Implementowanie dynamicznego serwera WWW o dużej skalowalności za pomocą komponentów Node.js i Express
  • Implementowanie magazynu danych MongoDB dla aplikacji internetowych
  • Uzyskiwanie dostępu do bazy danych MongoDB z poziomu kodu JavaScript aplikacji Node.js oraz prowadzenie interakcji z bazą
  • Definiowanie niestandardowych dyrektyw AngularJS, które rozszerzają język HTML
  • Budowanie w języku JavaScript usług internetowych po stronie serwera
  • Implementowanie usług po stronie klienta, które mogą prowadzić interakcję z serwerem WWW środowiska Node.js
  • Tworzenie dynamicznych widoków przeglądarki, które zapewniają zaawansowane możliwości interakcji z użytkownikiem
  • Dodawanie do aplikacji i stron internetowych komponentów uwierzytelnianych kont użytkowników i zagnieżdżonych komentarzy 


Brad Dayley -— programista z wieloletnim doświadczeniem. Twórca licznych stron i aplikacji internetowych o różnym stopniu skomplikowania. Autor popularnych książek poświęconych bazom NoSQL, językowi JavaScript oraz innym narzędziom.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Node.js, MongoDB, and AngularJS Web Development Tłumaczenie: Piotr Pilch ISBN: 978-83-283-0111-5 Authorized translation from the English language edition, entitled: NODE.JS, MONGODB, AND ANGULARJS WEB DEVELOPMENT; ISBN 0321995783; by Brad Dayley; published by Pearson Education, Inc, publishing as Addison Wesley. Copyright © 2014 Pearson Education, Inc. All rights reserved. No part of this book may by 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 Pearson Education, Inc. Polish language edition published by HELION S.A. Copyright © 2015. 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 bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi 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/nodekw.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/nodekw 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ści O autorze ..........................................................................13 Cz(cid:246)(cid:264)(cid:232) I Wprowadzenie ....................................................15 Wprowadzenie ...................................................................17 Kto powinien przeczyta(cid:232) t(cid:246) ksi(cid:241)(cid:276)k(cid:246)? ...............................................17 Dlaczego nale(cid:276)y przeczyta(cid:232) t(cid:246) ksi(cid:241)(cid:276)k(cid:246)? ...........................................17 Czego si(cid:246) dowiesz z tej ksi(cid:241)(cid:276)ki? .....................................................18 Czym jest (cid:264)rodowisko Node.js? ......................................................19 Czym jest komponent MongoDB? ...................................................20 Czym jest komponent AngularJS? ...................................................20 Jaka jest struktura tej ksi(cid:241)(cid:276)ki? .......................................................21 Uzyskiwanie przyk(cid:228)adowych kodów ..................................................22 Uwagi ko(cid:254)cowe .............................................................................22 Rozdzia(cid:228) 1 Podstawowe informacje o stosie Node.js-AngularJS .............23 Podstawowe (cid:264)rodowisko projektowania aplikacji internetowych .........23 Komponenty stosu Node.js-AngularJS .............................................27 Podsumowanie .............................................................................31 W nast(cid:246)pnym rozdziale ..................................................................32 Rozdzia(cid:228) 2 Wprowadzenie do j(cid:246)zyka JavaScript ....................................33 Definiowanie zmiennych .................................................................33 Typy danych j(cid:246)zyka JavaScript ........................................................34 U(cid:276)ycie operatorów .........................................................................35 Implementowanie p(cid:246)tli ..................................................................39 Tworzenie funkcji ...........................................................................42 Zasi(cid:246)g zmiennych ..........................................................................44 U(cid:276)ycie obiektów j(cid:246)zyka JavaScript ...................................................45 Przetwarzanie (cid:228)a(cid:254)cuchów ...............................................................48 Korzystanie z tablic .......................................................................51 Dodawanie obs(cid:228)ugi b(cid:228)(cid:246)dów .............................................................53 Podsumowanie .............................................................................56 W nast(cid:246)pnym rozdziale ..................................................................56 Kup książkęPoleć książkę 6 Node.js, MongoDB, AngularJS. Kompendium wiedzy Cz(cid:246)(cid:264)(cid:232) II (cid:263)rodowisko Node.js ............................................57 Rozdzia(cid:228) 3 Wprowadzenie do (cid:264)rodowiska Node.js .................................59 (cid:263)rodowisko Node.js ......................................................................59 Instalowanie (cid:264)rodowiska Node.js ....................................................60 Praca z pakietami Node.js .............................................................62 Tworzenie aplikacji Node.js ............................................................68 Zapisywanie danych do konsoli ......................................................72 Podsumowanie .............................................................................74 W nast(cid:246)pnym rozdziale ..................................................................74 Rozdzia(cid:228) 4 U(cid:276)ycie zdarze(cid:254), procesów nas(cid:228)uchiwania, liczników i wywo(cid:228)a(cid:254) zwrotnych w (cid:264)rodowisku Node.js ........................75 Model zdarze(cid:254) (cid:264)rodowiska Node.js .................................................75 Dodawanie zada(cid:254) do kolejki zdarze(cid:254) ...............................................79 Implementowanie wywo(cid:228)a(cid:254) zwrotnych ..............................................88 Podsumowanie .............................................................................92 W nast(cid:246)pnym rozdziale ..................................................................93 Rozdzia(cid:228) 5 Obs(cid:228)uga danych wej(cid:264)cia-wyj(cid:264)cia w (cid:264)rodowisku Node.js .......95 Praca z danymi JSON .....................................................................95 U(cid:276)ycie modu(cid:228)u Buffer do buforowania danych ..................................97 U(cid:276)ycie modu(cid:228)u Stream do strumieniowania danych ........................104 Podsumowanie ...........................................................................118 W nast(cid:246)pnym rozdziale ................................................................118 Rozdzia(cid:228) 6 Uzyskiwanie dost(cid:246)pu do systemu plików ze (cid:264)rodowiska Node.js ......................................................119 Porównanie synchronicznych i asynchronicznych wywo(cid:228)a(cid:254) systemu plików ................................119 Otwieranie i zamykanie plików ......................................................120 Zapisywanie plików .....................................................................122 Odczytywanie plików ....................................................................127 Inne zadania zwi(cid:241)zane z systemem plików ....................................133 Podsumowanie ...........................................................................140 W nast(cid:246)pnym rozdziale ................................................................140 Implementowanie us(cid:228)ug HTTP w (cid:264)rodowisku Node.js .........141 Przetwarzanie adresów URL .........................................................141 Przetwarzanie (cid:228)a(cid:254)cuchów zapytania i parametrów formularza ..........144 Obiekty (cid:276)(cid:241)dania, odpowiedzi i serwera ..........................................145 Implementowanie klientów i serwerów HTTP w (cid:264)rodowisku Node.js .....153 Implementowanie serwerów i klientów HTTPS ................................162 Podsumowanie ...........................................................................165 W nast(cid:246)pnym rozdziale ................................................................166 Rozdzia(cid:228) 7 Kup książkęPoleć książkę Rozdzia(cid:228) 8 Spis tre(cid:264)ci 7 Implementowanie us(cid:228)ug gniazd w (cid:264)rodowisku Node.js .......167 Gniazda sieciowe ........................................................................167 Obiekty Server i Socket protoko(cid:228)u TCP ..........................................168 Implementowanie klientów i serwerów gniazd TCP .........................176 Implementowanie serwerów i klientów TLS ....................................181 Podsumowanie ...........................................................................186 W nast(cid:246)pnym rozdziale ................................................................186 Rozdzia(cid:228) 9 Skalowanie aplikacji przy u(cid:276)yciu wielu procesorów w (cid:264)rodowisku Node.js ......................................................187 Modu(cid:228) process ............................................................................187 Implementowanie procesów podrz(cid:246)dnych ......................................192 Implementowanie klastrów procesów ............................................203 Podsumowanie ...........................................................................208 W nast(cid:246)pnym rozdziale ................................................................209 Rozdzia(cid:228) 10 U(cid:276)ycie dodatkowych modu(cid:228)ów (cid:264)rodowiska Node.js ............211 U(cid:276)ycie modu(cid:228)u os ........................................................................211 U(cid:276)ycie modu(cid:228)u util .......................................................................213 Podsumowanie ...........................................................................219 W nast(cid:246)pnym rozdziale ................................................................220 Cz(cid:246)(cid:264)(cid:232) III Komponent MongoDB ......................................221 Rozdzia(cid:228) 11 Baza danych NoSQL i komponent MongoDB ......................223 Dlaczego baza danych NoSQL? ....................................................223 Komponent MongoDB ..................................................................224 Typy danych bazy danych MongoDB ..............................................226 Planowanie modelu danych ..........................................................227 Podsumowanie ...........................................................................233 W nast(cid:246)pnym rozdziale ................................................................234 Rozdzia(cid:228) 12 Wprowadzenie do korzystania z komponentu MongoDB .....235 Tworzenie (cid:264)rodowiska komponentu MongoDB ...............................235 Administrowanie kontami u(cid:276)ytkowników ........................................241 Konfigurowanie kontroli dost(cid:246)pu ..................................................245 Administrowanie bazami danych ...................................................247 Zarz(cid:241)dzanie kolekcjami ................................................................250 Podsumowanie ...........................................................................256 W nast(cid:246)pnym rozdziale ................................................................256 Rozdzia(cid:228) 13 Wprowadzenie do wspó(cid:228)pracy komponentu MongoDB i (cid:264)rodowiska Node.js ........................................................257 Dodawanie sterownika komponentu MongoDB do (cid:264)rodowiska Node.js ..............................................................257 Nawi(cid:241)zywanie po(cid:228)(cid:241)czenia z komponentem MongoDB ze (cid:264)rodowiska Node.js ..............................................................258 Kup książkęPoleć książkę 8 Node.js, MongoDB, AngularJS. Kompendium wiedzy Obiekty u(cid:276)ywane w sterowniku (cid:264)rodowiska Node.js dla komponentu MongoDB .........................................................265 Uzyskiwanie dost(cid:246)pu do baz danych i modyfikowanie ich ................273 Uzyskiwanie dost(cid:246)pu do kolekcji i modyfikowanie ich .....................276 Podsumowanie ...........................................................................280 W nast(cid:246)pnym rozdziale ................................................................280 Rozdzia(cid:228) 14 Modyfikowanie dokumentów bazy danych MongoDB w (cid:264)rodowisku Node.js ......................................................281 Opcje wprowadzania zmian w bazach danych .................................281 Operatory aktualizowania baz danych ............................................283 Dodawanie dokumentów do kolekcji .............................................283 Uzyskiwanie dokumentów z kolekcji ..............................................286 Aktualizowanie dokumentów w kolekcji .........................................287 Niepodzielne modyfikowanie dokumentów w kolekcji ......................290 Zapisywanie dokumentów w kolekcji .............................................291 U(cid:276)ycie opcji upsert do wstawiania dokumentów do kolekcji .............293 Usuwanie dokumentów z kolekcji .................................................294 Usuwanie pojedynczego dokumentu z kolekcji ...............................296 Podsumowanie ...........................................................................297 W nast(cid:246)pnym rozdziale ................................................................297 Rozdzia(cid:228) 15 Uzyskiwanie dost(cid:246)pu do dokumentów bazy danych MongoDB w (cid:264)rodowisku Node.js .......................................299 Podstawowe informacje na temat zestawu danych .........................299 Obiekty query ..............................................................................300 Obiekty options zapyta(cid:254) ...............................................................302 Znajdowanie konkretnych zestawów dokumentów ..........................304 Okre(cid:264)lanie liczby dokumentów ......................................................306 Ograniczanie zestawów wynikowych ..............................................308 Sortowanie zestawów wynikowych ................................................313 Znajdowanie ró(cid:276)nych warto(cid:264)ci pola ...............................................315 Grupowanie wyników ...................................................................316 Korzystanie ze (cid:264)rodowiska MapReduce podczas agregowania wyników ...................................................319 Podsumowanie ...........................................................................324 W nast(cid:246)pnym rozdziale ................................................................324 Rozdzia(cid:228) 16 U(cid:276)ycie biblioteki Mongoose dla schematu ze struktur(cid:241) i do sprawdzania poprawno(cid:264)ci ..........................................325 Biblioteka Mongoose ...................................................................326 Nawi(cid:241)zywanie po(cid:228)(cid:241)czenia z baz(cid:241) danych MongoDB za pomoc(cid:241) biblioteki Mongoose .................................................327 Definiowanie schematu ...............................................................328 Kompilowanie modelu .................................................................332 Kup książkęPoleć książkę Spis tre(cid:264)ci 9 Obiekt Query ...............................................................................333 Obiekt Document ........................................................................339 Znajdowanie dokumentów za pomoc(cid:241) biblioteki Mongoose .............340 Dodawanie dokumentów za pomoc(cid:241) biblioteki Mongoose ...............343 Aktualizowanie dokumentów za pomoc(cid:241) biblioteki Mongoose .........344 Usuwanie dokumentów za pomoc(cid:241) biblioteki Mongoose .................349 Agregowanie dokumentów za pomoc(cid:241) biblioteki Mongoose .............351 U(cid:276)ycie (cid:264)rodowiska sprawdzania poprawno(cid:264)ci .................................354 Implementowanie funkcji po(cid:264)rednich ............................................356 Podsumowanie ...........................................................................359 W nast(cid:246)pnym rozdziale ................................................................359 Rozdzia(cid:228) 17 Zaawansowane zagadnienia zwi(cid:241)zane z baz(cid:241) danych MongoDB ....................................361 Dodawanie indeksów ...................................................................361 U(cid:276)ycie ograniczonych kolekcji .......................................................364 Stosowanie replikacji ...................................................................365 Implementowanie tworzenia segmentów danych ...............................369 Implementowanie magazynu GridFS ..............................................377 Naprawianie bazy danych MongoDB ..............................................383 Tworzenie kopii zapasowej bazy danych MongoDB .........................384 Podsumowanie ...........................................................................385 W nast(cid:246)pnym rozdziale ................................................................385 Cz(cid:246)(cid:264)(cid:232) IV U(cid:276)ycie modu(cid:228)u Express do usprawnienia pracy .....387 Rozdzia(cid:228) 18 Implementacja komponentu Express w (cid:264)rodowisku Node.js ......................................................389 Wprowadzenie do komponentu Express ........................................389 Konfigurowanie tras ....................................................................392 U(cid:276)ycie obiektów Request .............................................................397 U(cid:276)ycie obiektów Response ...........................................................398 Implementowanie mechanizmu szablonów ....................................406 Podsumowanie ...........................................................................411 W nast(cid:246)pnym rozdziale ................................................................411 Rozdzia(cid:228) 19 Implementacja funkcji po(cid:264)rednich komponentu Express ....413 Funkcje po(cid:264)rednie .......................................................................413 U(cid:276)ycie funkcji po(cid:264)redniej query .....................................................416 Udost(cid:246)pnianie plików statycznych .................................................416 Obs(cid:228)uga danych tre(cid:264)ci (cid:276)(cid:241)dania POST ............................................418 Wysy(cid:228)anie i odbieranie informacji cookie .......................................419 Implementowanie sesji ................................................................421 Stosowanie podstawowego uwierzytelniania HTTP .............................423 Kup książkęPoleć książkę 10 Node.js, MongoDB, AngularJS. Kompendium wiedzy Implementowanie uwierzytelniania sesji ........................................424 Tworzenie niestandardowych funkcji po(cid:264)rednich ..............................427 Podsumowanie ...........................................................................428 W nast(cid:246)pnym rozdziale ................................................................428 Cz(cid:246)(cid:264)(cid:232) V Komponent AngularJS ......................................429 Rozdzia(cid:228) 20 Wprowadzenie do komponentu AngularJS .........................431 Dlaczego komponent AngularJS? ..................................................431 Komponent AngularJS .................................................................433 Przegl(cid:241)d cyklu (cid:276)ycia aplikacji AngularJS .........................................436 Integrowanie komponentu AngularJS z istniej(cid:241)cym kodem JavaScript i jQuery ......................................437 Dodawanie komponentu AngularJS do (cid:264)rodowiska Node.js .............438 Inicjowanie komponentu AngularJS w dokumencie HTML ................438 U(cid:276)ycie globalnych interfejsów API .................................................439 Tworzenie prostej aplikacji AngularJS ............................................441 Podsumowanie ...........................................................................445 W nast(cid:246)pnym rozdziale ................................................................445 Rozdzia(cid:228) 21 Modu(cid:228)y komponentu AngularJS i wstrzykiwanie zale(cid:276)no(cid:264)ci .....447 Przegl(cid:241)d modu(cid:228)ów i wstrzykiwania zale(cid:276)no(cid:264)ci .................................447 Definiowanie modu(cid:228)ów AngularJS .................................................448 Implementowanie wstrzykiwania zale(cid:276)no(cid:264)ci ...................................452 Podsumowanie ...........................................................................454 W nast(cid:246)pnym rozdziale ................................................................454 Rozdzia(cid:228) 22 Implementowanie zasi(cid:246)gu jako modelu danych .................455 Zasi(cid:246)gi .......................................................................................455 Implementowanie hierarchii zasi(cid:246)gów ...........................................461 Emitowanie i rozg(cid:228)aszanie zdarze(cid:254) ................................................463 Podsumowanie ...........................................................................467 W nast(cid:246)pnym rozdziale ................................................................468 Rozdzia(cid:228) 23 Tworzenie widoków za pomoc(cid:241) szablonów (cid:264)rodowiska AngularJS ........................................................................469 Szablony ....................................................................................469 U(cid:276)ycie wyra(cid:276)e(cid:254) ............................................................................470 U(cid:276)ycie filtrów ..............................................................................473 Tworzenie filtrów niestandardowych ..............................................479 Podsumowanie ...........................................................................482 W nast(cid:246)pnym rozdziale ................................................................483 Kup książkęPoleć książkę Spis tre(cid:264)ci 11 Rozdzia(cid:228) 24 Implementowanie dyrektyw w widokach aplikacji AngularJS ........................................485 Dyrektywy ...................................................................................485 U(cid:276)ycie wbudowanych dyrektyw ......................................................486 Tworzenie w(cid:228)asnych dyrektyw do rozszerzania kodu HTML ...............500 Podsumowanie ...........................................................................509 W nast(cid:246)pnym rozdziale ................................................................509 Rozdzia(cid:228) 25 Implementowanie us(cid:228)ug (cid:264)rodowiska AngularJS w aplikacjach internetowych ............................................511 Us(cid:228)ugi (cid:264)rodowiska AngularJS ........................................................511 U(cid:276)ycie wbudowanych us(cid:228)ug ..........................................................512 Tworzenie us(cid:228)ug niestandardowych ...............................................527 Podsumowanie ...........................................................................529 W nast(cid:246)pnym rozdziale ................................................................529 Cz(cid:246)(cid:264)(cid:232) VI Tworzenie praktycznych komponentów aplikacji internetowych ....................................531 Rozdzia(cid:228) 26 Dodawanie kont u(cid:276)ytkowników do witryny internetowej .....533 U(cid:276)ywane biblioteki .......................................................................533 Struktura katalogowa projektu ......................................................534 Definiowanie modelu u(cid:276)ytkowników ..............................................535 Tworzenie serwera ......................................................................535 Implementowanie tras .................................................................537 Implementowanie tras kontrolera u(cid:276)ytkowników .............................538 Implementowanie widoków u(cid:276)ytkownika i uwierzytelniania ..............543 Implementowanie modu(cid:228)u i kontrolera (cid:264)rodowiska AngularJS ..........549 U(cid:276)ycie kont spo(cid:228)eczno(cid:264)ciowych jako (cid:274)róde(cid:228) uwierzytelniania ............549 Podsumowanie ...........................................................................555 W nast(cid:246)pnym rozdziale ................................................................556 Rozdzia(cid:228) 27 Dodawanie w(cid:241)tków komentarzy do stron ..........................557 U(cid:276)ywane biblioteki .......................................................................557 Struktura katalogowa projektu ......................................................558 Definiowanie modeli komentarzy, odpowiedzi, zdj(cid:246)(cid:232) i stron .............559 Tworzenie serwera komentarzy .....................................................561 Implementowanie tras do obs(cid:228)ugi wy(cid:264)wietlania i dodawania komentarzy ............................................................563 Implementowanie tras kontrolerów opartych na modelu .................563 Implementowanie widoków komentarzy i zdj(cid:246)(cid:232) ...............................569 Implementowanie modu(cid:228)u i kontrolerów (cid:264)rodowiska AngularJS do obs(cid:228)ugi widoków komentarzy .................................................576 Inicjowanie aplikacji ....................................................................581 Podsumowanie ...........................................................................583 W nast(cid:246)pnym rozdziale ................................................................583 Kup książkęPoleć książkę 12 Node.js, MongoDB, AngularJS. Kompendium wiedzy Rozdzia(cid:228) 28 Tworzenie w(cid:228)asnego koszyka zakupów ..............................585 Opis projektu ..............................................................................585 U(cid:276)ywane biblioteki .......................................................................586 Struktura katalogowa projektu ......................................................586 Definiowanie modeli klientów, produktów i zamówie(cid:254) .....................588 Tworzenie serwera koszyka zakupów .............................................592 Implementowanie tras do obs(cid:228)ugi (cid:276)(cid:241)da(cid:254) dotycz(cid:241)cych produktów, koszyka i zamówie(cid:254) ...............................593 Implementowanie tras kontrolera opartego na modelu ...................594 Implementowanie widoków kasy i koszyka zakupów .......................598 Implementowanie modu(cid:228)u i kontrolera (cid:264)rodowiska AngularJS do obs(cid:228)ugi widoków koszyka zakupów .........................................611 Inicjowanie aplikacji ....................................................................619 Podsumowanie ...........................................................................621 W nast(cid:246)pnym rozdziale ................................................................621 Rozdzia(cid:228) 29 Tworzenie interaktywnych komponentów aplikacji Web 2.0 .............................................................623 Opis projektu ..............................................................................623 U(cid:276)ywane biblioteki .......................................................................624 Struktura katalogowa projektu ......................................................624 Definiowanie modelu projektu ......................................................626 Tworzenie serwera aplikacji ..........................................................626 Implementowanie tras do obs(cid:228)ugi widoków ....................................627 Implementowanie widoku z kartami ..............................................628 Implementowanie widoku us(cid:228)ugi pogodowej ...................................633 Implementowanie elementów, które mo(cid:276)na przeci(cid:241)ga(cid:232) ...................637 Implementowanie dost(cid:246)pu do danych dynamicznych ......................641 Inicjowanie aplikacji ....................................................................646 Podsumowanie ...........................................................................648 Skorowidz ........................................................................651 Kup książkęPoleć książkę 27 Dodawanie wątków komentarzy do stron tym rozdziale zamieszczono praktyczny przykład implementowania pełnego stosu Node.js-MongoDB-AngularJS. Dowiesz się, jak umożliwić użytkownikom W dodawanie zagnieżdżonych komentarzy do jednego lub większej liczby obszarów strony internetowej. Opcja dodawania komentarzy stanowi typowy element wielu witryn internetowych. Wiąże się z tym kilka trudności. Przykład zaprezentowany w tym rozdziale prezentuje pojedynczą stronę internetową, która umożliwia komentowanie całej strony, a także poszczególnych zdjęć ładowanych na stronie. Kod jest prosty i łatwy do prześledzenia. Aby było Ci jeszcze łatwiej go prześledzić, nie uwzględniono w nim zarządzania użytkownikami, uwierzytelnianiem i sesjami. Jeśli chcesz przypomnieć sobie te zagadnienia, wróć do rozdziału 26. Przykład prezentowany w tym rozdziale zawiera niewielką funkcję, która symuluje użycie nazwy użytkownika w sesji w celu zezwolenia na wyświetlenie komentarzy wielu użytkowników. U(cid:276)ywane biblioteki W projekcie omawianym w tym rozdziale używane są dodatkowe moduły NPM środowiska Node.js. Aby przejść dalej, musisz je zainstalować w katalogu projektu. Oto one: (cid:132) express. Używany jako główny serwer WWW projektu. (cid:132) body-parser. Zapewnia obsługę treści JSON na potrzeby żądań POST. (cid:132) ejs. Używany do renderowania szablonów HTML. (cid:132) mongodb. Używany do uzyskiwania dostępu do bazy danych MongoDB. (cid:132) mongoose. Używany do zapewniania modelu danych strukturyzowanych. Kod w tym rozdziale wymaga również dostępności biblioteki AngularJS. Kup książkęPoleć książkę 558 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron Struktura katalogowa projektu Projekt zorganizowano w ramach następującej struktury katalogowej: (cid:132) ./. Zawiera podstawowe pliki aplikacji i foldery pomocnicze. Jest to główny katalog projektu. (cid:132) ../node_modules. Jest tworzony po zainstalowaniu w systemie wyszczególnionych wcześniej modułów NPM. (cid:132) ./controllers. Zawiera kontrolery tras komponentu Express, które zapewniają interakcję między trasami i zmianami w bazie danych MongoDB. (cid:132) ./models. Zawiera definicje modelu biblioteki Mongoose dla obiektów w bazie danych. (cid:132) ./static. Zawiera wszystkie pliki statyczne, które należy wysłać (np. kod CSS i kod aplikacji AngularJS). (cid:132) ./views. Zawiera szablony HTML, które będą renderowane przez mechanizm EJS. Uwaga Jest to tylko jedna z metod organizowania kodu. Cho(cid:232) nie musisz korzysta(cid:232) z takiej struktury katalogowej, pami(cid:246)taj o tym, (cid:276)e struktura powinna stanowi(cid:232) cz(cid:246)(cid:264)(cid:232) ogólnej koncepcji projektów, aby (cid:228)atwiejsze by(cid:228)o znalezienie szukanego kodu. Oprócz struktury katalogowej do projektu dołączane są poniższe pliki z kodem. Następująca lista ma na celu ułatwienie Ci zorientowania się w funkcjonalności każdego pliku: (cid:132) ./comment_init.js. Zapewnia autonomiczny kod inicjalizacji. W celu przeprowadzenia inicjalizacji projektu kod dodaje do bazy danych MongoDB obiekt strony początkowej i kilka zdjęć. (cid:132) ./comment_server.js. Ładuje niezbędne biblioteki, tworzy połączenie z bazą danych MongoDB i uruchamia serwer Express. Jest to główny plik aplikacji. (cid:132) ./comment_routes.js. Definiuje trasy dla serwera Express. Plik ten obsługuje funkcje, które nie dotyczą bazy danych. (cid:132) ./controllers/comments_controller.js. Definiuje funkcje dla tras, które wymagają interakcji z bazą danych MongoDB w celu pobierania i aktualizowania komentarzy. (cid:132) ./controllers/pages_controller.js. Definiuje funkcje dla tras, które wymagają interakcji z bazą danych MongoDB w celu pobierania obiektów strony. (cid:132) ./controllers/photos_controller.js. Definiuje funkcje dla tras, które wymagają interakcji z bazą danych MongoDB w celu pobierania jednego lub wszystkich obiektów zdjęć. (cid:132) ./models/comments_model.js. Definiuje model obiektów komentarzy. (cid:132) ./models/page_model.js. Definiuje model stron komentarzy. (cid:132) ./models/photo_model.js. Definiuje model zdjęć komentarzy. Kup książkęPoleć książkę Definiowanie modeli komentarzy, odpowiedzi, zdj(cid:246)(cid:232) i stron 559 (cid:132) ./views/photos.html. Zapewnia dla aplikacji główną stronę zdjęć, która umożliwi użytkownikom wybranie zdjęć i dodanie komentarzy do strony lub wybranego zdjęcia. (cid:132) ./static/comment.html. Umożliwia wyświetlenie zagnieżdżonych komentarzy przy użyciu dyrektywy ng-repeat. Jest to częściowy szablon środowiska AngularJS. (cid:132) ./static/comment_thread.html. Udostępnia środowisko do dodawania wątku komentarzy w różnych miejscach na stronie internetowej. Jest to częściowy szablon środowiska AngularJS. (cid:132) ./static/js/comment_app.js. Zapewnia definicje kontrolerów i modułów środowiska AngularJS w celu obsługi pobierania obiektów stron, zdjęć i komentarzy z serwerów, a także zapisywania nowych komentarzy. (cid:132) ./static/css/comment_styles.css. Udostępnia style CSS dla stron HTML środowiska AngularJS. (cid:132) ../images. Zawiera obrazy używane w przykładzie. Odpowiada folderowi dla tego rozdziału, który wchodzi w skład archiwum kodów książki. (cid:132) ../lib. Zawiera niezbędne pliki biblioteki AngularJS, które są używane w omawianym przykładzie. Odpowiada folderowi dla tego rozdziału, który wchodzi w skład archiwum kodów książki. Definiowanie modeli komentarzy, odpowiedzi, zdj(cid:246)(cid:232) i stron Pierwszym krokiem procesu implementowania aplikacji zawsze powinno być przyjrzenie się wymaganiom modelu obiektów. W omawianym przykładzie celem jest umożliwienie użytkownikom dodawania komentarzy do stron internetowych. Aby to zrobić, musisz najpierw zidentyfikować obiekty, do których użytkownicy mogą dodawać komentarze. Przykład prezentuje stronę internetową zawierającą kilka zdjęć. By zezwolić użytkownikom na dołączanie komentarzy zarówno do witryny internetowej, jak i do poszczególnych zdjęć, wykorzystasz możliwość wielokrotnego użycia. Aby zapewnić obiekty, do których zostaną dołączone komentarze, niezbędny jest model dla stron i zdjęć. W dalszej części rozdziału omówiono projekty schematów modeli. Definiowanie modelu Page Kod z listingu 27.1 implementuje schemat modelu Page dla aplikacji. Schemat jest bardzo prosty. Zawiera jedynie pola name i commentId. Zauważ, że pole name skonfigurowano jako unikalne, co jest niezbędne, by było możliwe wyszukiwanie strony według nazwy. Głównym zadaniem modelu Page jest udostępnienie miejsca, w którym będzie można powiązać stronę internetową z wątkiem komentarzy. Kup książkęPoleć książkę 560 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron Listing 27.1. Plik page_model.js: implementowanie modelu Page dla biblioteki Mongoose 01 var mongoose = require( mongoose ), 02 Schema = mongoose.Schema; 03 var PageSchema = new Schema({ 04 name: {type: String, unique: true}, 05 commentId: Schema.ObjectId 06 }); 07 mongoose.model( Page , PageSchema); Definiowanie modelu Photo Kod z listingu 27.2 implementuje schemat modelu Photo dla aplikacji. Ten schemat również jest bardzo prosty. Zawiera pola title, filename, timestamp i commentId. Pole commentId ma takie samo przeznaczenie jak pole commentId w modelu Page. To wielokrotnie używane pole ułatwia późniejsze dodawanie komentarzy do dowolnych dodatkowych modeli stron lub obiektów, które mają zostać dołączone do aplikacji. Listing 27.2. Plik photo_model.js: implementowanie modelu Photo dla biblioteki Mongoose 01 var mongoose = require( mongoose ), 02 Schema = mongoose.Schema; 03 var PhotoSchema = new Schema({ 04 title: String, 05 filename: String, 06 timestamp: { type: Date, default: Date.now }, 07 commentId: Schema.ObjectId 08 }); 09 mongoose.model( Photo , PhotoSchema); Definiowanie modelu CommentThread Model komentarzy ma za zadanie obsługiwanie zagnieżdżonych komentarzy. W komponencie MongoDB dostępne są dwie różne metody, które to umożliwiają. Możesz zapisać każdy komentarz jako pojedynczy dokument i zapewnić odsyłacz do obiektów nadrzędnych, ale możesz też zapamiętać wszystkie komentarze wątku w jednym dokumencie. Obie metody działają, wiążą się z nimi jednak bardzo odmienne implementacje i konsekwencje. Przechowywanie drzewa komentarzy w jednym dokumencie ułatwia i przyspiesza ładowanie danych z bazy MongoDB. Mankamentem jest to, że z powodu braku ustalonej głębokości dla komentarzy po dodaniu nowych komentarzy wymagane jest zapisanie całej struktury odpowiedzi. Ponadto musisz pobrać cały dokument, aby uzyskać dowolny z komentarzy. Przechowywanie komentarzy jako pojedynczych dokumentów oznacza łatwość wyszukiwania wybranego dokumentu, a także zapisywania dowolnych dodatkowych komentarzy/odpowiedzi, gdyż są one odrębnymi dokumentami. Aby jednak załadować Kup książkęPoleć książkę Tworzenie serwera komentarzy 561 całe drzewo komentarzy, musisz zaimplementować złożoną funkcję agregacji lub przeprowadzić wiele wyszukiwań w celu zbudowania drzewa. Oba rozwiązania są znacznie mniej efektywne niż załadowanie pojedynczego dokumentu. Ze względu na to, że komentarze są bardzo często wczytywane, lecz rzadko tworzone, dobrą opcją jest zapisanie struktury zagnieżdżonych komentarzy/odpowiedzi w pojedynczym dokumencie bazy danych MongoDB, a następnie zaktualizowanie całej struktury po dodaniu nowego komentarza. Kod z listingu 27.3 implementuje schematy modeli CommentThread i Reply. Schemat modelu CommentThread pełni rolę głównego dokumentu dla komentarzy dotyczących danego obiektu. Schemat modelu Reply służy do przechowywania komentarzy/odpowiedzi dodanych do strony lub zdjęcia. Zauważ, że pole replies obiektów Reply i CommentThread to tablica obiektów schematu odpowiedzi: replies:[ReplySchema] Listing 27.3. Plik comments_model.js: implementowanie modelu CommentThread dla biblioteki Mongoose 01 var mongoose = require( mongoose ), 02 Schema = mongoose.Schema; 03 var ReplySchema = new Schema({ 04 username: String, 05 subject: String, 06 timestamp: { type: Date, default: Date.now }, 07 body: String, 08 replies:[ReplySchema] 09 }, { _id: true }); 10 var CommentThreadSchema = new Schema({ 11 title: String, 12 replies:[ReplySchema] 13 }); 14 mongoose.model( Reply , ReplySchema); 15 mongoose.model( CommentThread , CommentThreadSchema); Taka konfiguracja umożliwia wzajemne zagnieżdżanie komentarzy wewnątrz siebie i tworzenie na tym samym poziomie wielu komentarzy. Na rysunku 27.1 pokazano zagnieżdżoną strukturę w rzeczywistym dokumencie przechowywanym w bazie danych MongoDB. Tworzenie serwera komentarzy Po zdefiniowaniu modelu możesz rozpocząć implementowanie serwera komentarzy. Kod z listingu 27.4 implementuje serwer Express dla aplikacji obsługującej komentarze. Kod powinien wyglądać znajomo. Zawiera on biblioteki express i mongoose, a ponadto nawiązuje połączenie z bazą danych MongoDB za pośrednictwem biblioteki Mongoose. Kup książkęPoleć książkę 562 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron Rysunek 27.1. Obiekt CommentThread z zagnie(cid:276)d(cid:276)onymi odpowiedziami przechowywanymi w bazie danych MongoDB Listing 27.4. Plik comments_server.js: implementowanie serwera aplikacji komentarzy za pomoc(cid:241) serwera Express i przez nawi(cid:241)zywanie po(cid:228)(cid:241)czenia z baz(cid:241) danych MongoDB 01 var express = require( express ); 02 var bodyParser = require( body-parser ); 03 var mongoose = require( mongoose ); 04 var db = mongoose.connect( mongodb://localhost/comments ); 05 require( ./models/comments_model.js ); 06 require( ./models/photo_model.js ); 07 require( ./models/page_model.js ); 08 var app = express(); 09 app.engine( .html , require( ejs ).__express); 10 app.set( views , __dirname + /views ); 11 app.set( view engine , html ); 12 app.use(bodyParser()); 13 require( ./comment_routes )(app); 14 app.listen(80); Zauważ, że dla każdej definicji modelu występuje instrukcja require. Służy ona do tworzenia obiektu Schema w obrębie biblioteki Mongoose. Ponadto dołączono plik ./comment_routes w celu zainicjowania tras dla serwera przed rozpoczęciem nasłuchiwania na porcie 80. Kup książkęPoleć książkę Implementowanie tras do obs(cid:228)ugi wy(cid:264)wietlania i dodawania komentarzy 563 Implementowanie tras do obs(cid:228)ugi wy(cid:264)wietlania i dodawania komentarzy W ramach konfiguracji serwera Express ładowany jest plik ./comment_routes.js (listing 27.4). Kod z listingu 27.5 zapewnia trasy niezbędne do pobrania strony, zdjęcia i danych komentarza, a także dodania komentarzy do zdjęć lub stron. Listing 27.5. Plik comments_routes.js: implementowanie tras serwera aplikacji komentarzy dla serwera Express 01 var express = require( express ); 02 module.exports = function(app) { 03 var photos = require( ./controllers/photos_controller ); 04 var comments = require( ./controllers/comments_controller ); 05 var pages = require( ./controllers/pages_controller ); 06 app.use( /static , express.static( ./static )). 07 use( /images , express.static( ../images )). 08 use( /lib , express.static( ../lib ) 09 ); 10 app.get( / , function(req, res){ 11 res.render( photos ); 12 }); 13 app.get( /photos , photos.getPhotos); 14 app.get( /photo , photos.getPhoto); 15 app.get( /page , pages.getPage); 16 app.get( /comments/get , comments.getComment); 17 app.post( /comments/add , comments.addComment); 18 } W wierszach od 6. do 9. implementowane są trasy statyczne do obsługi pobierania kodu CSS, kodu JavaScript, obrazów i częściowych szablonów środowiska AngularJS, które są wykorzystywane w omawianym przykładzie. Obrazy i foldery lib środowiska AngularJS znajdują się w głównym katalogu projektów. Inne pliki statyczne są umieszczone w folderze ./static w obrębie projektu. Zauważ, że gdy użytkownik uzyska dostęp do głównej lokalizacji witryny, w wierszu 9. renderowany jest szablon photos.html. Wszystkie trasy w wierszach od 13. do 17. prowadzą interakcję z bazą danych MongoDB, a ponadto są obsługiwane w procedurach obsługi kontrolera opisanych w następnym podrozdziale. Implementowanie tras kontrolerów opartych na modelu Oprócz implementowania standardowej obsługi tras wymagane jest również zastosowanie obsługi tras do interakcji z bazą danych. Aby zachować przejrzystość kodu i zapewnić odpowiedni podział zakresu odpowiedzialności, takie procedury obsługi tras zostaną wydzielone ze standardowego pliku comment_route.js do ich własnych plików (dla każdego modelu). Kup książkęPoleć książkę 564 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron W kolejnych punktach omówiono implementację kontrolerów specyficznych dla modeli Page, Photo i CommentThread. Implementowanie kontrolera modelu Page Kod z listingu 27.6 implementuje kod obsługi tras dla modelu Page. Występuje tu tylko jedna trasa getPage(), która znajduje stronę na podstawie pola name i zwraca błąd lub postać łańcuchową JSON obiektu. Nazwa strony do znalezienia trafia do parametru pageName w łańcuchu zapytania GET. Listing 27.6. Plik pages_controller.js: implementowanie trasy getPage dla serwera Express 01 var mongoose = require( mongoose ), 02 Page = mongoose.model( Page ); 03 exports.getPage = function(req, res) { 04 Page.findOne({ name: req.query.pageName }) 05 .exec(function(err, page) { 06 if (!page){ 07 res.json(404, {msg: Nie znaleziono strony. }); 08 } else { 09 res.json(page); 10 } 11 }); 12 }; Implementowanie kontrolera modelu Photo Kod z listingu 27.7 implementuje kod obsługi tras dla modelu Photo. Obsługiwane są dwie trasy. Procedura obsługi trasy getPhoto() wyszukuje pojedynczy dokument Photo na podstawie pola _id przekazanego jako parametr photoId w łańcuchu zapytania GET. Procedura obsługi trasy getPhotos() pobiera wszystkie dokumenty Photo. Obie procedury zwracają postać łańcuchową JSON wyników. Listing 27.7. Plik photos_controller.js: implementowanie tras getPhoto i getPhotos na serwerze Express w celu pobierania zdj(cid:246)(cid:232) 01 var mongoose = require( mongoose ), 02 Photo = mongoose.model( Photo ); 03 exports.getPhoto = function(req, res) { 04 Photo.findOne({ _id: req.query.photoId }) 05 .exec(function(err, photo) { 06 if (!photo){ 07 res.json(404, {msg: Nie znaleziono zdj(cid:218)cia. }); 08 } else { 09 res.json(photo); 10 } 11 }); 12 }; 13 exports.getPhotos = function(req, res) { 14 Photo.find() Kup książkęPoleć książkę Implementowanie tras kontrolerów opartych na modelu 565 15 .exec(function(err, photos) { 16 if (!photos){ 17 res.json(404, {msg: Nie znaleziono zdj(cid:218)(cid:202). }); 18 } else { 19 res.json(photos); 20 } 21 }); 22 }; Implementowanie kontrolera modelu CommentThread Kod z listingu 27.8 implementuje kod obsługi tras dla modelu CommentThread. Obsługiwane są dwie trasy: getComment() i addComment(). Ze względu na wielkość pliku w kolejnych punktach rozdzielono kod dla tych dwóch tras. Listing 27.8. Plik comments_controller.js (getComment): implementowanie trasy do uzyskania w(cid:241)tków komentarzy dla serwera Express 04 exports.getComment = function(req, res) { 05 CommentThread.findOne({ _id: req.query.commentId }) 06 .exec(function(err, comment) { 07 if (!comment){ 08 res.json(404, {msg: Nie znaleziono modelu CommentThread. }); 09 } else { 10 res.json(comment); 11 } 12 }); 13 }; Implementowanie procedury obs(cid:228)ugi trasy getComment() Procedura obsługi trasy getComment() wyszukuje pojedynczy dokument CommentThread na podstawie pola _id przekazanego jako parametr commentId w łańcuchu zapytania żądania GET. Implementowanie procedury obs(cid:228)ugi trasy addComment() Procedura obsługi trasy addComment(), której kod widać na listingu 27.9, jest trochę bardziej złożona niż procedura getComment(), a ponadto uwzględnia łańcuch funkcji obsługujących aktualizowanie zagnieżdżonych komentarzy. Przebieg procesu dodawania nowych komentarzy jest następujący: 1. Klient wysyła żądanie zawierające identyfikator CommentThread, identyfikator komentarza nadrzędnego, do którego ma zostać dodany nowy komentarz, oraz obiekt JSON reprezentujący nowy komentarz. 2. Procedura obsługi trasy /comment/add wywołuje procedurę addComment(). 3. Obiekt CommentThread jest lokalizowany przy użyciu wartości req.body.rootCommentId z danych żądania POST. Kup książkęPoleć książkę 566 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron 4. Nowy obiekt Reply o nazwie newComment jest tworzony przy użyciu wartości req.body.newComment z danych żądania POST. 5. Procedura obsługi addComment() jest uruchamiana rekurencyjnie w celu przeszukiwania zagnieżdżonych komentarzy do momentu znalezienia komentarza, który jest zgodny z wartością req.body.parentCommentId przekazaną z treści żądania POST. 6. Nowy komentarz jest umieszczany w tablicy replies komentarza nadrzędnego. 7. Metoda updateCommentThread() używa następującej operacji update(), aby zaktualizować pole replies w dokumencie CommentThread za pomocą pola, które zawiera teraz zaktualizowany komentarz: CommentThread.update({ _id: commentThread.id }, {$set:{replies:commentThread.replies}}).exec(); 8. Odpowiedź informująca o powodzeniu lub niepowodzeniu jest odsyłana do klienta. Listing 27.9. Plik comments_controller.js: implementowanie procedury obs(cid:228)ugi trasy addComment() dla serwera Express 14 exports.addComment = function(req, res) { 15 CommentThread.findOne({ _id: req.body.rootCommentId }) 16 .exec(function(err, commentThread) { 17 if (!commentThread){ 18 res.json(404, {msg: Nie znaleziono modelu CommentThread. }); 19 } else { 20 var newComment = Reply(req.body.newComment); 21 newComment.username = generateRandomUsername(); 22 addComment(req, res, commentThread, commentThread, 23 req.body.parentCommentId, newComment); 24 } 25 }); 26 }; 27 function addComment(req, res, commentThread, currentComment, 28 parentId, newComment){ 29 if (commentThread.id == parentId){ 30 commentThread.replies.push(newComment); 31 updateCommentThread(req, res, commentThread); 32 } else { 33 for(var i=0; i currentComment.replies.length; i++){ 34 var c = currentComment.replies[i]; 35 if (c._id == parentId){ 36 c.replies.push(newComment); 37 var replyThread = commentThread.replies.toObject(); 38 updateCommentThread(req, res, commentThread); 39 break; 40 } else { 41 addComment(req, res, commentThread, c, 42 parentId, newComment); 43 } 44 } Kup książkęPoleć książkę Implementowanie tras kontrolerów opartych na modelu 567 45 } 46 }; 47 function updateCommentThread(req, res, commentThread){ 48 CommentThread.update({ _id: commentThread.id }, 49 {$set:{replies:commentThread.replies}}) 50 .exec(function(err, savedComment){ 51 if (err){ 52 res.json(404, {msg: Nie zaktualizowano modelu CommentThread. }); 53 } else { 54 res.json({msg: Powodzenie }); 55 } 56 }); 57 } Analiza procedury obs(cid:228)ugi tras modelu Comment Listing 27.10 prezentuje pełną implementację pliku comments_controller.js, który zapewnia obsługę tras dotyczącą modelu Comment. Kod tej procedury ładuje schemat dla modeli CommentThread i Reply. Model CommentThread zapewnia możliwość wyszukiwania dokumentów, a także aktualizowania ich po dodaniu nowych komentarzy. Model Reply tworzy obiekt Reply w momencie dodania nowego komentarza. Listing 27.10. Plik comments_controller.js: pe(cid:228)na implementacja procedur obs(cid:228)ugi tras modelu Comment dla serwera Express 01 var mongoose = require( mongoose ), 02 CommentThread = mongoose.model( CommentThread ), 03 Reply = mongoose.model( Reply ); 04 exports.getComment = function(req, res) { 05 CommentThread.findOne({ _id: req.query.commentId }) 06 .exec(function(err, comment) { 07 if (!comment){ 08 res.json(404, {msg: Nie znaleziono modelu CommentThread. }); 09 } else { 10 res.json(comment); 11 } 12 }); 13 }; 14 exports.addComment = function(req, res) { 15 CommentThread.findOne({ _id: req.body.rootCommentId }) 16 .exec(function(err, commentThread) { 17 if (!commentThread){ 18 res.json(404, {msg: Nie znaleziono modelu CommentThread. }); 19 } else { 20 var newComment = Reply(req.body.newComment); 21 newComment.username = generateRandomUsername(); 22 addComment(req, res, commentThread, commentThread, 23 req.body.parentCommentId, newComment); 24 } 25 }); 26 }; Kup książkęPoleć książkę 568 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron 27 function addComment(req, res, commentThread, currentComment, 28 parentId, newComment){ 29 if (commentThread.id == parentId){ 30 commentThread.replies.push(newComment); 31 updateCommentThread(req, res, commentThread); 32 } else { 33 for(var i=0; i currentComment.replies.length; i++){ 34 var c = currentComment.replies[i]; 35 if (c._id == parentId){ 36 c.replies.push(newComment); 37 var replyThread = commentThread.replies.toObject(); 38 updateCommentThread(req, res, commentThread); 39 break; 40 } else { 41 addComment(req, res, commentThread, c, 42 parentId, newComment); 43 } 44 } 45 } 46 }; 47 function updateCommentThread(req, res, commentThread){ 48 CommentThread.update({ _id: commentThread.id }, 49 {$set:{replies:commentThread.replies}}) 50 .exec(function(err, savedComment){ 51 if (err){ 52 res.json(404, {msg: Nie zaktualizowano modelu CommentThread. }); 53 } else { 54 res.json({msg: Powodzenie }); 55 } 56 }); 57 } 58 function generateRandomUsername(){ 59 // nazwa u(cid:346)ytkownika b(cid:163)dzie zwykle pochodzi(cid:244) z uwierzytelnionej sesji 60 var users=[ Dawid , Karol , Bartek , Janek , Adam , Tomek ]; 61 return users[Math.floor((Math.random()*5))]; 62 } Kod kontrolera komentarzy udostępnia funkcję, która losowo generuje nazwę użytkowników do celów testowych: function generateRandomUsername(){ //nazwa u(cid:346)ytkownika b(cid:163)dzie zwykle pochodzi(cid:244) z uwierzytelnionej sesji var users=[ Dawid , Karol , Bartek , Janek , Adam , Tomek ]; return users[Math.floor((Math.random()*6))]; } Choć nazwa użytkownika będzie zwykle pochodzić z sesji w obiekcie Request, w tym miejscu pominięto kod sesji, aby ułatwić Ci przeanalizowanie przykładu. Kup książkęPoleć książkę Implementowanie widoków komentarzy i zdj(cid:246)(cid:232) 569 Implementowanie widoków komentarzy i zdj(cid:246)(cid:232) Po utworzeniu i skonfigurowaniu tras możesz rozpocząć implementowanie widoków renderowanych przez trasy i szablony AngularJS. W kolejnych punktach omówiono widok photos.html renderowany przez mechanizm EJS, a także częściowe widoki comment.html i comment_thread.html, które są udostępniane statycznie. Implementowanie widoku zdj(cid:246)(cid:232) Widok zdjęć zaprezentowany na listingu 27.11 to główny widok aplikacji w omawianym przykładzie. Widok jest ładowany w głównej trasie /. Nagłówek widoku rejestruje element html w aplikacji AngularJS i ładuje plik comment_styles.css. Element body jest rozdzielany na dwie podstawowe sekcje. Listing 27.11. Plik photos.html: implementowanie kodu g(cid:228)ównego szablonu AngularJS strony ze zdj(cid:246)ciami 01 !doctype html 02 html ng-app= myApp 03 head 04 title Komentarze /title 05 link rel= stylesheet type= text/css 06 href= /static/css/comment_styles.css / 07 /head 08 body 09 h2 Przyk(cid:239)ad komentarzy /h2 10 div ng-controller= photoController 11 div id= photosContainer 12 div class= photoItem ng-repeat= photo in photos 13 img class= listPhoto ng-click= setPhoto(photo._id) 14 ng-src= ../images/{{photo.filename}} / 15 /div 16 /div 17 div 18 div id= photoContainer 19 p class= imageTitle {{photo.title}} /p 20 img class= mainPhoto 21 ng-src= ../images/{{photo.filename}} / 22 /div 23 div id= photoComments 24 ng-init= addComment=false;replySubject= ;replyBody= 25 div class= comment 26 ng-include= /static/comment_thread.html /div 27 /div 28 /div 29 /div 30 div ng-controller= pageController 31 div id= pageComments 32 ng-init= addComment=false;replySubject= ;replyBody= 33 div class= comment 34 ng-include= /static/comment_thread.html /div Kup książkęPoleć książkę 570 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron 35 /div 36 /div 37 script src= http://code.angularjs.org/1.2.9/angular.min.js /script 38 script src= /static/js/comment_app.js /script 39 /body 40 /html W górnej sekcji inicjowany jest kontroler ng-controller= photoController środowiska AngularJS w celu zapewnienia funkcji umożliwiających interakcję ze zdjęciami z serwera WWW, w tym z dotyczącymi ich komentarzami. W dolnej sekcji inicjowany jest kontroler ng-controller= pageController , aby udostępnić funkcje pozwalające na interakcję z komentarzami na stronie internetowej. Oba kontrolery służą do izolowania zasięgu, ponieważ implementują sekcje komentarzy. Następujący kod definiuje szablon AngularJS, który renderuje tablicę dokumentów Photo przechowywaną w obiekcie $scope.photos modelu przy użyciu dyrektywy ng-repeat: div id= photosContainer div class= photoItem ng-repeat= photo in photos img class= listPhoto ng-click= setPhoto(photo._id) ng-src= ../images/{{photo.filename}} / /div /div Zauważ, że w celu ustawienia bieżącego zdjęcia w kodzie kontrolera dla dyrektywy ng-click ustawiono metodę setPhoto(). Na rysunku 27.2 pokazano element wyrenderowany na stronach. Rysunek 27.2. Zdj(cid:246)cia renderowane w przegl(cid:241)darce jako elementy img Następujący kod szablonu wyświetla na ekranie bieżący obiekt $scope.photo przy użyciu właściwości photo.title. Ponadto za pomocą właściwości photo.filename kod ustawia dla atrybutu src element img : div id= photoContainer p class= imageTitle {{photo.title}} /p img class= mainPhoto ng-src= ../images/{{photo.filename}} / /div Na rysunku 27.3 pokazano wyświetloną część strony ze zdjęciem. Kup książkęPoleć książkę Implementowanie widoków komentarzy i zdj(cid:246)(cid:232) 571 Rysunek 27.3. Wi(cid:246)kszy widok zdj(cid:246)cia i tytu(cid:228)u wy(cid:264)wietlony w przegl(cid:241)darce Część strony internetowej z komentarzami dodajesz za pomocą poniższego kodu, który używa dyrektywy ng-init do inicjowania wartości addComment, replySubject i replyBody w bieżącym zasięgu, a następnie korzysta z dyrektywy ng-include, aby dołączyć kod częściowego szablonu comment_thread.html opisanego w następnym punkcie. div id= photoComments ng-init= addComment=false;replySubject= ;replyBody= div class= comment ng-include= /static/comment_thread.html /div /div Sekcja podobna do powyższej jest dodawana do części strony ze zdjęciami, a także na dole strony. Umożliwia to wstawianie komentarzy w obu miejscach. Wartość addComment jest używana w szablonie comment_thread.html do określenia, czy komentarze mają zostać włączone, czy wyłączone. Na rysunku 27.4 pokazano pełną aplikację z komentarzami w sekcji zdjęć oraz na dole strony. Implementowanie widoku w(cid:241)tku komentarzy Jak wspomniano w poprzednim punkcie, sekcja zdjęć i sekcja głównego obrazu strony ze zdjęciami korzystają z dyrektywy ng-include, aby dołączyć szablon częściowy comment_thread.html, który został zaprezentowany na listingu 27.12. Szablon ten został wydzielony, aby łatwiej było go w późniejszym czasie dołączyć do innych stron, a nawet dodatkowych sekcji tej samej strony. Kup książkęPoleć książkę 572 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron Rysunek 27.4. Wy(cid:264)wietlona strona zdj(cid:246)(cid:232) z komentarzami w obszarze zdj(cid:246)(cid:232) i na dole strony Listing 27.12. Plik comment_thread.html: implementowanie cz(cid:246)(cid:264)ciowego szablonu w(cid:241)tku komentarzy 01 span class= commentTitle {{commentThread.title}} /span 02 input type= button ng-show= addComment==false 03 value= Dodaj komentarz ng-click= addComment=true /input 04 form ng-show= addComment==true 05 label Temat /label 06 input type= text ng-model= replySubject ) /input 07 label Komentarz /label 08 textarea ng-model= replyBody /textarea 09 input type= button value= Wy(cid:258)lij 10 ng-click= 11 addComment=false; addReply(commentThread._id,replySubject,replyBody) 12 /input 13 /form 14 input type= button ng-show= addComment==true 15 value= Anuluj ng-click= addComment=false; /input 16 div ng-repeat= comment in commentThread.replies 17 ng-init= reply=false;replySubject= ;replyBody= 18 div class= comment ng-include= /static/comment.html /div 19 /div Szablon częściowy uwzględnia tytuł CommentThread przy użyciu kodu {{commentThread.title}}. Przycisk elementu input przełącza atrybut addComment na wartość true, umożliwiając wyświetlenie formularza odpowiedzi (aktualnie ukryto go za pomocą dyrektywy ng-show). W obrębie tego formularza definiowany jest element input wraz z treścią komentarza textarea (rysunek 27.5). Przycisk Dodaj komentarz Kup książkęPoleć książkę Implementowanie widoków komentarzy i zdj(cid:246)(cid:232) 573 powoduje wykonanie metody addReply() w zasięgu i przekazanie kontrolerowi wartości commentThread._id, replySubject i replyBody w celu wysłania do serwera żądania dodania komentarza. Rysunek 27.5. Obszar w(cid:241)tku komentarzy z przyciskiem Dodaj komentarz i formularz s(cid:228)u(cid:276)(cid:241)cy do dodania komentarza Na rysunku 27.5 pokazano widok wątku komentarzy wyrenderowany przed kliknięciem przycisku Dodaj komentarz oraz formularz odpowiedzi, który zostanie otwarty po kliknięciu tego przycisku. Na dole szablonu wątku komentarzy w poniższych wierszach kodu używana jest dyrektywa ng-repeat do załadowania szablonu częściowego comment.html, który renderuje komentarz za pomocą dyrektywy ng-include. Zauważ też, że inicjowane są wartości reply, replySubject i replyBody. Są one używane w szablonie komentarzy do wyświetlania/ukrywania formularza odpowiedzi, a także do przekazywania danych do funkcji addReply(): div ng-repeat= comment in commentThread.replies ng-init= reply=false;replySubject= ;replyBody= div class= comment ng-include= /static/comment.html /div /div Implementowanie widoku komentarzy Jak wspomniano w poprzednim punkcie, sekcja wątku komentarzy strony używa dyrektywy ng-include do dołączenia szablonu częściowego comment.html (jego kod został zaprezentowany na listingu 27.13) dla każdej odpowiedzi w tablicy replies obiektu komentarzy. Listing 27.13. Plik comment_thread.html: implementowanie cz(cid:246)(cid:264)ciowego szablonu komentarzy 01 span class= username {{comment.username}} /span : 02 span class= subject {{comment.subject}} /span 03 p class= timestamp 04 posted {{comment.timestamp|date: MMMM d yyyy H:mm }} /p Kup książkęPoleć książkę 574 Rozdzia(cid:228) 27. Dodawanie w(cid:241)tków komentarzy do stron 05 p class= commentBody {{comment.body}} /p 06 input type= button ng-show= reply==false 07 value= Odpowiedz ng-click= reply=true /input 08 form ng-if= reply 09 label Temat /label 10 input type= text ng-model= replySubject ) /input 11 label Komentarz /label 12 textarea ng-model= replyBody /textarea 13 input type= button value= Wy(cid:258)lij 14 ng-click= addReply(comment._id,replySubject,replyBody) / 15 /form 16 input type= button ng-show= reply==true 17 value= Anuluj ng-click= reply=false; /input 18 div ng-repeat= comment in comment.replies 19 ng-init= reply=false;replySubject= ;replyBody= 20 div class= comment ng-include= /stat
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Node.js, MongoDB, AngularJS. Kompendium wiedzy
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ą: