Tag: Angular

Introduction

Front-End Development and JavaScript Frameworks

• The tools and development for web development

Evaluating Application Requirements

• Speed and performance
• Maintainability
• Readability
• Integration with existing systems, applications and services

Evaluating Existing Talent

• Backend and frontend development experience
• Training and learning curves

Preparing the Development Environment

• Editors and IDEs
• Installing and configuring NPM and Node.js

Overview of the Web Development Cycle

• Version control, coding, building, testing, deploying
• Automation and continous integration

Exploring Angular

• Benefits: reusabilty, readability, maintainability, etc.
• Limitations: steep learning curve, migrating legacy
• Hands on: installing and configuring
• Hands on: implementing a todo list app
• Hands on: testing and debugging todo list app
• Building and deploying an Angular application

Exploring React

• Benefits: data binding, JSX, SEO-friendly, etc.
• Limitations: learning curve, JSX, React’s documentation, etc.
• Hands on: installing and configuring
• Hands on: implementing a todo list app
• Hands on: testing and debugging todo list app
• Building and deploying a React application

Exploring Vue

• Benefits: size, readability, etc.
• Limitations: lack of plugins, updated continuously, etc.
• Hands on: installing and configuring
• Hands on: implementing a todo list app
• Hands on: testing and debugging todo list app
• Building and deploying a Vue application

Summary and Conclusion

Introduction

Observables

• Basic usage and terms
• Defining observers
• Subscribing
• Creating observables
• Multicasting
• Error handling

The RxJS Library

• Creation functions
• Operators
• Common operators
• Error handling
• Handling failed observable
• Naming conventions

Observables in Angular

• Event emitter
• HTTP
• Async pipe
• Router
• Reactive forms

Practical Usage

• Type-ahead suggestions
• Exponential backoff

Observables vs Promises

• Creation and subscription
• Chaining
• Cancellation
• Error handling

Observables vs Events API

Observables vs Arrays

Summary and Conclusion

Introduction

Angular 8

• What is Angular?
• Angular architecture
• Angular 8 features

Preparing the Development Environment

• Installing and configuring Angular 8

Angular Quick Start

• Creating an application
• Adding Bootstrap
• Creating routing

Components and Binding

• Creating and using custom components
• Working with bindings
• Building modules
• Styling components

Developing an Angular Library

• Creating Angular libraries
• Publishing Angular libraries

Services and Dependecy Injection

• Creating a service
• Injecting a service into a component, directive, and service

Form Handling

• Creating a form
• Validating, filtering, and sanitizing form data

Pipes and HTTP Requests

• Transforming output
• Setting up Firebase
• Sending requests

Offline Capabilities

• Adding service workers
• Caching assets and URLs

Testing the Application

• Testing with unit tests

Debugging the Application

• Handling errors

Deploying the Application

• Hosting with Firebase

Securing the Application

• Using JWT authentication

Troubleshooting

Summary and Conclusion

Introduction

• What is Angular?
• What’s new in Angular 9?

Overview of Typescript and ES6 JavaScript

• TypeScript Syntax
• Using the TypeScript transpiler
• Setting up Angular 9 and Typescript

Overview of Angular 9’s Parts

• Angular CLI
• Components
• Directives
• Inputs and Outputs
• Data Binding and Interpolation
• Event Binding
• Data Modelling
• Bootstrapping

Creating Your First Angular Application

• Planning the Application
• Setting Up an Angular Project
• Creating a mobile friendly UI using Bootstrap 4 and Sass

Creating a Component

• Understanding the Component Lifecycle
• Data Flow
• Using Templates and Styles
• Projecting Content
• Working with AppModule
• Working with Custom Components
• Using View Encapsulation
• Implementing Lifecycle Hooks
• Using ViewChildren and ContentChildren

Data Binding in Angular 9

• Understanding Property and Event Binding
• Binding and Assigning Aliases to Custom Properties
• Binding and Assigning Aliases to Custom Events

Working with Directives

• Built-in Directives
• Custom Directives

Angular 9 Services

• Creating a Logging Service
• Creating a Data Service

Using Dependency Injection and Providers

• Injectors, Provider, and Tokens
• Configuring Dependency Injection
• Configuring Your Provider
• Injecting Services into Components, Directives, and Services

Switching Pages with Routing

• Understanding the Different Navigation Methods
• Routing Strategies
• Setting Up Routes
• Configuring and Loading Routes
• Using Parameters in Routes
• Creating Nested Routes
• Using Redirect and Wildcard Routes
• Understanding Route Guards

Using RxJS to Create and Work with Observables in Angular

• Overview of Observables
• Overview of RxJS
• Building & Using Observables in Angular

Generating Forms for User Input

