Angular Certification training - e-learning & certificate (Ohjelmointi)

Angular Certification Training

This certification course in Angular will help you master front-end web development with Angular. Gain in-depth knowledge of Angular concepts, such as facilitating single-page web application development, dependency injection, typescript, components, directives, pipes, forms, routing, and testing.

Offer: In addition to this hands-on e-learning course, we offer you free access to our online classroom sessions. You have 90 days to book free online training sessions, which are always held during flexible times. In addition to your e-learning and if you wish, you will have the opportunity to have interaction with the trainer and other participants. These online classroom sessions will also be recorded, so you can keep them.

What is included?

• 50 hours of blended learning
• 20 hours of online self-study
• 30 hours of instructor-led training
• Free introductory course in JavaScript
• Flexibility to choose classes
• Industry-recognized certificate of completion

Target audience

• UI developers
• Technical project managers
• Full-stack web developers
• Quality assurance specialists
• Architects
• Students who want to learn front-end UI development

Goals of the training

• Understand the design of single-page applications and how Angular facilitates their development
• Separate the model, view and controller layers of your application and implement them with Angular
• Master Angular expressions, filters and scopes
• Building Angular forms and writing Angular directives
• Unit test and end-to-end test your Angular applications
• Develop interactive and dynamic user interfaces with Bootstrap

Details and criteria for certification

• Complete at least 85 percent of the course or participate in a full batch
• Successful implementation and evaluation in the project

Program

Lesson 01 - Single-page applications

• Overview of the course
• Introduction to Single Page Applications (SPA)
• What do we need Angular for
• Setting up the development environment
• Architecture of Angular applications
• First Angular app

Lesson 02 - TypeScript and ESNext

• Module Introduction and Introduction to TypeScript
• Configuring the environment to write TypeScript
• Variable declarations (var, let and const)
• Types - primitives
• Types - reference and special types
• Operators - propagation and backticks
• Operators - Destructure and Rest
• Classes
• Interfaces
• Functions for arrows
• Modules
• Fetch
• Async or await

Lesson 03 - Decorators

• Introduction to the module and an overview of Angular modules
• What are decorators?
• Angular modules and @NgModule Decorator
• Statements
• Input and output
• Providers, bootstrap and input components
• Bootstrap mechanism for Angular applications

Lesson 04 - Component Decorator

• Introduction to the module
• Angular components and @Component Decorator
• Creating an Angular component with Angular CLI and on StackBlitz
• Metadata for component decorators
• Encapsulation view - Emulated, ShadowDom, None
• Data Binding - Character String Interpolation - {{ }}
• Property binding - []
• Event binding - ()
• Property decorators @Input and @Output
• Two-way data binding - [()]
• Attribute binding - [attr.]
• Class binding - [class.]
• Class binding - [style.]
• Introduction to lifecycle hooks in Angular
• Using lifecycle hooks in Angular
• Query view - child view, child view, child content, child content view
• Changing the detection mechanism in Angular. ZoneJS, NgZones

Lesson 05 - Routing with Angular

• Introduction to routing
• Implementing routing in an Angular app
• Creating a user list. Laying the foundation for Child routing
• Abstracting the user link to a separate component
• Implementing routing for children
• Path matching and route types
• Introduction to route protection in Angular
• CanActivate and CanActivateChild protections in Angular
• Deactivating protections in Angular
• Getting data in advance for a component with Resolve

Lesson 06 - Injecting dependencies

• Introduction to the section
• DI as pattern, DI as framework and types of providers
• Hierarchical injection of dependencies
• Introduction to services in Angular
• Retrieving data from a Rest API with HttpClient
• CRUD operations with HttpClient, HttpParams and HttpHeaders
• Observables and operators in Observables - Map, Retry, Catch
• Behavioral topics and sharing data using behavioral topics

Lesson 07 - Deep Dive into Directives

• Introduction to sections
• Introduction to directives
• Built-in structural directives
• Built-in directives for attributes
• Creating custom attribute directives
• Creating custom structural directives
• Introduction to Pipes in Angular
• Using built-in pipes
• Creating custom pipes in Angular
• Clean and unclean pipes in Angular
• Decorators in Angular
• Building custom decorators in Angular
• Building a custom decorator for lifecycle hook class loggers
• Building a custom property decorator in Angular

Lesson 08 - Forms in Angular

• Introduction to sections
• Types of strategies for building forms in Angular
• Quickly creating long Bootstrap forms using VS Code with Emmet
• Adding form control(s) to a template-driven form with the ngModel directive
• Get the JavaScript object representation of a form with the ngForm directive
• Disable the submit button on a form with the form's $invalid flag
• Get the JavaScript object representation of a form in the TypeScript class
• Adding checkbox, radio buttons and drop-down list to a template-based form
• Creating subsections in the form using the NgModelGroup directive
• Steps to implement a reactive form in Angular
• Quickly create a Bootstrap form for our reactive form using Emmet
• Create a reactive form in the TypeScript class and link it to the template
• Add validations to a reactive form
• Dynamically add or remove FormControl(s) or FormGroup(s) using FormArray(s)
• Add synchronous custom validations to your Reactive Form
• Add Assync custom validations to your Reactive Form
• Resetting the value of a form

Lesson 09 - Using third-party libraries

• Introduction to the section
• Creating an Angular CLI project with SCSS as the base style
• Introducing Material Design Bootstrap in your Angular CLI project
• Adding a navigation bar to the header
• Adding buttons to Material Design
• Adding maps
• Using Material Design dropdowns and form entries
• Introducing Angular Material in your Angular CLI project on top of the MDB
• Adding radio buttons, slider, slider, progress bar and spinner Introduction to Firebase
• Creating an app using the Firebase console
• Configure your Angular CLI project to support Firebase
• Interacting with the Firebase real-time database via methods on AngularFireList
• Add data to and read data from the real-time database in Firebase
• Update and delete data from the real-time database in Firebase

Final project

Build a web app for product lists in Angular. Implement CRUD functionality in Angular and build an Angular app with the following features:

• Product form
• Product list
• View, delete and edit products from the list