Podstawowe komendy

Proste generowanie komponentu

ng generate component nazwaKomponentu

np. ng generate component menu
> informacja o wygenerowanych plikach oraz o aktualizacji app.module.ts

--skiTests true // generowanie bez pliku testów

Zapis tej komendy można wykorzystać również w skróconej wersji

ng g c nazwaKomponentu

ng g c navbar --skipTests true
CREATE …

Mały projekt - cytaty z Gwiezdnych Wojen

Zainiscjowanie projekty przy pomocy Angular-CLI

ng new star-wars-quotes-app

dodanie frameworku css-owego materialize-css do zależności

npm install materialize-css@1.0.0

Konfigurowanie zależności stylowej w angular.json // wskazanie zarówno na styl css oraz na jego plik js

"styles": [
    "src/styles.css",
    "./node_modules/materialize-css/dist …

Formularz

"Łapanie" formularza na 2 sposoby = poprzez odwołanie się do forms lub poprzez "klasyczne" selektory

const firstForm1 = document.forms[0]
const firstForm2 = document.querySelector("form")

Właściwości formularza (wybrane)

Użytkowanie

Link do biblioteki jQuery należy umieścić w sekcji head strony internetowej, w tym celu można wykorzystać dostępny kod (jQuery Core – All Versions) i przekopiować go do opracowywanego projektu lub wykorzystać link CDN

jQuery CDN – Latest Stable Versions

Składania

$ - znak dostępu do biblioteki jQuery

selektory (np. ) - przeszukują dokument w celu …

Fetch jest API/interfejsem należącym do przeglądarki, ale jest również dostępny przy pomocy node.js -> import fetch from 'node-fetch', który pozwala na asynchroniczne pobieranie danych z serwera.

Fetch bazuje na obietnicach -> Zwraca zapytanie HTTP jako obietnicę tego zapytania. W momencie wykorzystania metody fetch() tworzony jest obiekt typu Promise - oznacza to …

JSON - JavaScript Object Notation

Format JSON zbliżony jest do obiektów znanych z JS, z tą zasadą, że nazwy kluczy wpisuje się w PODWÓJNY cudzysłów, kolejne wpisy oddzielone są przecinkami a same pliki JSON przechowują jedynie dane/zmienne (żadnych funkcji/kodu wykonywalnego). Praca z plikami typu JSON przypomina te znane z …

Obietnice/Promises

Promises zostały wprowadzone wraz z ES6, bez nich asynchroniczność opierano na callbackach/wywołaniach zwrotnych. Obiekty Promise (obietnice) zakładają wykonanie pewnej czynności oraz zwrócenie rezultatu lub poinformowania o błędzie. Pozwala to na stworzenie takiego łańcucha kodu, który uzależnia wykonanie kolejnej funkcji od wyniku zwrotnego poprzedniej. Obiekt Promise może znajdować …

!

REST -> Representational state transfer (pl. zmiana stanu poprzez reprezentacje)

Wysyłanie danych

Tym razem do prezentacji możliwości XMLHttpRequest posłużę się fake API -> https://reqres.in/ ("A hosted REST-API ready to respond to your AJAX requests"), które pozwala na ćwiczenie funkcjonalności REST API

Wysyłanie danych wymaga

(1) przygotowanie danych do wysłania

  const …

XMLHttpRequest

XMLHttpRequest (XHR) służy do wykonywania dynamicznych (asynchronicznych) połączeń z serwerem i jest wykorzystywany do 1) aktualizacji informacji zawartych na stronie internetowej UPDATE 2) wysłania żadania danych do serwera po załadowaniu strony - REQUEST 3) przyjęcia informacji przesłanej przez serwer - po załadowaniu strony RECEIVE 4) przesłania danych do serwera (w tle …

Wstęp

Webpack generuje tzw. pakiety (ang. bundles -> bundle.js) na podstawie wytworzonego tzw. drzewa zależności oraz dostosowanie ich do formatu czytelnego dla możliwie jak najszerszego zakresu przeglądarek internetowych - jest swego rodzaju kompilatorem powstałej treści na podstawie różnych formatów do takiego, który przyjmuje przeglądarka internetowa (js,html,css). W tym sensie …

Wstęp

JavaScript w swoim założeniu jest jednowątkowa, kod wywoływany jest w sposób synchroniczny (linia po linii), w zestawieniu z node.js lub przeglądarką internetową może stać się asynchroniczna (kod dalej jest wywołany po kolei, ale jego elementy nie zatrzymają wywołania się reszty kodu np. w przypadku obiektu Window i metody …

Wraz z wzrostem wielkości projektu, większą rolę odgrywać będzie odpowiedni sposób strukturyzacji oraz modularyzacji plików zdefiniowanych w ramach niego stylów. Podział na odpowiednie moduły umożliwia również ponowne wykorzystanie wybranych części kodu w innych projektach.

Zwyczajowo przyjęło, się że plik, który importuje moduły (partials) a staje się łącznikiem pomiędzy nimi nazwany …

Sass oferuje następujące wbudowane moduły color, list, map, math, meta, selector, string

Używanie modułu odbywa się poprzez jego zaimportowanie na początku poprzez odowłanie się do słowa kluczowego @use nazwy modułu oraz użycia gwiazdki lub bez użycia gwiazdki - wówczas każda metoda musi być poprzedzona nazwą modułu

@use 'sass:math';
$half: math …

CSS na sterydach - czyli Syntactically Awesome Style Sheets

Sass jest językiem skryptowym rozszerzającym możliwości CSS i wymaga kompilacji na CSS tak aby mógł być interpretowany przez przeglądarki w tym celu można wykorzystać Gulpa (odpowiedniej wtyczki) lun wtyczki VSC.

Sass pozwala na:

* definiowanie zmiennych

* pisanie składni opartej na zagnieżdżaniu selektorów w …

Lokalna pamięć przeglądarki pozwala na przechowywanie danych przy pomocy JavaScript bezterminowo.

Dane przechowywane w lokalnej pamięci przeglądarki nie mogą przekroczyć 5mb i nie powinny znajdować się w nich dane poufne. Lokalna pamięć przeglądarki działa w sposób synchroniczny (odpowiada na zapytania po kolei).

Aby korzystać z tzw local storage (LS) można …

Zastosowanie trzech kropek wprowadzonych w ES6 - pozwala na rozwinięcie wyrażenia iterowalnego (wielokorotnie powtarzalnego/przejściowego) jako spread operator lub parametr rest.

Trzykropek można stosować w kontekście obiektów, tablic, stringów, zbiorów (setów) i map.

Spread Operator -> Rozproszenie

Dzieli kolekcję tworząc tablicę

Pozwala na rozciągnięcie (rozproszenie/rozwinięcie) obiektu mogącego ulec iteracji wewnątrz odbiorcy …

Klasy pozwalają na przypisanie metod bezpośrednio do (prototypów) obiektów przy pomocy jednego bloku (od ES6)

class Droid {
    constructor(name, occupation) {
        this.name = name;
        this.occupation = occupation;
    }

    logDroid() {
        return `this is ${this.name} a ${this.occupation} // metoda prototypowa -> __proto__: Object
    }
}

const c3po = new Droid('C-3PO', 'Protocol droid');
const r2d2 = new Droid …

Template strings lub też literals zwane po polsku łańcuchami szablonowymi

Łańcuchy szablonowe [wcześniej wspominałem o nich w tym miejscu] pozwalają na podstawianie zmiennych wewnątrz informacji przeznaczonymi do druku i zawartymi pomiędzy apostrofami [ warto pamiętać o tym, że stosowanie tego formatu zapisu nie wymaga używania sekwencji ucieczkowej -> /n]

Przykładowo:

const droid …

Kolekcje węzłów DOM

Typy węzłów

• element node
• attribute node
• text node
• comment node

NodeList

Uporządkowana lista wszystkich węzłów DOM (w tym również węzłów tekstowych oraz bloków tekstowych), obiekty można uzyskać poprzez odwołanie się do indeksu

querySelectorAll()/getElementsByName() - - metody document zwracające NodeList

NodeList posiada metodę forEach() !!

NodeList, jest static - zwrócona lista …

Propagacja wydarzeń (w górę) - event bubbling

W DOM domyślnie wydarzenia są przenoszone od dziecka lub rodzeństwa do rodzica lub rodzeństwa - oznacza to, że jeśli rodzic oraz dziecko mają nastawioną ten sam rodzaj akcji wywołującej (np. click) oraz różne lub tą samą wydarzenie wywołane, oba z nich dojdą do skutku chyba …