Angular Fundamentals Boot Camp

Course: 7010

This course provides the necessary information for building websites and web applications using the Angular framework. Attendees will have built a simple web application and covered the required fundamental topic. Enrollees must have solid understanding of JavaScript, as well as the basics of HTML and CSS.

Download PDF
  • Duration: 5 days
  • Price: $2,895.00
Get This Course $2,895.00
Scroll to view additional course dates

Reserve Your Seat

  • Virtual instructor Led Training
  • Complete Hands-on Labs
  • Softcopy of Courseware
  • Learning Labs
  • Virtual instructor Led Training
  • Complete Hands-on Labs
  • Softcopy of Courseware
  • Learning Labs
  • You can use your Purchase Card and checkout
  • The GSA Contract Number: 47QTCA20D000D
  • Call 800-453-5961 for details
  • Customize your class
  • Delivery Onsite or Online for your organization
  • Choice of Dates when and where you want
  • Guidance in choosing and customizing your class

Question About this Course?


This course provides the necessary information for building websites and web applications using the Angular framework. By the end of the course, attendees will have built a simple web application and covered the required fundamental topics.


  • Solid understanding of JavaScript, as well as the basics of HTML and CSS.


Introduction to Angular

  • What is Angular?
  • The Angular Platform
  • The Angular Ecosystem
  • Angular Versioning
  • Semantic versioning
  • Why not version 3
  • Angular’s tentative release schedule
  • Guided Exercise: Acquiring Useful Angular Resources
  • Demo: Angular Examples
  • Helpful Optional Downloads
  • Angular 5 New Features
  • Quiz
  • Resources

Setting up the development environment

  • Requirements
  • Code editors
  • Integrated Development Environments
  • nodejs
  • npm
  • Guided Exercise: Installing the required tools
  • Guided Exercise: Testing the installation
  • Quiz
  • Resources

Building your first Angular application

  • Introduction to Building Angular Applications’
  • Options for building Angular applications
  • Using Angular-provided tools: Angular CLI
  • Using Angular-provided tools: Angular Seed Project
  • Writing Angular code from scratch
  • Using 3rd party tools
  • Guided Exercise: Using the Angular seed quickstart Project
  • Practice Exercise: Build a new Angular Application with the Angular Seed quickstart
  • The Angular CLI Tool
  • Challenge Exercise: Using the Angular CLI Tool
  • Quiz

Understanding how Angular Applications Bootstrap

  • Introduction to bootstrapping Angular Apps
  • High-level overview of Angular Architecture
  • Which file launches the application
  • Bootstrap summary
  • Guided Exercise: Review the bootstrap process
  • Quiz

Understanding Angular Architecture

  • Introduction to Angular Architecture
  • The seven keys to Angular
  • What is an Angular application?
  • What is a component?
  • The root component
  • The Augury Chrome Extension
  • The component file
  • What is a decorator?
  • What’s an HTML template?
  • Demo: HTML Template Strings
  • What’s a module?
  • The application root module
  • How do module’s work
  • The @ngModule decorator
  • Guided Exercise: Building the app module
  • Best practices
  • Notes to remember about modules
  • Practice Exercise: Understanding the app module
  • Challenge Exercise: Use the CLI to create app.module.ts
  • Use the CLI tool to create main.module.ts
  • Quiz
  • Practice Exercise

Understanding Components

  • Introduction to components
  • The Component Class
  • Demo: Components
  • Demo: Custom Elements
  • Understanding Angular templates
  • Guided Exercise: Creating a component
  • Practice Exercise: Build a component
  • Component architecture
  • The templateUrl property and the absolute path problem
  • Practice Exercise: Using the templateUrl property
  • Challenge Exercise: Create a component with the Angular CLI tool
  • Practice Exercise: Create a main component
  • Quiz

