loader image
angular-js

Angular – Kompletan vodič

Šta ćeš naučiti na kursu

Opis kursa

Ovaj kurs počinje od samog početka, nije neophodno da poznaješ Angular 1 niti Angular 2!

Od podešavanja do objavljivanja aplikacije, ovaj kurs pokriva svaki segment na tom putu. Naučićeš o komponentama, direktivama, uslugama, formama, http pristupu, autentifikaciji, optimizaciji aplikacije sa modulima i kompilaciji offline i još mnogo toga. Na kraju – naučićeš kako da objaviš aplikaciju

Ovaj kurs će ti takođe pokazati kako da koristiš Angular CLI i izneseš cjelokupan projekat, koji ti omogućava da vježbaš  stvari koje si naučio tokom kursa! 

Angular je jedan od najmodernijih, u smislu performansi – efikasnih i moćnih frontend okvira koje možeš naučiti. On ti omogućava da kreiraš sjajne web aplikacije koje nude sjajno korisničko iskustvo!  

Ovaj kurs koristi TypeScript

TypeScript je glavni jezik koji zvanični Angular tim koristi i koji čini pisanje Angular aplikacija lakšim. Međutim, poznavanje TypeScripta nije obavezan uslov za slušanje kursa – osnovno poznavanje JavaScripta je dovoljno.

Prikaži više

Kome je ovaj kurs namjenjen?

  • Novajlijama kao i iskusnim frontend programerima zainteresovanim za učenje modernog JavaScript okvira
  • Studentima koji žele da nauče kako da prave interaktivne i brze veb aplikacije.
  • Svakome ko je zainteresovan da nauči izuzetno popularnu tehnologiju koju koriste vodeće tehnološke kompanije kao što je Google.
  • Studentima koji žele da svoje vještine veb razvoja podignu na viši nivo i nauče veoma popularnu tehnologiju.

Plan i program

  • Uvod u kurs 
  • Šta je Angular 
  • Angular vs Angular 2 vs najnovija verzija 
  • Podešavanje projekta i prva aplikacija 
  • Izmjene prve aplikacije 
  • Struktura kursa 
  • Kako izvući maksimum iz kursa? 
  • Šta je TypeScript?
  • Osnovno podešavanje projekta pomoću bootstrapa za stilizovanje
  • Uvod u modul 
  • Kako se učitava i pokreće aplikacija u Angularu
  • Komponente su važne 
  • Kreiranje nove komponente 
  • Razumijevanje uloge AppModule i Component Declaration
  • Korišćenje prilagodljivih komponenti  
  • Kreiranje komponenti sa CLI i ugniježdene komponente 
  • Rad sa obrascima komponenti 
  • Rad sa stilovima komponenti 
  • Potpuno razumijevanje birača komponenti 
  • (opciono) rješavanje zadatka 
  • Šta je povezivanje podataka? 
  • Interpolacija niza 
  • Povezivanje svojstava
  • Povezivanje svojstava vs interpolacija niza 
  • Povezivanje događaja (Event binding)
  • Proslijeđivanje i korišćenje podataka sa Event Binding
  • Dvosmjerno povezivanje podataka 
  • Kombinovanje svih načina povezivanja podataka 
  • (opciono) rješenje zadatka 
  • Razumijevanje direktiva 
  • Korišćenje ngIf za uslovno prikazivanje podataka 
  • Unapređenje nglg sa uslovom “else”
  • Dinamično stilizovanje elemenata sa ngStyle 
  • Dinamična Primjena CSS klasa sa ngClass
  • Prikazivanje lista sa ngFor
  • (opciono) rješenje zadatka 
  • Korišćenje ngFor za dobijanje indeksa
  • Uvod u projekat
  • Planiranje aplikacije 
  • Kreiranje nove aplikacije na ispravan način 
  • Podešavanje aplikacije 
  • Kreiranje komponenti 
  • Korišćenje komponenti 
  • Dodavanje menija za navigaciju 
  • Alternativni ne-kolapsabilni meni za navigaciju
  • Kreiranje modela “recepta”
  • Dodavanje sadržaja u komponente recepta 
  • Prikazivanje lista recepta sa ngFor
  • Prikaz detalja recepta 
  • Rad na komponentama šoping liste 
  • Kreiranje modela “namirnica” 
  • Kreiranje i prikaz šoping liste 
  • Dodavanje sekcije za ispravku šoping liste 
  • Rezime i naredni koraci
  •  
  • Razumijevanje poruka o greškama u Angularu 
  • Kod za ispravku u pretraživaču pomoću izvornih mapa
  • Uvod u modul 
  • Podjela aplikacije na komponente
  • Pregled svojstava i povezivanja događaja 
  • Povezivanje u prilagodljiva svojstva 
  • Dodjela alijasa prilagodljivim svojstvima 
  • Povezivanje u prilagodljive događaje 
  • Dodjela alijasa prilagodljivim događajima 
  • Prilagodljiva i svojstva i povezivanje događaja – rezime 
  • Razumijevanje enkapsulacije prikaza 
  • Više o enkapsulaciji prikaza
  • Korišćenje lokalnih referenci u obrascima 
  • @ViewChild u Angularu 8 
  • Pristupanje obrascu & DOM sa @ViewChild
  • Projektovanje sadržaja na komponente sa ng-content
  • Razumijevanje životnog ciklusa komponenti 
  • Udice životnog ciklusa u akciji 
  • Udice životnog ciklusa and pristup obrascima 
  • @ContentChild() u Angularu 8 
  • Pristupanje ng-content sa @ContentChild()
  • Rezime 
  • Vježba: Povezivanje svojstava i događaja i enkapsulacija prikaza 
  • (opciono) Rješenje zadatka
  • Uvod 
  • Dodavanje navigacije korišćenjem povezivanje događaja i nglf
  • Proslijeđivanje podataka o receptu korišćenjem povezivanja svojstava
  • Prislijeđivanje podataja korišćenjeme povezivanja događaja i svojstava (kombinovano)
  • Dozvoliti korisniku da dodaje namisrnice na šoping listu
  • Uvod u modul 
  • ngFor i ngIf rekapitulacija
  • ngClass i ngStyle rekapitulacija
  • Kreiranje Basic Attribute Directive
  • Korišćenje Renderera za izradu Basic Attribute Directive
  • Više o Rendereru
  • Korišćenje HostListener 
  • Korišćenje HostBinding 
  • Vezivanje za svojstva Directive
  • Šta se dešava iza kulisa – Structural Directive
  • Kreiranje Structural Directive
  • Razumijevanje ngSwitch

