/warsawjs-workshop-3-online-shop

⛩️ WarsawJS Workshop #3 — Angular.js

Primary LanguageJavaScript

warsawjs-workshop-3-online-shop

⛩️ WarsawJS Workshop #3 — Angular.js

Jak uruchomić?

npm install
npm run build:mock
npm run start:mock-server

Wymagania

  • Angular.js v1.6.1
  • Node.js v7+

O czym opowiedzieć?

Komponenty

  • Wykorzystanie komponentów zamiast dyrektyw
  • Definicja dyrektywy vs definicja komponentu
  • Każdy komponent posiada domyślnie izolowany scope
  • Tworzenie komponentów (skróconej wersji dyrektyw) podobne jak w Angular 2
  • Alias definicji kontrolera we właściwości controller: FooCtrl as foo
  • Właściwość bindings jako skrót od bindToController
    • nazwa atrybut dyrektywy może być inna niż wewnętrzna nazwa właściwości
  • Zależności komponentów poprzez wykorzystanie właściwości require w $onInit
    • w komponentach (v1.5) jest obiektem
    • w dyrektywach (v1.4) jest stringiem albo tablicą (i wtedy odwołanie poprzez $ctrl[0])
    • ^^ wyszukuję komponentów-rodziców
    • ^ na początku przeszukuje element, a potem wyszukuje komponentów-rodziców
    • od wersji v1.5.6 nie trzeba podawać nazwy komponentu jeśli jest zdefiniowany klucz
  • Przekazywanie parametrów do komponentów i dyrektyw (w bindings)
    • < - przekazywane przez wartość w jedną stronę (v1.5)
    • @ - przekazywane przez wartość w jedną stronę (v1.5) wraz z interpolacją wartości atrybutu DOM
    • = - przekazywane przez referencję dwukierunkowo
    • & - akcja?
  • Nowe w v1.5
    • Nie trzeba używać już controllerAs, domyślnie obiekt kontrolera jest dostępny w szablonie jako $ctrl
    • Zamiast compile jest $onInit w kontrolerze komponentu
    • Kontroler nie jest wymagany przybudowanie komponentów - mamy komponenty bezstanowe - tak jak w React-cie.

Usługi

  • Nowe w v1.6
    • Usługa $http nie posiada już funkcji success i error, tylko then oraz catch.
  • Różnica między factory i service
    • obie zwracają singletony
    • factory: zwraca obiekt
    • service: zwraca konstruktor, który zostanie użyty do stworzenia obiektu

Inne

  • Filtry uruchamiają się 2 razy podczas $digest cycle
  • Tablica $watchers ma największy wpływ na wydajność

Optymalizacje

  • Wykorzystać track by przy ng-repeat, bez tego każdy dodany element do listy będzie powodował usunięcie obecnej listy i zbudowanie nowej (powiększonej tylko o jeden element).
  • Jednorazowe przypisanie (wyklucza z listy $watchers)
  • Wykorzystanie ng-model-options z v1.3, np. debounce przy wyszukiwarce
  • Jawne przekazanie obiektów podczas Dependency Injection tj. SomeController.$inject = ['$http', '$timeout];
  • Użycie dyrektywy ng-bind zamiast interpolacji (bez parsowania)
  • Usunięcie informacji developerskich $compileProvider.debugInfoEnabled(false)
    • nie dodaje klas CSS do DOMa
    • jeśli zaistnieje potrzeba to uruchom angular.reloadWithDebugInfo()
  • Nie używanie filtrów w DOMie - lepiej wykorzysta $filter w kontrolerze

TODO LIST

  • Prezentacja listy produktów
  • Uruchomienie serwera do pobierania danych
  • Pobieranie listy produktów
  • Prezentacja zawartości koszyka
  • Dodawanie produktów do koszyka
  • Czyszczenie produktów z koszyka
  • Zapisywanie stanu koszyka w localStorage
  • Odczytywanie stanu koszyka z localStorage
  • Obsługa błędów w sytuacji problemu z pobraniem listy produktów
  • Usuwanie pojedynczych produktów z koszyka
  • Filtrowanie listy produktów
  • Paginacja listy produktów
  • Routing

Zadania dodatkowe

  • Formularz płatności
  • Drag and drop produktów do koszyka

Przydatne linki

Mockowanie danych

Todd Motto blog

Misc