Angular Training in Bristol, United Kingdom

Learning Objectives

Here you will learn about Single Page Application vs Multi Page Application, and the pros and cons of SPA vs MPA. Understand the developer experience delivered by angular tooling and get a high-level overview of the framework and its community. 

• History of Angular 
  
• The leap from AngularJS to Angular 
• Desktop Application class User Experience 
• Productivity and Tooling 
• Performance 
• Community 
• Full-featured Framework 
• Supported Browsers (Angular 11) 
• Platform for Targeting Native Mobile not just Web Browsers 

Learning Objectives

TypeScript is integral to building apps using Angular. While developers can use ECMAScript 6 and above to build Angular apps, TypeScript has become the de facto lingua franca for writing efficient, error resilient Angular applications. It is therefore imperative that you learn TypeScript before diving into Angular itself and this module will bring you to speed with everything you need to know on it. 

Topics 

• Introduction 
• What is Typescript 
• Why Typescript 
• Setup and installation 
• IDE support 
• Scoping using let and const Keywords (ES6) 
• Template Literals (ES6) 
• Rest and Spread Parameters (ES6) 
• Destructuring (ES6) 
• Introduction to Types 
• Type inference 
• Type Annotations 
• Number 
• Boolean 
• String 
• Array 
• Tuple 
• Enum 
• Any 
• Void 
• Null and Undefined 
• Never  
• Introduction to Functions 
• Using types in functions 
• Function as types 
• Optional and default parameters 
• Arrow functions 
• Introduction to Classes 
• Inheritance 
• Access modifiers 
• Getters and setters 
• Read-only & static 
• Introduction to Interfaces 
• Optional properties and methods 
• Strict structural contract 
• Extending interface 
• Implementing interface 
• Introduction to Modules 
• Import / Export 
• Default 
• Decorators 

Hands-on 

• Create variables using let and const, create multi-line strings with template literals, use spread and rest operators with functions, pull values for arrays and objects using destructuring. 
• Create variable with different TS supported data types. 
• Create functions with mandatory, optional and default parameters. Create arrow functions. 
• Create classes with properties, methods, and accessors. Implement inheritance. 
• Create an interface and use it to validate object shapes. Implement interfaces in classes. 
• Create modules and import them into other modules. 

Learning Objectives

Upon completion of this module, you will know how to setup Angular CLI and create a new project in the command-line tool. You will also gain insight into the project structure and the significance of the project files. Also, experience the debugging of your angular app in visual studio code and learn how to view runtime information with the augury chrome extension. 

Topics

• Angular CLI 
• Anatomy of the project 
• Setting up a workspace 
• Updating Angular apps using ng update 
• Adding support for external libraries using ng add 
• Debugging Angular apps 
• Working with Augury 
• Using the Angular Language Service with Microsoft VSCode

Hands-on 

• Create a new angular CLI project using angular CLI, execute, and debug.

Learning Objectives

Upon completion of this module, you will get a bird’s eye view of angular and its programmable members. This module lays the foundation for the entire course. 

Topics 

• Modules 
• Components 
• Templates 
• Metadata 
• Data binding 
• Directives 
• Services 
• Dependency injection 
• Angular Ivy 

Learning Objectives

Grasp the significance of the angular module system, and gain an insight into why modules are needed, how we create modules, and about the different kinds of modules. 

Topics 

• Why modules 
• How to create modules 
• Built-in modules 
• Root Module 
• feature module

Hands-on 

• Create a feature module and import feature module into a root module. 

Learning Objectives

Know the significance of components and learn to create a component with different ways of attaching templates and styles. 

Topics

• Introduction 
• @Component decorator 
• Component configuration object 
• Custom components 
• Component with templates 
• Inline 
• External 
• Component with Styles 
• Inline 
• External 
• Angular Elements 

Hands-on

Create a component with inline and external templates and styles, create components manually, and with cli, also apply component composition by using a component in another component.

Learning Objectives

Learn what the angular templating syntax and explore the powerful data binding features.

Topics

• HTML as template 
• Data binding

Learning Objectives

• Property Binding 
• Event Binding 

Topic

• Two-way binding 
• Template expressions 
• Template syntax 
• Attribute, class, and style bindings 
• @Input() 
• @Output 
• Template reference variables 
• Safe navigation operator 

Hands-on

