Курс Angular + TypeScript (6-то издание)

Съботно-неделен, 5 седмици (36 часа). Цена: 450 лева.

Траян Илиев - Certified Java SE 6 Programmer

Тренингът се води от Траян Илиев, Oracle® и OMG® сертифициран разработчик на софтуер с 15+ години опит като преподавател за компании като VMware, Software AG, Telenor и др. Траян има множество презентации на международни конференции за разработчици: Voxxed Days, jPrime, jProfessionals, BGOUG, BGJUG на теми като Angular, Ionic, React, Redux, SOA & REST, high-performance reactive JavaScript & Java programming.

График и записване

Целева аудитория: JavaScript разработчици с практически опит

График и продължителност на курса: Продължителността на курса е 36 астрономически часа и ще се проведе в рамките на 5 седмици – 9 занятия по 4 ч.  в събота и неделя.

Описание на курса:

Курсът осигурява задълбочени практически познания и опит с актуалните ECMAScript 6 & 7, TypeScript и Angular  платформа за  бърза разработка на модерни, компонентно-базирани, mobile-first, responsive single-page applications (SPA), които са лесни за разширяване и поддръжка в дългосрочен план.  Angular надгражда успеха на AngularJS платформата за разработка на уеб приложения, но е значително по-ефикасен (10-15 пъти по-бърз при голям брой уеб компоненти) , опростен, елегантен и лесен за усвояване.

Курсът включва следните теми:

  1. 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.)
  2. 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 2 – 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 2 project and add application components. Angular 2 by example – building from scratch Products Manager sample application. (4 h.)
  3. 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.)
  4. 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.)
  5. 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.)
  6. 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.)
  7. Angular HTTP client and RxJS. Asynchronous data requests (AJAX) using XMLHttpRequest (XHR) and JSONP. Same origin policy and CORS. Injecting ng2 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.)
  8. 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 2 view encapsulation modes – ViewEncapsulation.None, ViewEncapsulation.Emulated and ViewEncapsulation.Native. (2 h.)
  9. 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.)
  10. 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.)
  11. 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, parallel animation groups. (2 h.)

По време на курса участниците получават практически опит при използване на Angular платформа и Angular CLI за изграждане на single-page приложения. Обучението се провежда в макли групи -до 10 участника. Възможно е да бъдат дискутирани и допълнителни въпроси от интерес за участниците.


. pdfПреглед на програмната на курса в PDF формат.

За повече информация и въпроси ни пишете на  e-mail: office@iproduct.org

График и записване