Introduction to Angular

  • 3 Days
  • Advanced
  • Virtual | Classroom
  • £ On Request

Learn how to build stunning Single Page Web Applications (SPA) using the latest Angular framework

Book For My Team

Overview

Angular (sometimes called Angular 2 or 2+ even though it is currently on version 9) is a complete redesign of its predecessor, AngularJS. It aims to bring forward the best features of the original whilst correcting or replacing its flaws. This new Angular is based around a strongly typed language (TypeScript), adopts a component based architecture and provides fine grained control over the type and extent of data binding performed.

This course introduces all the features of Angular via sample applications of increasing complexity. It will enable experienced client side developers to immediately begin creating Single Page Applications that interact with RESTful services. As the course progresses the official Angular Style Guide (maintained by John Papa) will be continually referenced and there will be a strong focus on writing unit and integration tests alongside the components and applications.

Outline

Programming in TypeScript (TS)

  • Why do we need TypeScript?
  • The basic types supported by TS
  • How to transpile TS to JavaScript
  • Support for TS in the WebStorm IDE
  • Debugging TS code at different levels
  • TS as a superset of ECMAScript 6
  • The ECMAScript 6 class model in depth
  • Enforcing contracts via interfaces
  • Advanced features of TS interfaces
  • Enhancements to function declarations
  • Support for generic types and constraints
  • Interacting with the TS Transpiler

Getting Started with Angular Development

  • Installing Node.js and configuring your package.json
  • Assembling all the JS modules you will need via Webpack
  • Using the Angular CLI plus Webpack to bootstrap your projects
  • Configuring TypeScript via tsconfig.json and typings.json
  • Guidelines for setting up your coding environment
  • Creating and configuring your first Angular Module
  • Adding a Root Component to the module and exporting it
  • Defining the bootstrap file and the host web page
  • Running and incrementally enhancing your app

Testing your Angular Components

  • Writing standard unit tests with Jasmine (inc. mocking)
  • Testing Angular components via Jasmine, Karma and Node
  • How to test components with dependencies on local services
  • How to test components with dependencies on RESTful services
  • Options for verifying the markup generated from components
  • End to end testing via Protractor and PhantomJS
  • System and acceptance testing with Selenium

The Angular Architecture in Depth

  • Overview of the Angular Architecture
  • Disentangling the JS and Angular module systems
  • Deployment options for Angular applications
  • The difference between Root and Feature Modules
  • How components, directives and pipes make up the view
  • Understanding imports, exports, providers and services
  • Arranging components and their views into a hierarchy
  • The four styles of data binding used by components
  • Rules for creating and injecting services
  • Options for registering service providers

Building Angular Components and Templates

  • Using the @Component decorator to create a component
  • Specifying the component selector and the path to the template
  • Providing custom CSS styles for use within the template
  • Implementing lifecycle callbacks within your component
  • Binding parent and child components as a hierarchy
  • Options for one way binding from model to view
  • Choosing between property bindings and interpolation
  • Chaining expressions through built-in and custom pipes
  • Using the safe navigation operator in expressions
  • Special syntaxes for attribute, style and class bindings
  • Event based bindings from the view back to the model
  • The 'banana in a box' syntax for two way bindings
  • Using NgClass and NgStyle to manage CSS
  • Using NgIf and NgSwitch to conditionally add nodes
  • The NgFor directive and its 'microsyntax'
  • The expanded '<template>' syntax for directives

Interacting with RESTful Services

  • Importing the HttpModule and JsonpModule
  • Injecting the Http service into your own client-side services
  • Calling operations of RESTful services and marshalling data
  • Manipulating the RxJs Observables returned from REST calls

Advanced Angular Features

  • Animating transitions between states
  • Creating and using custom pipes
  • Configuring views via the Angular Router
  • Built in protections against malicious access

Requirements

Delegates must be proficient JavaScript developers who have already developed applications using frameworks like Dojo, jQuery, Angular 1 and React.js.

Ryan Adams

Used to make software for learning as a developer, now helping software makers learn.

Follow Ryan
Andrew Paul

Was a teacher, then a lecturer and now a trainer at Instil. Has been completed the circle.

For a breakdown of what to expect in our training, check out our training overview page.

As expected from Instil, the course was excellent and I'd be stuck to find fault as it covered everything I didn't know about Angular and corrected what I thought I knew already.

Great course as always. Garth was fantastic at explaining all that you need to know in regards to using Typescript, Angular 2 and how Angular 2 differs from React. Very informative and very beneficial!

I found the course excellent - it as well paced and engaging. Eamonn was very knowledgeable on the topic and was attentive to anyone who needed assistance.

Deloitte logo
Atlassian logo
Workday logo
BMW logo
Amex logo
McAfee logo
PWC logo