Angular Masterclass

This course has been designed to give each student a comprehensive explanation of all the techniques necessary to build solid web applications with Google's Angular. During the course, students will work from scratch as well as use the ng cli.

Prerequisites:

Students for this course will be familiar with JavaScript and have a strong understanding of HTML/CSS. Some experience in TypeScript would be helpful. We advise people to follow our TypeScript Introduction course.

Course Contents

This thrilling 4-day course offers experienced developers an excellent way to delve deeper into Angular 2 (A2). Throughout the 4 days, developers will be guided by our stimulating course to take on a deeper knowledge and understanding of Angular 2 (A2) without assuming any prior knowledge of AngularJS 1.x.

We will support students as they develop their knowledge from the basics of A2 through intermediate levels and beyond to include some advanced topics.

During the course, you will work on a case (a recipe web application). You will use webpack, typescript, scss, and the jasmine test framework together with karma

Below is a list of the objectives:

Introduction to Webpack

• Benefits of using webpack (and alternatives)
• Setup a project from scratch
• Use various loaders (css, scss, typescript, ...)
• Use pre-loaders (e.g, tslint)
• Use different plugins (HtmlWebpackPlugin, CommonsChunkPlugin, ...)

Angular

Core

• Understand the role of components
• Develop Components (using decorators)
• Bootstrapping an angular 2 application
• Understand ngModule
• Appreciate the different data binding styles (property, event, two-way, class, style, ...)
• Use Interpolation and built-in directives
• Understand and develop pipes
• Building forms with angular (including validation)
• Building application using Angular cli

Directives

• Input and Output/Events for component directives
• Develop and use attribute directives
• Develop and use structural Directives
• Implementing life-cycle hooks
• React to changes (including IterableDiffers)
• Creating a micro-language (*-desugaring)
• Creating feature modules

Services

• More on dependency injection
• Define services
• Register and inject services
• Different injection techniques (named, using a factory)
• Understand Promises

Reactive

• Introduction to RxJS
• Understand and use Observables
• Explore RxJS Functional reactive programming operators
• Build Reactive services (e.g, http)
• use reactive forms (the ReactiveFormsModule module)

Routing

• Implement Routing
• Child routes and route hierarchies
• Define routes in submodules
• constructing route urls
• route directives
• Router and ActivatedRoute APIs
• Accessing Route parameters,
• Using route guards (e.g, for authorisation)

Testing

• Testing angular application using jasmine
• Testing with and without a TestBed
• unit testing services, components etc
• Using jasmine spys
• mocking http request using HttpClientTestingModule
• -*e2e testing with protractor

Optional during the bespoke courses:

• Use of Docker and Kubernetes deployments
• Use of Node or Scala (Spray/Akka Http) Server for RestFull Services

This course has been designed to deliver maximum knowledge transfer and understanding while remaining dynamic and engaging.