Angular 9

Course Overview:

This course will introduce you to the capabilities of the Apigee edge in a way to implement and secure your APIs. You will learn to design, build, and deploy your APIs using Google’s Apigee platform using hands-on labs.

Course Objectives:

• Understand why and how can Angular be used as a web development tool
• Enable how to build an Angular project from scratch, including environment setup, development, and deployment
• Understand how and when to utilize the different components or features of the framework
• To be able to understand how NPM works and how to install modules written by other people in the open-source community
• To be able to build a simple yet complete web application at the end of the course

Requirements:

Requirements:

• Intermediate knowledge of HTML, JavaScript, and CSS
• Basic understanding of command-line interface tools

Good to Have:

• Experience with TypeScript or other OOP/Typed languages
• Experience working with other high-level languages like Java, Python or PHP
• Experience working with other web frameworks like React or PHP

Target Audience:

• Anyone who wants to get started with building web or web-based applications
• Professionals seeking to further their knowledge about Angular 9+
• Teams getting started on migrating from Angular 1.0 or from other frameworks to Angular 9+

Course Duration:

• 3 Days

Course Content:

1. Getting Started
   1. Installation
      1. Node.JS
      2. NPM

• Angular CLI
  • Project Environment Setup
    • Creating a workspace and initial application
    • Running the application

2. Angular Concepts
   1. Basics
      1. Overview
      2. Architecture

• Where Angular sits is in a typical Information System
  • Project File Structure
    • Modules
    • Components
    • Templates, Directives and Data Binding
    • Services & Dependency Injection
    • Change history between Angular 1, 2, 3, …, 9+

3. Directives
   1. Components
      1. Creating components using the Angular CLI
      2. Parts of a component

• Binding data within a component
  • Applying logic inside a component
  • Applying styles inside a component
  • Structural
    • Conditionally load components
    • Using structural loops to repeat components
  • Using a structural switch to dynamically load components
    • Attributes
      • Creating custom attribute directives
      • Event handling within custom attribute directive
    • Using standard built-in attribute directives to customize components

4. Pipes
   1. Creating custom pipes
   2. Using custom pipes
   3. Allowing single and multiple inputs within a pipe
   4. Setting default values for a pipe
   5. Using built-in standard pipes and when to use them
5. Lifecycle Hooks
   1. Understanding the lifecycle of a component
   2. Inserting hooks for a lifecycle event and why we might want to insert one
6. Routing & Navigation
   1. Building component pages and setting up the router
   2. Trigger route change via component click
   3. Trigger route change via script
   4. Passing and receiving data when executing route change
7. Data Binding
   1. Interpolation
   2. Property Binding
   3. Event Binding
   4. Two-way Data Binding
8. Forms
   1. Template Driven Forms
      1. Creating a form component
      2. Creating form HTML template

• Binding form inputs to a model class
  • Validation
  • Reactive Forms
    • The difference between Template Driven Forms
    • Creating basic form controls
  • Grouping form controls
    • Validation

9. Observables & RxJS
   1. Observables
      1. Observers and Subscribers
      2. Error handling
   2. Practical Usage
      1. Transmitting data between components
      2. Models response in HTTP Client

• Usage in Async Pipe
  • Usage in Routing

10. Dependency Injection
    1. Services
       1. Creating injectable services
       2. Injecting services
    2. HTTP Services
       1. Building an HTTP service to interface with backend API
    3. Third-Party Modules
       1. Installing a CSS framework like Bootstrap
       2. Using vanilla JS frameworks
       3. Using Angularized version of vanilla JS frameworks
       4. Using Angular libraries integrated with CSS frameworks
    4. Project
       1. Building a TODO application

 

Course Customization Options

To request a customized training for this course, please contact us to arrange.