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 fol