7010 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,890.00
Get This Course $2,890.00
December 12 - 16

9:00 AM – 4:00 PM CST

January 16 - 20

9:00 AM – 4:00 PM CST

February 13 - 17

9:00 AM – 4:00 PM CST

March 13 - 17

9:00 AM – 4:00 PM CST

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?

COURSE OVERVIEW:

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.

PREREQUISITES:

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

AGENDA TOPICS:

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

Observables

  • 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

And

  • 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