Angular: Fundamentals & Architecture

4 Days

Become immediately productive in the TypeScript-driven front-end framework, Angular.

Jump to Sign-Up Form

Come to Chariot and become immediately productive in the TypeScript-driven front-end framework, Angular. This isn’t the same framework written in 2009 (named AngularJS), but a written-from-the-ground-up, high-performance, reactive application development platform. Many enterprises are switching over to gain performance, improve application design, and actually decrease the running memory footprint of their applications.This powerful, high-performance, reactive application development platform is great for enterprise development teams, as its “batteries included” approach brings with it many APIs to help integrate with backend systems, deal with complex data streams, and process complex forms.

Prerequisites: Some familiarity with JavaScript and HTML programming required, as well as an understanding of Ajax, JSON and web services.

Topics

Key Topic Areas

In this four-day course, you will build an Angular application from the ground up.

01

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.

02

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.

03

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.

04

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.

05

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, and use service tokens to inject various implementations of the same service.

06

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.

07

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.

 
What You’ll Learn

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
  • JECMAScript / JavaScript major versions
  • Using Angular with ECMAScript, TypeScript
  • ECMAScript 5 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, RxJS
  • Comparing higher order functions 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
  • Custom style bindings
  • Lifecycle hooks (`ngOnInit`, `ngAfterViewInit`, etc)
  • Parent/Child communication with `@Input` and `@Output`
  • 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
  • Reactive forms
  • 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()`)
  • 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
  • Web-driven Aysnc Validation
  • 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()`, `async()` and `fakeAsync()` in tests
  • Testing Pipes
  • Tests and dependency injection
  • Testing with HttpClient and mocking responses

Kind Words from Our Students

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

Course Alumni

Angular Training
2018-12-26T18:03:21+00:00

Course Alumni

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

Course Alumni

Angular Training
2018-12-26T18:06:49+00:00

Course Alumni

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

The instructional design and delivery were excellent.

Jason W., student of Fortune 100 Repeat Client

Angular Training
2018-12-26T18:07:15+00:00

Jason W., student of Fortune 100 Repeat Client

The instructional design and delivery were excellent.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Alex S.

Angular Training
2018-12-26T18:07:39+00:00

Alex S.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Get Started

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.