Styling Angular Components

  • Introduction to Angular CSS techniques
  • Angular’s global CSS file: main.css
  • Guided Exercise: Writing global styles rules in styles.css
  • Challenge Exercise: Add global styles in the CLI project
  • Component styling methods
  • Guided Exercise: Styling Angular components with a component style block
  • Styling Components with external stylesheets
  • Practice exercise: Styling a component with an external style sheet
  • What are Component Styles?
  • Angular’s CSS Encapsulation Rules
  • Setting view encapsulation
  • Demo: Understanding CSS encapsulation
  • Demo: Understanding CSS encapsulation with Shadow DOM and templates
  • Guided Exercise: Understanding Angular’s CSS Encapsulation
  • Practice Exercise: Create and style a component
  • Challenge Exercise: Re-write the header-footer CSS to remove redundancy
  • Challenge Exercise: Create and style a footer component using the Angular CLI tool
  • Advanced Components and Styling
  • Using 3rd-party CSS
  • Using Font Awesome
  • Styling Custom Components
  • Guided Exercise: Using 3rd-party CSS libraries and advanced styling
  • Advanced Component Design and Content Projection
  • What is Content Projection?
  • Guided Exercise: Using Content Projection and Styling
  • Quiz

Component Communication and Data Binding

  • Introduction to Angular data binding
  • Component properties
  • Template expressions
  • Rules regarding template expressions
  • Guided Exercise: Using interpolation with component properties
  • Property binding
  • Binding to DOM properties vs. HTML attributes
  • Guided Exercise: Setting a property binding
  • Property binding vs. Interpolation
  • Practice Exercise: Create a property binding
  • Attribute Binding
  • Class Binding
  • Guided Exercise: Adding a Class Binding
  • Style Binding
  • Challenge Exercise: Add a binding to the Angular CLI project
  • Quiz

Data Models and Services

  • Introduction to Services
  • How to services fit in Angular’s architecture.
  • When should you create aServices
  • Domain Models
  • Guided Exercise: Create a data model
  • What’s a Service?
  • What is dependency injection?
  • The hierarchical nature of Angular dependency injection
  • How to use a service with dependency injection
  • Guided Exercise: Using an Angular built-in service
  • Guided Exercise: Creating and using a service
  • Challenge Exercise: Create and using a service
  • Advanced services and dependency injection
  • Optional dependencies
  • How to make service dependencies optional
  • Guided Exercise: Make a service intended for optimal use in other service

Understanding Component Communication

  • Introduction to Component Communication
  • Nesting Components
  • Guided Exercise: Parent to child component communication
  • Create a data model to store a User object
  • Make a user object in app.component that stores information about the current user
  • Share the user data from the parent app component to the child component
  • And lastly, Create a main module and a main component
  • Practice Exercise: Use @Input to share data from parent to child component
  • Challenge Exercise: Share component data in the Angular CLI project
  • Advanced Services and Dependency Injection
  • Optional Dependencies
  • Guided Exercise: Make a service intended for optional use in other services
  • Quiz

Angular Directives

  • Introduction to Directives
  • Angular’s Directive Types
  • Structural Directives
  • Common Structural Directives
  • Guided Exercise: Using the NgFor structural directive
  • Guided Exercise: Using the NgSwitch structural directive
  • Attribute Directives
  • NgStyle Directive
  • Guided Exercise: Add an NgStyle directive
  • NgClass Directive
  • Challenge Exercise: Add an NgClass directive
  • Angular Component Directives
  • Advanced Directives
  • Dynamic Component Loading
  • Guided Exercise: Create a custom directive and dynamically insert a component
  • Advanced Component Communication
  • Using @ViewChild decorator
  • Utilizing @ViewChildren decorator
  • Using @ContentChild decorator
  • Utilizing @ContentChildren decorator
  • Guided Exercise: Understanding the @ViewChild decorator
  • Component LifeCycle Sequence

Angular Routing

  • Introduction to Routing
  • Understanding Angular Routing
  • Routing Summary
  • Guided Exercise: Create a route
  • Challenge Exercise: Add routes to the Components

