fbpx

Angular-ის კურსის მენტორი

ანნა მოციქულაშვილი

Angular დეველოპერი

დაამთავრა ელექტრო და კომპიუტერული ინჟინერიის ფაკულტეტი. 2020 წლიდან არის ვებ დეველოპმენტის სფეროში. ამჟამად მუშაობს სასწავლო სისტემების მართვის ბრიტანულ კომპანიაში, ანგულარ დეველოპერის პოზიციაზე. 

გერმანიაში იულიხის კვლევით ცენტრში იყო სტაჟიორი. მოხვდა Women in Tech-ის დაფინანსებაში, ანგულარის კურსზე. მონაწილეობას იღებდა ჯიტას გადამზადების კონკურსში – Blockchain Development. სერტიფიკატი აიღო Blokchain Training Alliance-ის საერთაშორისო გამოცდაში – “Certified Blockchain Developer – Ethereum” .

გიორგი კვირიკაშვილი

დაამთავრა შავი ზღვის საერთაშორისო უნივერსიტეტი, ბაკალავრიატი, კომპიუტერული მეცნიერებების განხრით. ამჟამად დასაქმებულია კომპანია Singular-ში, Senior Front End დეველოპერის პოზიციაზე.

მუშაობს Angular-ზე და ამ ფრეიმვორქზე ქმნის პროდუქტებს და პროგრამულ უზრუნველყოფას.

Angular-ის კურსის სილაბუსი

Workshop 1

  • Angular Introduction
    • What is Angular?
    • Why Angular?
    • Central Features
  • GIT & NodeJS
    • Installation (GIT)
    • Commands (GIT)
    • GitHub basic review 
    • Basic intro (NodeJS)
    • Set up/cloning a project
  • Typescript
    • Introduction
    • TS vs JS (general concepts)
    • Types System (defining variables, arrays)
    • Classes & Interfaces
  • Angular
    • CLI
    • NPM & Installation
    • Create angular app
    • Architecture, file-level review
    • Semantic Version Numbering
    • Install/Remove/Update dependencies, packages
  • Basic examples of working with component (app component)
  • Modules

Workshop 2

  • Component Class
  • Adding a Component to its module
  • Design Patterns comparison: MVVM, MVC, MV*
  • Decorator: Module
    • Properties
    • Bootstrapping app
    • Root module
  • Creating a Component Using Angular CLI
  • Decorator: Component
    • Metadata properties (incomplete):
      • providers
      • selector 
      • styleUrls
      • styles
      • template
      • templateUrl
  • Component Template Development:
    • Play with HTML selectors
    • Add styling
  • The Application Root Component
  • Angular (Component) Lifecycle Hooks: OnInit, OnDestroy, DoCheck (incomplete)
  • Nesting
  • Data Binding
    • One-way
    • String interpolation
  • Property Binding
    • Example with different selectors (input, button etc.)
  • Event Binding
    • click, change etc.
  • Encapsulation
  • Use of Local Reference in Templates (HTMLInputElement, ViewChild Decorator, ElementRef etc.)
    • Lifecycle hook: AfterViewInit
  • Decorator: @Input() and @Output()
    • Lifecycle hook: onChanges

Workshop 3

  • Data Binding
    • Template Reference variables
    • Two-way with ngModel
    • HTMLInputElement, ViewChild Decorator, ElementRef.
  • Lifecycle hook: AfterViewInit
  • Event Binding
    • Custom
  • Encapsulation
  • Decorator: @Input() and @Output()
    • Lifecycle hook: onChanges
    • Parent-child & Child-parent component based communication
    • EventEmitter

Workshop 4

  • Definition of Directives
  • *ngFor, *ngIf, *ngSwitch
  • *ngClass, *ngStyle
  • Custom directives – workshop
  • Pipes angular – workshop
    • Decorator: @Pipe
    • String pipes: UpperCase, LowerCase, titlecase, slice: number, json
    • Nuber pipes: number: ‘1.2-3’ || ‘3.4-5’
    • Currencty, percent
    • Custom Pipes

Workshop 5

  • Dependency Injection as a design pattern
  • Services
  • Decorator: Injectable; 
  • Providers
  • Hierarchal DI
  • Workshop using services

Workshop 6

  • Organizing application
  • Navigation 
    • routerLink
    • routerLinkActive
  • Define/Register Router and Routes
  • Router outlet
  • Wildcard route, redirects
  • RouterModule.forRoot() & forChild()
  • Routing Module:
    • Code refactoring (if possible)
    • Modules import order
  • Route Parameters & activated Route
  • Location strategies

Workshop 7

Build: Log In page

  • Introduction, review of two approaches.
  • Common form classes
  • Form build example
  • Data flow 
    • Naming control elements
    • Control states (with visual representation)
  • Access form status = submit / reset
  • Validations on TD forms
  • Custom validators

Workshop 8

Build: TODO app

  • Introduction
  • Benefits
  • Form build example 
  • FormGroup & FormControl
  • Grouping form controls
  • Nested group
  • Updating data model
    • SetValue
    • PatchValue
  • FormBuilder service
  • Validating 
    • Custom validators
  • Dynamic forms
  • StatusChanges &  ValueChanges

Workshop 9

Build: 

  • RxJS introduction 
  • HTTP Requests 
  • HttpClient
  • Adjusting Request Headers
  • CRUD operations
  • Work with data 
  • Catching Errors & other status codes

Workshop 10

  • Catching Errors & other status codes
  • Interceptors // maybe move to W11
  • RxJS operators
    • Pipe
    • Map
    • Tap
    • Filter
    • SwitchMap
    • MergeMap
    • ConcatMap
    • exhaustMap
    • take takeUntil
    • throwError catchError

Workshop 11

Build: App with login page (use previously made form)

  • Authentication
  • JSON Web tokens
  • Interceptors – modifying requests
  • Router Guards
    • CanActivate
    • CanActivateChild
  • Resolvers
  • Lazy Loading modules

Workshop 12

  • Adding firebase to the project
  • Move data to FireStore
  • Angular Project Environment
  • Environment variables
  • How to deploy project on production: review ./dist folder