Learn Angular by building a Progressive Web App (PWA)

Install node.js from nodejs.org, select the LTS version, install on Windows, Linux, or Mac, and verify with node -v and npm -v; upgrade npm globally with npm update -g.

Install the angular CLI globally and use ng to create a new project and start the development server. Use ng version and ng help, then ng build to deploy.

Install Firebase tools globally with npm to enable hosting and deployment of your Angular PWA, then log into the Firebase console to create projects and deploy to hosting and databases.

download and install visual studio code from code.visualstudio.com, unzip and run the app, and benefit from automatic updates by keeping it in the macos applications folder.

Fetch movie details from omdbapi.com using an Angular front end and RESTful endpoints, and learn how to register, activate a free API key, and use endpoint parameters.

Learn how to create a new Angular application with routing, and bootstrap integration for a movie browser, including the basic project structure (package.json, angular.json, main.ts, app module, app component).

Explore how Angular uses components and routes to build an app, creating a home component and styling with Bootstrap for a responsive layout.

Create a header component for the movie browser PWA that displays app name and a search input for movies. Wire component into the app module and style with bootstrap utilities.

Create an Angular movie list component that binds a movies array, uses interpolation, and displays results in a responsive Bootstrap card grid with titles and posters.

Master Angular routing by wiring a home and movie list component via a routing module, using router outlet, routerLink, and navigate to display movies.

Create a reusable movies service in Angular that uses HttpClient get with a search term to fetch data, then subscribe in the movie list component to display results.

Use activated route to read the query parameter from the URL, subscribe to the parameter observable, and pass the value to the movie service's searchMovies to fetch the movies array.

Learn to fetch movie details by IMDB id using an API key, retrieving data like rating, release date, runtime, director, plot, and poster, and implement getMovieDetails function in a service.

Implement a movie details view in Angular using the activated route to fetch details from the movie service and present a poster with information in a two-column layout.

Add progressive web app support to your Angular project by running ng add @angular/pwa, generating the manifest and service worker config, and updating modules and assets.

Walks through the generated pwa artifacts, detailing the angular service worker configuration, assets and data caching, and the web manifest with icons and install options.

Create and update app icons for a movie browser PWA by designing a 512x512 icon in Keynote, exporting assets, and generating platform-specific icon sets for Android, iOS, and web.

Deploy your Angular PWA by creating a Firebase project, initializing Firebase, and configuring hosting, then run a production build to publish dist/movie-browser with index.html, JS files, and assets.

Deploy your Angular app to Firebase hosting by building and running Firebase deploy, publish the movie browser folder, and verify the app loads from the hosting URL.

Learn how the movie browser PWA installs from Chrome, runs offline, and launches as an independent window, with service workers, manifest, and Lighthouse audits to optimize performance.

Turn a web app into a progressive web app on android by adding it to the home screen, launching it like a native app, and enabling movie search with details.