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!!!