Angular Fundamentals Boot Camp

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