Angular Forms

  • Introduction to Angular Forms
  • Angular Form Classes
  • Angular Form Controls
  • AbstractForm properties
  • FormGroup
  • FormArray
  • Building Angular Forms
  • Template-driven forms
  • Form validation
  • The ngForm directive
  • Guided Exercise: Understanding Template-driven Forms and Form Controls
  • Reactive Forms with Angular FormBuilder
  • Guided Exercise: Create a Reactive Form with FormBuilder
  • Practice Exercise: Convert the Template-driven form to a Reactive Form
  • Binding to Form Controls
  • ngModel assigned to a template reference variable
  • Binding to a select menu
  • Binding to a checkbox
  • Angular Form Validation
  • What makes a form field valid?
  • How to use Validators
  • Angular Form Validation State classes
  • Practice Exercise: Validate a simple form
  • Challenge Exercise: Add validation to the registration form
  • Angular 5 Update
  • Guided Exercise: Update form data onBlur and onSubmit
  • Homework
  • Quiz


  • Introduction to Observables
  • Current methods of handling asynchronicity
  • Promises
  • Observables vs. promises
  • Introduction to promises
  • What is a promise?
  • How do promises work?
  • Guided Exercise: Understanding promises
  • Observables
  • What is an observable?
  • Marble diagrams
  • What is RxJS?
  • Guided Exercise: Creating Observables
  • The create() method
  • The ‘of’ creation operator
  • The ‘from’ creation operator
  • The ‘fromEvent’ creation operator
  • Subjects
  • Demo: Understanding Observables
  • Guided Exercise: Create and use an Observable
  • AsyncSubject, ReplaySubject and BehaviorSubject
  • Guided Exercise: Refactor the user.service as an Observable with a BehaviorSubject
  • Extra Credit: Refactor the MessageComponent to use the BehaviorSubject and currentUser property
  • Quiz

Angular HTTP

  • Introduction to Angular HTTP
  • Current method of getting data into an Application
  • AJAX
  • Building an HTTP Service Class
  • Version 2 vs. Version 4
  • Importing the HttpCLientModule
  • Injecting the HttpClient
  • Making Http requests
  • HttpClientModule and Observables
  • Promises vs. Observables
  • Helpful information about Http Observables

Guided Exercise:

  • Making a get request with HttpClient
  • Starting a mock server to store data
  • Create a service that returns an Observable
  • Subscribe to an Observable
  •  Track the progress of an Http request
  • Displaying the data in the view
  • Using Header Information
  • Guided Exercise: Create a master/detail page

Understanding Angular Pipes

  • Introduction to Angular Pipes
  • What are Pipes?
  • Angular’s Built-in Pipes
  • How to use Pipes
  • Adding parameters to Pipes
  • Chaining Pipes
  • Pure vs. Impure Pipes
  • Guided Exercise: Using a built-in Pipe
  • Custom Pipes
  • Guided Exercise: Create and use a custom Pipe
  • Challenge Exercise: Create and use a custom Pipe

Advanced Routing

  • Router Guards
  • What is a router guard?
  • Angular’s 4 types of router guards
  • How to implement a router guard

Guided Exercise: Create and implement a router guard with

  • Can Activate
  • Can ActivateChild
  • And lastly, Can Deactivate


  • Lazy Loading Components
  • Code Splitting
  • Guided Exercise: Lazy-load a module

Understanding Http CRUD

  • Introduction to CRUD Applications
  • Reactive forms and CRUD
  • The Reactive Model

Guided Exercise:

  • Create a component for CRUD operations
  • Guided Exercise: Add the CRUD functionality to the component
  • Create the service with the CRUD operations

Testing Angular Applications

  • Introduction to Testing
  • Why test?
  • Testing types
  • Unit tests
  • Functional tests
  • Testing Angular applications
  • Tools and testing frameworks used by Angular
  • Introduction to Unit Testing with Jasmine
  • What is Jasmine
  • Jasmine code and testing terminology
  • Anatomy of an Angular Jasmine test
  • What is Karma
  • Testing and the Angular CLI
  • Testing Guidelines
  • Guided Exercise: Examine the CLI-generated tests
  • Guided Exercise: Write a test for a pipe

Question About this Course?

Need help picking the right course?

Contact Us

Call Now

Call Now800-453-5961