Saturday-Sunday, 5 weeks (36 hours).
Schedule & Enrollment
Course duration and schedule: Duration of the course is 36 astr. hours total. Training will be conducted in 5 weekends (Saturday and Sunday, 9 days), 4 astr. hours each day.
The course provides in-depth study of state-of-the-art ECMAScript 6, 7, 8 & 9, TypeScript and MV* Angular 7 framework for rapid development of modern, component-based, mobile-first, responsive single-page applications that are easy to extend and maintain in long run. Angular builds on success of AngularJS web application development framework, but is significantly more efficient (up to 10-15 times faster for big number of updated components), streamlined, elegant and easy to learn.
The covered topics include:
- Introduction to TypeScript – functions, interfaces, classes and constructors. Common types: Boolean, Number, String, Array, Enum, Any, Void. Duck typing. Declaring contracts using Interfaces – properties and optional properties, function types, class types, array types, hybrid types, extension of interfaces. Classes – constructors, public/private properties, get and set accessors, static and instance sides. Functions and function types – optional default and rest parameters, function lambdas and use of this, overloads. Using Enums. Modules in TypeScript – namespaces and modules (former internal and external modules), using import, export and require. Interoperability with external JS libraries – ambient type declarations and ambient modules. Module resolution. Generic type parameters – writing generic functions and classes, generic constructors, bounded generics. Type inference and type compatibility. Declaration merging. Decorators. Configuring, building and deploying TypeScript project – typings for npm packages, compiler options. Integration with build tools – npm, webpack. (4 h.)
- Introduction to Single Page Applications (SPA) development using Angular and TypeScript – using Model-View-Controller (MVC), Model-View-Presenter (MVC), Model-View-ViewModel (MVVM) – MV* patterns for development of more complex, extensible and easy to maintain web applications. Using Visual Studio Code. Creating Angular Hello World Application. Web components. Data binding. Data architecture in Angular – overview, main types of components: Module, Component, Template, Metadata, Data Binding, Service, Directive, Dependency Injection. Component controllers, views & templates – syntax for defining templates for model data visualization, property bindings, class & style property bindings, event bindings, component styling. Using external template and style files. Using Angular Command Line Interface (CLI) to setup Angular project and add application components. Angular by example – building from scratch Products Manager sample application. (4 h.)
- Displaying data using template interpolation and built-in directives: NgModel, NgFor, NgIf, NgSwitch, NgStyle, NgClass. Handling user input – binding event handlers, getting data from the $event object, using local template variables, event filtering, handling multiple events. Building forms – two-way data binding: [(ngModel)], change tracking, validation, and error handling: ngControl, providing custom styles for different control states, resetting and submitting forms, edit/display forms. Using NgForm, NgControlName, NgFormControl, NgControlGroup, and NgFormModel directives to bind a domain model to the form. Reactive Forms using FormBuilder. Organizing FormControls using FormGroups and FormArrays. Using form validators – RequiredValidator, MaxLengthValidator, MinLengthValidator, PatternValidator directives and Validators class. Building custom validator directives by implementing Validator interface. Building asynchronous form validators. (4 h.)
- Angular services. Building custom services. Understanding Dependency Injection (DI) – DI using constructors, Angular DI framework, configuring the injector, registering providers in components, declarative and programmatic dependency injection, injecting service dependencies in a service using @Injectable decorator, registering custom providers using provide function, dependency injection tokens. Using hierarchical injectors. Demos and exercises. (2 h.)
- Angular template syntax in depth – interpolation and template expressions. Expression writing guidelines: no visible side effects, quick execution, simplicity, idempotence. Template statements, statement guidelines. Binding syntax and semantics. Difference between HTML attributes and DOM properties. Binding targets – properties, events, attributes, classes and styles. Examples for different types of bindings. Emitting custom events with EventEmitter. Built-in directives in depth, * and tags. Local template variables. Input and output properties – using @Input and @Output decorators. Aliasing input and output properties. Template expression operators – pipe ( | ) and Elvis ( ?. ). Data bindings modification using built-in pipes – date, lowercase, uppercase, number, percent, currency, slice, async, json pipes. Building custom pipes. (2 h.)
- Routing and navigation in Angular single page applications – setting the base href and importing ‘@angular/router’ module. Configuring a router using RouterModule.forRoot() /forChild() with Routes – paths and components. Building Routing Components – injecting Router service, providing router outlets using RouterOutlet directive, link parameters array that propels router navigation, navigating by user clicks – data-bound RouterLink directive, programmatic navigation using Router service, toggling css classes for the active link, embedding important information in the URL with route parameters, adding child routes under a feature section, using wild-cards, redirecting from one route to another, matching strategies (prefix vs. full), using empty-path route configurations, setting default routes, using multiple named outlets, componentless routes. Accessing information about activated route using ActivatedRoute service – Observable params, data and resolves vs. non-observable (snapshot) alternative. Confirming or canceling navigation with guards – CanActivate CanDeactivate. Persisting information across routes with global query parameters. Choosing between “HTML5” (history.pushState) and “hash” (“#”) URL styles for SPA navigation. (4 h.)
- Angular HTTP client and RxJS. Asynchronous data requests (AJAX) using XMLHttpRequest (XHR) and JSONP. Same origin policy and CORS. Injecting HTTP / JSONP services. Building simple JSON-based CRUD REST(-like) application – Product Manager HTTP Client. JSONP cross-origin requests – Wikipedia Search form demo. Smoother user experience using reactive event streams processing with RxJS Observables. Observables, Subscribers, Subjects. Conversion to Promises. Composing functional operators for event stream transformation – RxMarbles examples. IPT Reactive WebSocket implementation – exposing it as Angular service. (4 h.)
- Advanced Angular topics – writing custom attribute and structural directives. Component lifecycle and use of custom lifecycle hooks: ngOnInit, ngOnChanges, ngDoCheck, ngOnDestroy, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked. Usage examples. Accessing component’s ViewChildren and ContentChildren using @ViewChild, @ViewChilderen, @ContentChild, @ContentChildren decorators. Understanding difference between using viewProviders and providers component configuration option. Shadow DOM and Angular view encapsulation modes – ViewEncapsulation.None, ViewEncapsulation.Emulated and ViewEncapsulation.Native. (2 h.)
- Angular Redux (ngrx) – using Reactive Extentions for Angular (ngrx) to build large web apps with predictable state management. Flux and Redux design patterns. Redux main components – Actions, Action Creators, Reducers, Store. Interaction between Redux components. Using Redux devtools Chrome extension. (4 h.)
- Fetching data using GraphQL (Apolo). Introduction to GraphQL – queries, mutations, fragments, variables, directives, schemas and types. Using Apollo Client – Redux-based, flexible, production-ready, fully-featured GraphQL client for Angular platform. Angular – Apolo integration: queries and mutations, getting updates from the server, controlling the Store, multiple clients. Recipies for authentication, pagination, optimistic UI, using fragments, prefetching data, integrating with Redux, server-side rendering, defining proxy configuration with Angular CLI, Ahead-of-Time Compilation (AOT), Webpack integration. Using apollo-client-devtools Chrome extension. (4 h.)
- Angular animations – quick-start example, states and transitions, entering and leaving from different states, animatable properties and units, automatic property calculation, animation timing, multi-step animations with keyframes. (2 h.)
During the workshop participants will get practical experience using Angular TypeScript framework and Angular CLI for building single page applications. Training is conducted in small groups – up to 10 participants. There will be opportunity for discussion of additional questions the participants are interested in.
For more information, please send us an e-mail at: firstname.lastname@example.orgSchedule & Enrollment