Kreiranje i korišćenje dropdown direktive

  • Uvod u modul 
  • Need services? 
  • Kreiranje usluge logovanja
  • Injecting usluge logovanja na komponente
  • Kreiranje Data Service
  • Razumijevanje hijerarhijskog injectora
  • Koliko bi trebalo da bude instanci Usluga? 
  • Injecting Usluga na Usluge
  • Korišćenje usluga za komunikaciju među komponentama
  • Opciono: rješenje zadatka
  • Uvod
  • Podesavanje servisa
  • Upravljanje receptima preko servisa
  • Koriscenje servisa za medjukomponentnu komunikaciju
  • Dodavanje servisa Shopping List
  • Koriscenje servisa za prosledjivanje podataka od tacke A do tacke B
  • Funkcionalnost: Dodavanje sastojaka u recepte
  • Prenosenje sastojaka iz recepata na listu za kupovinu (preko servisa)
  • Uvod u modul 
  • Zašto nam je potreban ruter?
  • Razumijevanje oglednog projekta
  • Podešavanje i pokretanje ruta
  • Navigacija sa linkovima ruta
  • Razumijevanje navigacionih puteva
  • Stilizovanje aktivnih linkova ruta 
  • Programska navigacija 
  • Korišćenje Relative Paths u programskoj navigaciji 
  • Proslijeđivanje parametara rutama
  • Pozivanje parametara ruta
  • Reaktivno pozivanje parametara ruta 
  • Važna napomena u vezi sa Route Observables 
  • Proslijeđivanje upitnih parametara i fragmenata 
  • Pozivanje upitnih parametara i fragmenata 
  • Vježbanje naučenog
  • Podešavanje Child (Nested) Routes 
  • Korišćenje upitnih parametara – vježba
  • Konfiguracija upravljanja upitnim parametrima
  • Redirecting i Wildcard rute 
  • Važno: Redirection Path Matching
  • Autsorsovanje konfiguracije rute
  • Uvod u Guards
  • Zaštita ruta sa canActivate
  • Zaštita CHild (Nested) Routes sa canActivateChild
  • Korišćenje lažnog servisa za autentifikaciju
  • Kontrolisanje navigacije sa canDeactivate
  • Proslijeđivanje statičnih podataka ruti
  • Rješavanje dinamičkih podataka sa resolve Guard
  • Razumijevanje startegija lokacije 
  • Rezime 
  • Planning the General Structure
  • Setting Up Routes
  • Adding Navigation to the App
  • Marking Active Routes
  • Fixing Page Reload Issues
  • Child Routes: Challenge
  • Adding Child Routing Together
  • Configuring Route Parameters
  • Passing Dynamic Parameters to Links
  • Styling Active Recipe Items
  • Adding Editing Routes
  • Retrieving Route Parameters
  • Programmatic Navigation to the Edit Page
  • One Note about Route Observables
  • Project Cleanup
  • Uvod u modul 
  • Instaliranje  RxJS
  • Analiza Angular Observables 
  • Bliži uvid u srž Observables
  • Kreiranje prilagodljive Observable
  • Greške 
  • Razumijevanje operatora
  • Subjekti 
  • Rezime
  • Improving the Reactive Service with Observables (Subjects)
  • Changed the Subscription Name
  • Uvod u modul 
  • Zašto nam je potrebna pomoć Angulara?
  • Pristup zasnovan na obrascu (TD) vs reaktivni pristup
  • Primjer forme
  • TD: kreiranje forme i registracija kontrola
  • TD: slanje i korišćenje forme 
  • TD: razumijevanje stanja forme 
  • TD: Pristupanje formi sa @ViewChild
  • TD: dodavanje validacije za provjeru unosa korisnika
  • Ugrađeni validatori i korišćenje HTML5 validacije 
  • TD: korišćenje stanja forme 
  • TD: kreiranje izlazne poruke o grešci pri validaciji 
  • TD: Podešavanje default vrijednosti sa ngModel Property Binding
  • TD: korišćenje ngModel sa dvosmjernim vezivanjem
  • TD: Grupisanje kontrola forme
  • TD: upravljanje radio dugmićima 
  • TD: podešavanje vrijednosti forme 
  • TD: korišćenje podataka forme 
  • TD: resetovanje forme 
  • Vježba – template-driven forms
  • Uvod u reaktivni pristup 
  • Reaktivni: podeđavanje 
  • Reaktivni: kreiranje forme u kodu 
  • Reaktivni: sinhronizovanje HTML i forme 
  • Reaktivni: slanje forme 
  • Reaktivni: dodavanje validacije 
  • Reaktivni: pristup kontrolama 
  • Reaktivni: grupisanje kontrola 
  • Otklanjanje greške
  • Reaktivni: FormArray
  • Reaktivni: kreiranje prilagođenih validatora 
  • Reaktivni: korišćenje kodova grešaka
  • Reaktivni: kreiranje prilagođenih asinhronih validatora 
  • Reaktivni: reakcija na promjene statusa ili vrijednosti 
  • Reaktivni: podešavanje vrijednosti 
  • Vježba 
  • Rješenje zadatka (opciono)
  • Introduction
  • TD: Adding the Shopping List Form
  • Adding Validation to the Form
  • Allowing the Selection of Items in the List
  • Loading the Shopping List Items into the Form
  • Updating existing Items
  • Resetting the Form
  • Allowing the the User to Clear (Cancel) the Form
  • Allowing the Deletion of Shopping List Items
  • Creating the Template for the (Reactive) Recipe Edit Form
  • Creating the Form For Editing Recipes
  • Syncing HTML with the Form
  • Fixing a Bug
  • Adding Ingredient Controls to a Form Array
  • Adding new Ingredient Controls
  • Validating User Input
  • Submitting the Recipe Edit Form
  • Adding a Delete and Clear (Cancel) Functionality
  • Redirecting the User (after Deleting a Recipe)
  • Adding an Image Preview
  • Providing the Recipe Service Correctly
  • Deleting Ingredients and Some Finishing Touches
  • Deleting all Items in a FormArray
  • Uvod i zašto su Pipes korisni
  • Korišćenje Pipes
  • Parametrizovanje Pipes
  • Gdje se može naučiti više o Pipes
  • Povezivanje više Pipes
  • Kreiranje Custom Pipe
  • Parametrizovanje Custom Pipe
  • Primjer: kreiranje Filter Pipe
  • Pure & Impure Pipes (ili: Kako “popraviti” Filter Pipe?)
  • Razumijevanje “async” Pipe
  • Uvod u modul 
  • Kako Angular komunicira sa bekendom?
  • Anatomija Http zahtjeva 
  • Bekend (Firebase) podešavanje 
  • Slanje POST zahtjeva 
  • GETting podaci 
  • Korišćenje RxJS operatora za trasformaciju Response podataka 
  • Korišćenje Types sa HttpClient
  • Outputting Posts
  • Prikaz indikatora Loading 
  • Korišćenje servisa za Http zahtjeve 
  • Zajednički rad servisa i komponenti
  • Slanje Delete zahtjeva 
  • Rješavanje grešaka
  • Korišćenje Subjects za rješavanje grešaka
  • Korišćenje catchError operatora 
  • Rješavaje grešaka % UX
  • Podešavanje hedera 
  • Dodavanje Query Params
  • Posmatranje različitih vrsta odgovora 
  • Promjena tijela forme odgovora 
  • Uvođenje Interceptors 
  • Manipulisanje objektima zahtjeva 
  • Interceptors odgovora 
  • Rekapitulacija
  • Uvod u modul 
  • Kako Angular komunicira sa bekendom?
  • Anatomija Http zahtjeva 
  • Bekend (Firebase) podešavanje 
  • Slanje POST zahtjeva 
  • GETting podaci 
  • Korišćenje RxJS operatora za trasformaciju Response podataka 
  • Korišćenje Types sa HttpClient
  • Outputting Posts
  • Prikaz indikatora Loading 
  • Korišćenje servisa za Http zahtjeve 
  • Zajednički rad servisa i komponenti
  • Slanje Delete zahtjeva 
  • Rješavanje grešaka
  • Korišćenje Subjects za rješavanje grešaka
  • Korišćenje catchError operatora 
  • Rješavaje grešaka % UX
  • Podešavanje hedera 
  • Dodavanje Query Params
  • Posmatranje različitih vrsta odgovora 
  • Promjena tijela forme odgovora 
  • Uvođenje Interceptors 
  • Manipulisanje objektima zahtjeva 
  • Interceptors odgovora 
  • Rekapitulacija
  • Module Introduction
  • Backend (Firebase) Setup
  • Setting Up the DataStorage Service
  • Storing Recipes
  • Fetching Recipes
  • Transforming Response Data
  • Resolving Data Before Loading
  • Fixing a Bug with the Resolver
  • Uvod u modul 
  • Kako funkcioniše autentifikacija 
  • Dodavanje Auth stranice 
  • Prelaz sa jednog na drugi Auth Mode 
  • Unos forme 
  • Priprema bekenda 
  • Postaraj se da imaš recepte u svom bekendu
  • Priprema zahtjeva za registraciju 
  • Slanje zahtjeva za registraciju 
  • Dodavanje Loading Spinner & Error Handling Logic
  • Poboljšano rješavanje grešaka 
  • Slanje zahtjeva za logovanje 
  • Rješavanje grešaka pri logovanju 
  • Kreiranje i čuvanje podataka o korisniku  
  • Reflektovanje Auth State u UI 
  • Dodavanje Tokena u Outgoing zahtjeve 
  • Dodavanje Tokena Interceptoru 
  • Dodavanje Logout opcije 
  • Dodavanje Auto-Login opcije 
  • Dodavanje Auth Guard
  • Rekapitulacija 
  • Korisni linkovi
  • Uvod u modul
  • Dodavanje Alert Modal Component
  • Razumijevanje različitih pristupa 
  • Korišćenje ngIf
  • Priprema Programmatic Creation
  • Kreiranje komponenti programski
  • Razumijevanje entryComponents
  • Data Binding & Event Binding
  • Rekapitulacija
  • Uvod u modul 
  • Šta su moduli? 
  • Analiza AppModule
  • Uvod u Feature Modules
  • Ispravno razdvajanje modula 
  • Component Declarations
  • Feature modul Šoping lista 
  • Razumijevanje Shared modula 
  • Razumijevanje Core modula 
  • Dodavanje Auth Feature modula 
  • Razumijevanje Lazy Loading
  • Implementacija Lazy Loading
  • Više Lazy Loading
  • Pred-učitavanje Lazy-Loaded koda 
  • Moduli i servisi 
  • Drugačije učitavanje servisa 
  • Korisni linkovi
  • Uvod u modul 
  • Priprema & koraci za primjenu 
  • Korišćenje Environment Variables
  • Primjena Angular aplikacija 
  • Primjeri primjene:Firebase Hosting
  • Server Routing vs Browser Routing
  • Uvod u modul 
  • Startovanje podešavanja & zašto želimo Standalone komponente 
  • Kreiranje prve Standalone komponente
  • Standalone Directives & Connecting Building Blocks
  • Spajanje sa dodatnom komponentom 
  • Standalone Root komponente
  • Services & Standalone komponente
  • Rutiranje sa Standalone komponentama
  • Lazy Loading 
  • Rekapitulacija
  • Uvod u modul 
  • Šta je stanje aplikacije? 
  • Šta je NgRx? 
  • Početak sa Reducers
  • Dodavanje logike Reducer-u
  • Razumijevanje i dodavanje aktivnosti 
  • Podešavanje NgRx Store
  • Odabir stanja  
  • Dispatching Actions
  • Višetruke akcije 
  • Priprema ažuriranja i brisanje akcija 
  • Ažuriranje i brisanje sastojaka 
  • Širenje stanja 
  • Upravljanje sa više stanja kroz NgRx 
  • Uklanjanje suvišnog upravljanja stanjem komponenti 
  • Prva rekapitulacija & čišćenje 
  • One Root stanje 
  • Podešavanje Auth Reducer-a & akcija 
  • Dispatching Auth Actions
  • Autentifikacija završena (za sada…) 
  • Važna napomena o akcijama 
  • Istraživanje efekata NgRx
  • Definisanje prvog efekta 
  • Rješavanje efekata i grešaka 
  • Logovanje kroz NgRx efekte 
  • Upravljanje UI stanjem u NgRx
  • Finalizacija efekta logovanja
  • Priprema drugih Auth akcija  
  • Dodavanje registracije 
  • Dodatni Auth efekti 
  • Dodavanje Auto-Login sa  NgRx
  • Dodavanje Auto-Logout
  • Finalizacija Auth efekata 
  • Korišćenje Store Devtools
  • Router Store
  • NgRx za recepte – početak 
  • Preuzimanje podataka za recept
  • Preuzimanje recepata i korišćenje Resolvera 
  • Ispravke Auth Redirect
  • Ažuriranje, brisanje i dodavanje recepata 
  • Čuvanje recepata pomoću efekata 
  • Rekapitulacija 
  • Alternativna NgRx sintaksa
  • Korisni linkovi
  • Uvod u modul 
  • Angular Universal & ModuleMapLoader
  • Dodavanje Angular Universal
  • Dodavanje Angular Universal sa NestJS
  • Primjena Universal aplikacija 
  • Dodavanje NodeJS servera 
  • Pre-renderovanje aplikacije na serveru 
  • Naredni koraci
  • Uvod
  • Podešavanje početnog projekta 
  • Triggers & State animacija
  • Prelazak sa jednog stanja na drugo 
  • Tranzicije 
  • Napredne tranzicije 
  • Faze tranzicije 
  • “Void” stanje 
  • Korišćenje Keyframes za animacije 
  • Grupisanje tranzicija 
  • Korišćenje Animation Callbacks
  • Uvod u modul 
  • Dodavanje randih stanica 
  • Keširanje aseta za upotrebu oflajn
  • Keširanje dinamičkih aseta & URL
  • Korisni linkovi
  • Uvod 
  • Zašto Unit Tests?
  • Analiza podešavanja za testiranje 
  • Testiranje (sa CLI)
  • Dodavanje komponenti i odgovarajućih testova
  • Testing Dependencies: komponente i servisi 
  • Simulacija Async zadataka
  • Korišćenje “fakeAsync” i “tick” 
  • Izolovani vs ne-izolovani testovi
  • Uvod u modul 
  • Bliži uvid u “ng new”
  • IDE & podešavanje projekta
  • Razumijevanje Config fajlova 
  • Važne CLI komande 
  • “Angular.json” fajl – bliži uvid
  • Šema angulara – Uvod 
  • “ng add” komanda 
  • Korišćenje prilagodljive “ng generate” šeme 
  • Glatko ažuriranje projekata sa “ng update”
  • Pojednostavljena primjena sa “ng deploy”
  • Razumjevanje “Differential Loading”
  • Upravljanje sa više projekata u jednom folderu 
  • Biblioteke Angulara – Uvod 
  • Rekapitulacija
  • Uvod u modul 
  • Šta i Zašto? 
  • Instaliranje i korišćenje TypeScript
  • Base Types & Primitives
  • Array & Object Types
  • Type Inference
  • Rad sa Union Types
  • Dodjela Type Aliases
  • Više o funkcijama & tipovima funkcija 
  • Razumijevanje osnova 
  • Classes & TypeScript
  • Rad sa interfejsom
  • Konfiguracija TypeScript kompajlera
PREDAVAČ
Edukativna online platforma
Edukativna online platforma

Još kurseva od ICT Cortex

Kurs info

Datum početka: 20.03.2024.
Datum završetka: 01.06.2024.
Cijena kursa: Besplatno
Sertifikovan: Ne
Naziv: Angular - Kompletan vodič
front-end-programiranje
Angular - Kompletan vodič
ICT Cortex

Help desk

HR Platforma

Registar članica