4 Days
Become immediately productive in the TypeScript-driven front-end framework, Angular.
In this course, we cover the key features of Angular, including developing modules, components, directives, services, and pipes, writing tests with the Angular TestBed, and how to break up your system into separate modules using the Angular router. This course has been recently updated for Angular 12+.
Prerequisites: Some familiarity with JavaScript and HTML programming required, as well as an understanding of Ajax, JSON and web services.
Key Topic Areas
In this four-day course, you will build an Angular application from the ground up.
Introducing ECMAScript and TypeScript
You’ll begin with a tutorial on ECMAScript and TypeScript, use the Angular CLI, and take a tour of some key features of the platform, including Angular’s module system.
Using Components
Learn the ins and outs of developing component templates, handle events, integrate with services, share data and events between components in the same component tree via inputs and outputs, and create directives to decorate components and other HTML elements to manipulate the DOM.
Showing Views with the Angular Router
Learn how to use the Router to separate applications into different navigable component trees, and how to create router elements across different application modules.
Reactive and Template Forms
Forms are a key part of Angular, and set it apart from React and other technologies. You’ll implement forms using both the ngModel template-driven API as well as the Reactive Forms API, and learn the benefits of each type. You’ll implement validations and handle error reporting in your forms.
The Benefits of Services
Learn to leverage Angular services to gather shared data and business logic. You’ll use the HttpClient service to fetch data and handle content updates, using the providedIn setting to automatically inject services without extra configuration, and use service tokens to inject various implementations of the same service.
Reactive Angular with RXJS
You’ll use the RxJS Observable API for handling user inputs, network responses, routing events, and other streams of active content. A firm grasp of RxJS is essential to getting the most out of Angular.
Learn How to Test Angular
You’ll learn how to test components, services, pipes, directives and other features using Jasmine and Karma, and the Angular testing APIs.
Course Outline
A selected list of topics from the course by chapter. As the training evolves over time, additional topics will be added to the training, and deprecated topics will be removed. Check with our Training Director if you have questions about a specific topic.
- What is Angular?
- Angular compared to AngularJs
- Course agenda
- ECMAScript / JavaScript major versions
- Using Angular with ECMAScript, TypeScript
- ECMAScript version basics (quick review)
- ECMAScript 2015+ key features (arrow functions, let/const, templated strings, etc)
- Managing packages with barrels
- ECMAScript classes
- TypeScript key features (classes interfaces, typings, casting, decorators)
- Async JavaScript / TypeScript with promises, async/await
- Observables with RxJS
- Comparing higher order functions (map, reduce, etc.) to RxJS equivalents
- RxJS error handling
- RxJS with Angular
- Introducing the Angular CLI
- Installing the CLI
- Creating Angular applications
- Creating a Directive, Component
- Angular Modules
- ECMAScript -vs- Angular modules
- Rendering HTML in external, in-line templates
- CSS style encapsulation
- Component Features (templates, styles, selectors, bindings, methods)
- Components and events
- Template expressions
- Interpolation
- property binding
- Custom style bindings
- Lifecycle hooks (`ngOnInit`, `ngAfterViewInit`, etc)
- Parent/Child communication with `@Input` and `@Output`
- Event emitters in Angular
- Structural directives (`ngForOf`, `ngIf`, `ngSwitch`, `ngTemplate`, `ngContainer`, `ngContent`)
- Transcluding content into an inner component
- Two way data binding with `ngModel`
- Change detection, the `OnPush` strategy and immutability
- Preventing event bubbling
- Avoiding direct DOM manipulation with Renderers
- Using `@ViewChild` to access elements in code
- Accessing DOM events
- Directives
- Pipes
- Change detection and pure pipes
- Examples of single-value and collection-driven pipes
- Routing defined
- Configuring the Angular Router
- Route definition examples
- Router outlets
- Getting route info from routed-to components (`ActivatedRoute`)
- Navigating to routes (declaratively and with the Router API)
- Using the tracing, hash control settings with the Router
- Angular forms options
- Template-driven forms
- Populating lists and binding selections
- Submitting forms and toggling submit button sensitivity
- Reactive forms
- Creating a form with the FormBuilder
- The Form Group, Validators
- Displaying errors
- Resetting a Reactive Form
- What are Angular Services?
- Creating a Service from the CLI
- Services and dependency injection (`@Injectable()`)
- Using the
providedInwiring option - Storing state in services
- Multiple modules and services
- Storing services in the root module
- Async service discussion
- RxJS and Angular
- Event Emitters and @Output
- Async Validators using Promises, RxJS
- Async Validation with promises and observables
- Web Service APIs with HttpClient
- Unit testing with Jasmine
- Unit testing with dependencies
- Spying on services
- Testing Angular Components with TestBed
- Testing Angular Services
- Using `done()`, `waitForAsync()` and `fakeAsync()` in tests
- Testing Pipes
- Tests and dependency injection
- Testing with HttpClient and mocking responses
Kind Words from Our Students
Interested in training at Chariot?
Use the contact form below to get in touch with us, and a member of our team will reach back out shortly.
* These fields are required.