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
Debugging the Application
Deploying the Application
Securing the Application
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
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
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
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
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
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
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