• Using the Template Driven Forms
• Using the Reactive Forms
• Creating custom validation
• Validating, filtering, and sanitizing form data

Using Pipes

• Transforming output
• Built-in Pipes
• Async Pipe
• Custom Pipes

Making Calls to External HTTP APIs

• Sending requests

Using Angular Modules

Testing the Angular 9 Application

• Using Jasmine for unit testing
• Using Protractor for end-to-end testing

Debugging the Application

• Understanding Error Messages in Angular
• Using Sourcemaps to Debug Code in the Browser
• Reading TypeScript Compilor diagnostics
• Using Augury

Optimizing the Angular 9 Application

• Understanding the Ivy compiler, runtime, and renderer
• Reworking the code
• Reducing bundle size and eliminating dead-code

Angular 9 Security

• How authentication works
• Using JWT authentication
• What should and shouldn’t be written in Angular

Deploying an Angular 9 Application to Production

• Deploying to IIS, Apache, Nginx, etc.

Angular 9 Best Practices

Troubleshooting

Summary and Conclusion

Introduction

• What is Angular?
• What’s new in Angular 10?

Overview of Typescript and ES6 JavaScript

• TypeScript Syntax
• Using the TypeScript transpiler
• Setting up Angular 10 and Typescript

Overview of Angular 10’s Parts

• Angular CLI
• Components
• Directives
• Inputs and Outputs
• Data Binding and Interpolation
• Event Binding
• Data Modelling
• Bootstrapping

Creating Your First Angular Application

• Planning the Application
• Setting Up an Angular Project
• Creating a mobile friendly UI using Bootstrap 4 and Sass

Creating a Component

• Understanding the Component Lifecycle
• Data Flow
• Using Templates and Styles
• Projecting Content
• Working with AppModule
• Working with Custom Components
• Using View Encapsulation
• Implementing Lifecycle Hooks
• Using ViewChildren and ContentChildren

Data Binding in Angular 10

• Understanding Property and Event Binding
• Binding and Assigning Aliases to Custom Properties
• Binding and Assigning Aliases to Custom Events

Working with Directives

• Built-in Directives
• Custom Directives

Angular 10 Services

• Creating a Logging Service
• Creating a Data Service

Using Dependency Injection and Providers

• Injectors, Provider, and Tokens
• Configuring Dependency Injection
• Configuring Your Provider
• Injecting Services into Components, Directives, and Services

Switching Pages with Routing

• Understanding the Different Navigation Methods
• Routing Strategies
• Setting Up Routes
• Configuring and Loading Routes
• Using Parameters in Routes
• Creating Nested Routes
• Using Redirect and Wildcard Routes
• Understanding Route Guards

Using RxJS to Create and Work with Observables in Angular

• Overview of Observables
• Overview of RxJS
• Building & Using Observables in Angular

Generating Forms for User Input

• Using the Template Driven Forms
• Using the Reactive Forms
• Creating custom validation
• Validating, filtering, and sanitizing form data

Using Pipes

• Transforming output
• Built-in Pipes
• Async Pipe
• Custom Pipes

Making Calls to External HTTP APIs

• Sending requests

Using Angular Modules

Testing the Angular 10 Application

• Using Jasmine for unit testing
• Using Protractor for end-to-end testing

Debugging the Application

• Understanding Error Messages in Angular
• Using Sourcemaps to Debug Code in the Browser
• Reading TypeScript Compilor diagnostics
• Using Augury

Optimizing the Angular 10 Application

• Reworking the code
• Reducing bundle size and eliminating dead-code

Angular 10 Security

• How authentication works
• Using JWT authentication
• What should and shouldn’t be written in Angular

Deploying an Angular 10 Application to Production

• Deploying to IIS, Apache, Nginx, etc.

Angular 10 Best Practices

Troubleshooting

Summary and Conclusion

Introduction

• What is Angular?
• What’s new in Angular 11?

Overview of Typescript and ES6 JavaScript

• TypeScript Syntax
• Using the TypeScript transpiler
• Setting up Angular 11 and Typescript

Overview of Angular 11’s Parts

• Angular CLI
• Components
• Directives
• Inputs and Outputs
• Data Binding and Interpolation
• Event Binding
• Data Modelling
• Bootstrapping
• Experimental Webpack

Creating Your First Angular Application

• Planning the Application
• Setting Up an Angular Project
• Creating a mobile friendly UI using Bootstrap 4 and Sass

Creating a Component

• Understanding the Component Lifecycle
• Data Flow
• Using Templates and Styles
• Projecting Content
• Working with AppModule
• Working with Custom Components
• Using View Encapsulation
• Implementing Lifecycle Hooks
• Using ViewChildren and ContentChildren

