srinivasaraogurram / angular-dev-boot-camp-2-days Goto Github PK

Angular 16 Forms – Routing with Services Two Day Boot Camp Short Overview Angular is a JavaScript framework designed and developed to support front-end applications, browser-based applications. Angular ships with a boilerplate app already built in. It is secure, robust, and reliable. Angular is open-source. It was developed by Alphabet for creating dynamic modern web apps and SPAs. Angular uses TypeScript for the supporting code and regular HTML for the front end. Development is based on Components.

In this boot camp we focus on routing. Although Angular does not produce physical files that can be stored on a computer, it produces views. Several views can be combined into a layout or application interface. Routing therefore allow users to switch between views, pass values into views and restrict views based on some logic. Routing also supports lazy loading.

Audience Newer JavaScript programmers with at least 2 years working experience. This boot camp is only for JavaScript programmers or those working with the language regularly. Any JavaScript programmer with more than 2 years’ experience but have never worked with Angular will also benefit.

Objectives: After completing this course participants will be able to:

Create a boilerplate Angular application Add components to an existing application Create views and display components. Pass parameters (values) to components Generate child routes Restrain certain components from being loaded until needed Use middleware to support lazy loaded components Topics

Day01

NG16 Code Setup

Adding Components

Navigation Bar and Page-Not-Found

Programmatic Navigation

Routes with Parameters

Page Navigation

Query Parameters

Child Routes

Day02

Building Profile Service and Login Form

Implement Profile Service

Route Guards

Injecting Profile Service

Lazy Loading Modules

Passing Data and Resolvers

Realistic Use of Resolvers

Route Data via @Input

Environment

We will be using the NodeJS environment to run all the examples and code in this bootcamp.

The instructor will be using a Linux VM along with VS Code.

Any OS will work if you are able to install NodeJS on it.

An online sand box is also available to Percipio users

OS - Ubuntu 22.04.2 LTS

NodeJS - v16.15.0

npm - 9.8.1

Angular CLI: 16.2.0

Related Boot Camps

Introduction to Angular 16 Quick Start

Angular 16 Templates and Components

Angular 16 Template-driven and Reactive Forms

View less HOW TO JOIN Please join a few minutes before the class starts so we can get going right away. The Join Now button will be available 15 minutes before the class begins.

For any issues, please reach out to https://support.skillsoft.com/bootcamps

Class Prep

Prior to the class please download the class materials from:

https://github.com/Skillsoft-Content/AngularBootcamp Percipio: Angular Bootcamp --> Resources

Install

You will need to install the latest version of Angular and an editor:

The latest Angular CLI - https://angular.io/guide/setup-local VSCode - https://code.visualstudio.com/download

Lab Sandbox

If you are a Percipio user and are not able to install the software locally, feel free to use the Full Stack Development Sandbox. To locate the lab in Percipio:

Log into Percipio Select 'Library' > 'Skillsoft Bootcamps' > ‘Software Developer Bootcamps’ Choose ‘Angular Bootcamp' On the channel page, select 'Practice' to locate the lab Then choose ‘Full Stack Development Sandbox’ and click the ‘Launch’ button to open the lab. Sandbox assets can be found in: ‘~/Documents/assets/’