Overview
Angular (sometimes called Angular 2 or 2+ even though it is currently on version 17) 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 version of 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 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 Cypress and Playwright
- 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 or TypeScript developers.