Data Binding in Angular 11

• Understanding Property and Event Binding
• Binding and Assigning Aliases to Custom Properties
• Binding and Assigning Aliases to Custom Events

Working with Directives

• Built-in Directives
• Custom Directives

Angular 11 Services

• Creating a Logging Service
• Creating a Data Service

Using Dependency Injection and Providers

• Injectors, Provider, and Tokens
• Configuring Dependency Injection
• Configuring Your Provider
• Injecting Services into Components, Directives, and Services

Switching Pages with Routing

• Understanding the Different Navigation Methods
• Routing Strategies
• Setting Up Routes
• Configuring and Loading Routes
• Using Parameters in Routes
• Creating Nested Routes
• Using Redirect and Wildcard Routes
• Understanding Route Guards

Using RxJS to Create and Work with Observables in Angular

• Overview of Observables
• Overview of RxJS
• Building & Using Observables in Angular

Generating Forms for User Input

• Using the Template Driven Forms
• Using the Reactive Forms
• Creating custom validation
• Validating, filtering, and sanitizing form data

Using Pipes

• Transforming output
• Built-in Pipes
• Async Pipe
• Custom Pipes

Making Calls to External HTTP APIs

• Sending requests

Testing the Angular 10 Application

• Using Jasmine for unit testing
• Using Protractor for end-to-end testing

Debugging the Application

• Understanding Error Messages in Angular
• Using Sourcemaps to Debug Code in the Browser
• Reading TypeScript Compilor diagnostics
• Using Augury

Optimizing the Angular 11 Application

• Reworking the code
• Reducing bundle size and eliminating dead-code

Angular 11 Security

• How authentication works
• Using JWT authentication
• What should and shouldn’t be written in Angular

Deploying an Angular 11 Application to Production

• Deploying to IIS, Apache, Nginx, etc.

Angular 11 Best Practices

Troubleshooting

Summary and Conclusion

Introduction

• What is Angular?
• What’s new in Angular 12?

Overview of Typescript and ES6 JavaScript

• TypeScript Syntax
• Using the TypeScript transpiler
• Setting up Angular 12 and Typescript

Overview of Angular 12’s Parts

• Angular CLI
• Components
• Directives
• Inputs and Outputs
• Data Binding and Interpolation
• Event Binding
• Data Modelling
• Bootstrapping
• Experimental Webpack

Creating Your First Angular Application

• Planning the Application
• Setting Up an Angular Project
• Creating a mobile friendly UI using Bootstrap 4 and Sass

Creating a Component

• Understanding the Component Lifecycle
• Data Flow
• Using Templates and Styles
• Projecting Content
• Working with AppModule
• Working with Custom Components
• Using View Encapsulation
• Implementing Lifecycle Hooks
• Using ViewChildren and ContentChildren

Data Binding in Angular 12

• Understanding Property and Event Binding
• Binding and Assigning Aliases to Custom Properties
• Binding and Assigning Aliases to Custom Events

Working with Directives

• Built-in Directives
• Custom Directives

Angular 12 Services

• Creating a Logging Service
• Creating a Data Service

Using Dependency Injection and Providers

• Injectors, Provider, and Tokens
• Configuring Dependency Injection
• Configuring Your Provider
• Injecting Services into Components, Directives, and Services

Switching Pages with Routing

• Understanding the Different Navigation Methods
• Routing Strategies
• Setting Up Routes
• Configuring and Loading Routes
• Using Parameters in Routes
• Creating Nested Routes
• Using Redirect and Wildcard Routes
• Understanding Route Guards

Using RxJS to Create and Work with Observables in Angular

• Overview of Observables
• Overview of RxJS
• Building & Using Observables in Angular

Generating Forms for User Input

• Using the Template Driven Forms
• Using the Reactive Forms
• Creating custom validation
• Validating, filtering, and sanitizing form data

Using Pipes

• Transforming output
• Built-in Pipes
• Async Pipe
• Custom Pipes

Making Calls to External HTTP APIs

• Sending requests

Testing the Angular 12 Application

• Using Jasmine for unit testing
• Exploring Protractor alternatives for end-to-end testing

Debugging the Application

• Understanding Error Messages in Angular
• Using Sourcemaps to Debug Code in the Browser
• Reading TypeScript Compilor diagnostics
• Using Augury to debug inside a browser

Optimizing the Angular 12 Application

• Reworking the code
• Reducing bundle size and eliminating dead-code

Angular 12 Security

• How authentication works
• Using JWT authentication
• What should and shouldn’t be written in Angular

Deploying an Angular 12 Application to Production

• Deploying to IIS, Apache, Nginx, etc.

Angular 12 Best Practices