Use different data binding syntax in the template, implement property binding with @Input and custom event binding with @Output binding, create template reference variables, and use them in the template.

Learning Objectives

Experience the power of Angular directives and the different kinds of directives supported in Angular. 

Topics

• Introduction 
• Built-in directives 
• Structural directive 
• NgIf 
• NgFor 
• NgSwitch 
• Attribute directive 
• NgClass 
• NgStyle 
• NgModel 

Hands-on

Implement iteration and conditional rendering in a template using structural directives and implement dynamic styling with attribute directives.

Learning Objectives

Understand Angular data transformation capabilities using pipes. 

Topics:

• Introduction 
• Built-in pipes 
• @Pipe decorator

Hands-on

Use currency, date, json, and other pipes to transform data. Apply the built-in pipes in transforming data in the classroom course project. 

Learning Objectives

Learn how to develop forms in template-driven and reactive form styles along with form validation techniques. 

Topics

• Introduction 
• @angular/forms library 
• Template-driven forms 
• Form and field validation 
• Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid 
• Show and hide validation error messages 
• Form submission with ngSubmit 
• Reactive/ Model drive forms 
• ReactiveFormsModule 
• FormGroup, FormControl classes 
• FormBuilder for easy form building 
• Validations using Validators 
• Setting form model using setValue and patchValue 
• Use FormArray to build repeated from controls or form groups 

Hands-on 

Develop forms in both template and reactive forms along with validation. Also, you will code form with the most commonly used controls like textbox, drop-down lists, checkboxes, radio buttons, buttons. 

Learning Objectives

Understand the significance of dependency injection in angular and the different kinds of provider types in Angular. 

Topics

• Introduction 
• Why DI 
• @Injectable decorator 
• Custom service development 
• Registering the service with NgModule using providers key 
• Provider Types 
• Class 
• Factory 
• Value 

Hands-on 

• Develop services and provide them as dependencies for components. 
• Provide component at self, parent, and root levels. Create 3 different types of providers.

Learning Objectives

Learn how to implement navigation in angular and protect routes with route guards. 

Topics

• Introduction 
• @angular/router library 
• Configure routes 
• RouterModule.forRoot and RouterModule.forChild 
• RouterOutlet, RouterLink, RouterLinkActive 
• Nested Routes 
• Parametrized routes 
• Route guards 

Hands-on 

• Develop a navbar component that provides routing for application. 
• Use route configuration at the root module and feature module level and protect routes with guards. 

Learning Objectives

Gain insight into observable patterns and implementation in javascript using rxjs library. 

Topics

• Introduction 
• Why RxJs 
• Observable interface 
• Streams 
• Operators 
• Subscription 
• Subject 
• Schedulers 

Hands-on 

• Create and use observables and operators. 

Learning Objectives

Learn how to consume remote API using an HTTP client and understand the power of interceptors for better error handling. 

Topics

• Setup installing the module 
• Making a request for JSON data 
• Type checking the response 
• Error handling 
• Sending data to the server 
• Making a POST request 
• Configuring other parts of the request 

Hands-on 

• Create a service that uses HTTP Client to make CRUD operations. 
• Add headers to requests and handle errors.

Learning Objectives

Gain an interesting insight into some of the most interesting features of Angular that help boost productivity, performance and more. 

Topics

• Creating Libraries 
• Angular Material Essentials 
• Lazy Loading 
• Customizing the Angular CLI using the Builder API 
• Server-Side Rendering with Angular Universal 
• Working with Service Workers 
• Building a Progressive Web App 

Hands-on 

Create a progressive web app (PWA) which uses Angular Material 

Learning Objectives

Learn to write unit test cases to test components, services, and pipe. 

Topics

• Introduction 
• Testing in Typescript 
• Testing Component 
• Testing Service/Provider 
• Testing Pipe 

Hands-on

Unit test a component, service, and custom pipe.

Learning Objective 

Understand the differences between JIT compilation and AOT compilation and how to deploy angular applications. 

• Manually 
• Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code) 
• Deployment Platforms for Angular Apps

Hands-on 

Demonstrate how to run AOT build and deploy an Angular app to Vercel Now using ng-deploy-vercel

Learning Objective 

One of the key features of our course is the opportunity to work on fun projects during the program followed by two production-grade capstone projects at the end.  

The project is based on real-life scenarios and carried-out under the guidance of industry experts. You will go about it the same way you would execute a project in the real business world.