70010 Angular Fundamentals Boot Camp - Dynamics Edge
Course 70010

70010 Angular Fundamentals Boot Camp


To customize this class, call 800-453-5961 or click here to contact us

Note: For additional questions and clarification, you may reach Bill Ramirez at bill@dynamicsedge.com or on his following contact details: Office- (510) 804-3600 & Cell- (415) 200-6969

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
    • Create a user object in app.component that stores information about the current user
    • Create a main module and a main component
    • Share the user data from the parent app component to the child 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
    • Using @ViewChildren decorator
    • Using @ContentChild decorator
    • Using @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
  • Guided Exercise: Starting a mock server to store data
  • Guided Exercise: Create a service that returns an Observable
  • Guided Exercise: Subscribe to an Observable
  • Guided Exercise: Track the progress of an Http request
  • Guided Exercise: 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 CanActivate
  • Guided Exercise: Create and implement a router guard with CanActivateChild
  • Guided Exercise: Create and implement a router guard with CanDeactivate
  • 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: Create the service with the CRUD operations
  • Guided Exercise: Add the CRUD functionality to the component

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

We look forward to your great success!!!

Save money and get your team trained. With a group of 5 or more people, you have special options. Click the button below to request a special quote for your team now!

Request Group Quote

Register


Price: $2995   Duration: 5 days

- EST