Troubleshooting

Summary and Conclusion

Introduction

• Overview of Angular
• Understanding the Angular framework and architecture
• Understanding the anatomy of an Angular application
• What’s new in Angular 13?

Fundamentals of TypeScript

• Understanding the TypeScript syntax
• Defining variables and arrays
• Type in functions

Building Components

• Overview of components
• Creating a component using Angular CLI
• Understanding the component class
• Using a component template
• Event Binding

Working with Angular Forms

• Introduction to forms
• Using template-driven forms
• Importing forms module
• Setting up a form
• Overview of reactive forms
• Importing reactive forms module
• Constructing a form
• Designing the template

Services, Dependency Injection, and Pipes

• Overview of service
• Creating a basic service
• Understanding service class
• Introduction to dependency injection
• Injecting a service instance
• Introduction to pipes
• Using built-in pipes
• Using pipes in HTML template
• Chaining pipes

Working with HTTP Client

• Angular HTTP client
• Using the HHTP client
• Importing HTTP client module
• HTTP client request options
• Returning an HTTP response object
• Setting request headers
• Creating a new and simple observable

Angular Component Router

• Introduction to the Angular component router
• Navigating view
• Using the Angular router API
• Creating a router-enabled application
• Hosting router components

Implementing Micro-Frontend Architecture with Angular

• Overview of micro-frontend
• Advantages and features of micro-frontend
• Understanding the different approaches to micro-frontend
• Understanding the micro-frontend framework
• Creating micro-frontend projects with Angular

Testing Angular Applications

• Unit testing Angular artifacts
• Using testing tools
• Testing steps

Summary and Next Steps

Duration

21 hours (usually 3 days including breaks)

Requirements

• Basic JavaScript, HTML, and CSS programming experience

Audience

• Web Developers

Overview

Ionic is a web framework for hybrid mobile application development. Ionic 4 brings new innovations to the Ionic platform such as a refactored CLI, changes in navigation, Angular routing, and more.

This instructor-led, live training (online or onsite) is aimed at web developers who wish to create a hybrid mobile application with Ionic 4.

By the end of this training, participants will be able to:

• Integrate native device features into a hybrid mobile application.
• Use Angular and Ionic 4 to build a hybrid mobile application.
• Run a hybrid application on a mobile device emulator.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

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

Course Outline

Introduction

Ionic Basics

• Processes and modules used in Ionic for web development
• How Ionic and Angular work together

Overview of Angular

• Components and attributes used in Angular

Preparing the Development Environment

• Installing Ionic and Angular
• Installing Cordova
• Testing installations with Ionic Lab

Templating in Ionic and Angular

• Using Ionic grids
• Setting styles and variables
• Creating CSS rules
• Generating services
• Consuming REST APIs
• Creating and using a data model
• Testing with Ionic DevApp

UI Components

• Generating and routing pages
• Retrieving data
• Adding page design
• Using lists
• Generating pages with modals and fabs
• Implementing complex lists
• Using pull to refresh
• Adding an auth guard

Ionic Native

• Setting up Ionic Native packages
• Accessing native device features
• Testing native device features

Connecting to a Backend

• Setting up Firebase
• Creating auth guards and services
• Sending data via HTTP
• Fetching, displaying, and loading data

Troubleshooting with Cordova

• Preparing for Android standards
• Running a hybrid application on an Android device emulator
• Preparing for iOS standards
• Running a hybrid application on a iOS device emulator

Summary and Conclusion

Duration

14 hours (usually 2 days including breaks)

Requirements

• An understanding of Angular
• Experience with TypeScript

Audience

• Angular Developers

Overview

Firebase is a web application development platform. Firestore is a NoSQL database for storing, syncing, and querying data at scale. Users can use Firebase and Firestore while leveraging serverless architecture to build Angular applications.

This instructor-led, live training (online or onsite) is aimed at Angular developers who wish to use Firebase and Firestore to build a back-end for Angular applications.

By the end of this training, participants will be able to:

• Build a back-end application with Firebase and Firestore.
• Store, sync, and query data with Firestore.
• Secure client-side data with Firestore security configurations.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

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

Course Outline

Introduction

Firebase and Firestore

• Firestore NoSQL database
• FireBase Storage
• Firebase Cloud

Preparing the Development Environment

• Installing and configuring Firebase
• Installing and configuring Firestore

Firestore Quick Start

• Working with collections
• Querying data

Angular Service Layers

• Setting up Angularfire
• Querying with Angularfire

Authentication

• Authenticating with Firebase UI

Firestore Security

• Hiding data
• Adding roles
• Implementing a schema

Firebase Cloud Functions

• Creating triggers
• Working with image processing

Summary and Conclusion