Angular: 10 wprowadzających lekcji online

Po przejściu przez teorię, nie ma nic lepszego od sprawdzenia jak teoria sprawdza się w praktyce. 10 lekcji wprowadzających to seria nagrań w formie mini kursu, w którym przejdziemy razem od zainstalowania niezbędnych narzędzi, do stworzenia pierwszej aplikacji...

1. Zainstaluj niezbędne narzędzia

Gdy uznasz, że Angular brzmi zachęcająco, dowiesz się, że jest ogromne zapotrzebowanie oraz programista znający Angulara, może liczyć na wysokie zarobki, należałoby zainstalować niezbędne narzędzia i środowiska, umożliwiające rozpoczęcie nauki.

Zacznijmy od zainstalowania Node:

Zainstaluj Node.js: https://nodejs.org/en/download/

2. Wybierz i zainstaluj IDE

Każdy zawód posiada swoje narzędzia pracy. Dla zawodowego kierowcy będzie to samochód, a dla programisty to właśnie IDE.

IDE (od ang. integrated development environment) – program lub zespół programów służących do tworzenia, modyfikowania, testowania i wytwarzania oprogramowania. Innymi słowy jest to program, który ułatwia pisanie kodu.

Gdy zaczynałem naukę z programowaniem, dostałem "świetną" poradę, abym zaczął pisać kod w notatniku. Oczywiście można także pisać kod w VIM'ie albo pójść o krok dalej i pisać kod w myślach :)

Moim zdaniem nie tędy droga i warto zaopatrzeć się w środowisko, które będzie wspierało Twoją pracę. Do wyboru masz dwa najpopularniejsze rozwiązania. Jedno z nich jest darmowe, drugie płatne.

Visual Studio Code (darmowe)

InteliJ WebStorm (płatne)

3. Stwórz swój pierwszy projekt przy pomocy Angular CLI


Aktualnie przy pomocy narzędzia jakim jest Angular CLI, będziesz w stanie skonfigurować i odpalić swój pierwszy projekt w mniej niż 5 minut.

Ja gdy zaczynałem naukę Angulara, odpalałem swój pierwszy projekt ok 2 tygodnie, ponieważ konfiguracji trzeba było dokonać własnoręcznie. W filmie przedstawiam Ci niezbędne kroki jak stworzyć swój pierwszy projekt i jak go odpalić.

4. Opis architektury - komponent

Komponent to główna konstrukcja w Angularze. Cała aplikacja będzie składała się z mniejszych oraz większych komponentów. Opis architektury komponentu znajdziesz w artykule Architektura Angulara.

W wideo poniżej omawiam teorię, bez przykładów praktycznych. Przykłady praktyczne znajdziesz w lekcji 9 oraz 10 poniżej.

5. Opis architektury - serwis


Serwis to druga najczęściej wykorzystywana konstrukcja w Angularze. Serwis jest dpowiedzialny za przygotowanie logiki biznesowej, przygotowanie komunikacji z backendem lub nadaje się jako cache aplikacji. Opis architektury serwisu znajdziesz w artykule Architektura Angulara.

W wideo poniżej omawiam teorię, bez przykładów praktycznych. Przykłady praktyczne znajdziesz w lekcji 9 oraz 10 poniżej.

6. Opis architektury - moduł

Moduł to trzecia najczęściej wykorzystywana konstrukcja w Angularze. Moduł jest odpowiedzialny za trzymanie w jednym miejscu całych obszarów technicznych lub biznesowych. Opis architektury modułu znajdziesz w artykule Architektura Angulara.

W wideo poniżej omawiam teorię, bez przykładów praktycznych. Przykłady praktyczne znajdziesz w lekcji 9 oraz 10 poniżej.

7. Angular Material - instalacja oraz prosty przykład

Angular Material to biblioteka, która udstępnia komponenty przygotowane przez zespół Google. Dzięki tej bibliotece, Twoje aplikacje będą posiadały rozwiązania oraz interfejs graficzny komponentów, które znasz z produktów Google takich jak np. Gmail.

8. Flexbox - praktyczny przykład

Flexbox to manager do zarządzania rozkładem elementów. Jest to must have jeżeli chodzi o część związaną z częścią wizualną aplikacji. W wideo przedstawiłem najczęściej spotykany przykład zarządzania rozkładem elementów oraz podałem pod koniec filmu link do aplikacji, w której możesz poćwiczyć flexboxa.

9. Praktyczny przykład - trzy główne konstrukcje od podstaw

Po zapoznaniu się z teorią, warto sprawdzić jak sprawdza się ona w praktyce. W tym wideo zobaczysz na bardzo prostym przykładzie w jaki sposób możesz korzystać z trzech głównych konstrukcji o których mówiliśmy wyżej.

Przejdziemy od podstaw przez stworzenie nowego projektu, dodanie fakeowego backendu, stowrzenie pierwszego komponentu, dodanie serwisu do pobierania danych oraz na sam koniec opakujemy cały obszar w moduł.

10. Case study - rozbudowany przykład z biblioteką

Poprzednie wideo z punktu 9 było wstępem pokazującym na bardzo prostych przykładach, jak odpalić pierwszy projekt oraz w jaki sposób możesz wykorzystać trzy główne konstrukcje jak: komponent, serwis oraz moduł.

To wideo porusza już bardziej złożone zagadnienia oraz są one umiejscowione w większej aplikacji.
Przedstawiam Ci 77 minut nagrania, w którym na rozbudowanym przykładzie pokazuję Ci w jaki sposób możesz korzystać z biblioteki oraz w jaki sposób możesz wykorzystywać elementy, o których opowiadałem w poprzednich lekcjach.

Proponowane artykuły:

Proces: Etap 3/5
Poprzedni artykuł
Proces: Etap 5/5
Kolejny artykuł

Zapisz się na newsletter. Otrzymuj najnowsze artykuły.