Full Stack: Angular and Java Spring Boot E-Commerce Website

Discover angular, a framework for building modern single page applications with partial updates and Rest API communication, and note its evolution from angularjs 1.0 to angular 2 and beyond.

Set up your Angular development environment by installing Visual Studio Code, Node, npm, and the TypeScript compiler, and follow cross-platform guides to get everything running.

Explore TypeScript basics, a Microsoft language that adds optional types to JavaScript for IDE support and object-oriented features, enabling compiled development and widespread use in Angular.

Set up a TypeScript training folder in visual studio code, write a hello world in a .ts file, compile with tsc, and run with node.

Explore TypeScript variables and basic types (boolean, number, string, and any) using the let keyword, type annotations, and template strings, with compile and run steps to see outputs.

Define boolean, number, and string variables in TypeScript, display outputs with console.log, compile with tsc, run with node, then compare concatenation and template strings using backticks and ${}.

Explore TypeScript loops and arrays, including for loops, indexing, and computing averages. Practice growable arrays, for-of iteration, and console printing.

Write a basic for loop in TypeScript to iterate a reviews array, log items, and compute the average using total and reviews.length.

Practice creating and iterating over arrays with both traditional index for loops and for-of loops, add conditionals to highlight a favorite sport, and expand arrays with push in TypeScript.

Define a TypeScript class with firstName and lastName, a constructor, and getters and setters; instantiate with new and observe noEmitOnError prevents JS emission on errors.

Create a customer class in TypeScript with firstName and lastName, instantiate with new, and use a constructor to initialize values, then compile with tsc.

Explore TypeScript accessors by implementing get and set methods for private fields, and learn how public accessors handle data behind the scenes, including ES5 targeting and tsconfig.json configuration.

Define private properties and implement get and set accessors in TypeScript, using the underscore convention and IDE-generated accessors. Configure TypeScript compiler for ES5 and noEmitOnError to avoid emitting on errors.

Configure the TypeScript compiler with tsconfig.json to set options in a configuration file, generate it with tsc --init, and compile with target es5 and noemitonerror.

TypeScript's parameter properties provide a shortcut to define and assign class properties in the constructor, reducing boilerplate. The lecture shows automagically assigned properties in a customer class and tsc compilation.

Learn how TypeScript modules organize code by exporting a customer class in customer.ts and importing it into a driver.ts. Use relative paths like ./customer and run to verify the import.

Explore how TypeScript implements inheritance with a Shape superclass and Circle and Rectangle subclasses, including single inheritance, method overriding, and using super.getInfo.

Define a Shape superclass in TypeScript with x and y properties and accessors, then create a Circle subclass that extends Shape, calls super, and overrides getInfo to include radius.

Pull together inheritance in a TypeScript main app by importing shape and circle, creating instances, calling getInfo, and validating compilation with tsconfig noEmitOnError.

Develop a second subclass in TypeScript by creating a Rectangle that extends a base class, adds width and length, overrides getInfo with super.getInfo, and demonstrates inheritance in a driver.

Explore inheritance by adding shapes to an array and iterating over them with getinfo. Copy the driver to ArrayDriver.ts and run the program to see the array-driven output.

Learn how abstract classes and abstract methods work in TypeScript, using a shape example where concrete subclasses implement calculateArea with circle's pi times radius squared and rectangle's width times length.

Explore abstract classes by implementing an abstract shape with a calculateArea method, then create concrete rectangle and circle classes that override it using TypeScript.

Explore how TypeScript interfaces define method contracts and properties, and how CricketCoach and GolfCoach implement the Coach interface to deliver daily workouts via an array of coaches.

Define a TypeScript interface Coach and implement it with CricketCoach and GolfCoach, providing the getDailyWorkout method, assemble coaches, and compile to verify interfaces are up and running.

Discover Angular development by building a component-based single-page app with templates, data-binding, and dependency injection, then connect a front-end Angular app to a Spring Boot back-end via REST APIs.

Run your angular project with ng serve to build, start the server, and enable hot reload; open localhost:4200, or use --port to pick another port.

Install the Angular CLI, verify with ng version, create a new Angular project with ng new and CSS, then run ng serve on port 4200 with live reload.

Explore the behind the scenes flow of an Angular project from index.html to the app-root replacement, including the @Component decorator, selector, template URL, and bindings.

Explore behind the scenes of an Angular project, bootstrapping with AppComponent, wiring index.html with app-root, using template binding and interpolation, and observing hot reloading via ng serve.

Create a new Angular component to display a sales table, using ng new and ng generate component, add the app-sales-person-list selector, and build a table from sample data.

Create and populate a SalesPerson class using the Angular CLI, leveraging parameter properties and public fields, then render data with an ngFor loop in a SalesPersonListComponent HTML table.

Create a new Angular project, scaffold a sales component, and integrate it into the app template using the app salesperson list selector, then define a salesperson class with parameter properties.

Create step 6 in the salesPersonList within the SalesPersonListComponent by defining an array of SalesPerson objects and importing SalesPerson type, adding Anup Kumar, John Doe, Claire Murphy, and Mai Truong.

Create a new angular component and build a dynamic html table to display sales data. Loop through the salesPersonList with *ngFor to render firstName, lastName, email, and sales volume.

Integrate Angular with Bootstrap to beautify a sales team table by adding Bootstrap links, applying Bootstrap classes to the template and table, and updating the component to use the Bootstrap template.

Learn to integrate Bootstrap CSS into an Angular app by adding Bootstrap links, wrapping content in a container, applying Bootstrap classes to headings and tables, and updating the component template.

Use angular conditionals and formatting to add a met quota column that displays yes or no when sales volume meets or exceeds 60,000, and format currency with the usd pipe.

Learn to implement angular conditionals with ngIf to display whether a sales person meets quota, using a boolean expression for sales volume, and format the amount as USD currency.

Build a full-stack e-commerce app with an Angular front end and a Spring Boot back end using a REST API for product listing, cart CRUD, checkout, order tracking, and authentication.

Establish the Spring Boot back end with Spring Data REST to expose CRUD endpoints for product and product category via JpaRepository, and use Lombok to reduce boilerplate.

Set up the database tables for full-stack-ecommerce by importing starter files, creating the ecommerceapp user, and building the product and product category tables with sample data.

Create a spring boot starter project via start.spring.io, set group and artifact, add spring data jpa, rest repositories, mysql driver, and Lombok, then generate and move to the backend folder.

Develop JPA entities for product and product category by configuring a product class with table mapping, Lombok data, and field mappings within a Spring Boot project and application properties setup.

Configure JPA mappings for product class, including id, unit price, and image url; set one-to-many and many-to-one with cascade all and join column category id; use Lombok getters and setters.

Build and expose rest APIs with Spring Data JPA repositories and Spring Data REST by creating product and product category repositories, customizing names and paths, and using endpoints like /api/products.

Configure a read-only REST API with Spring Data REST by disabling POST, PUT, and DELETE while allowing GET for product listings in release 1.0.

Configure a Spring Boot rest api to be read-only by disabling put, post, and delete on product and product category repositories, exposing only get endpoints, and verifying with Postman.

Make angular frontend to consume spring boot rest APIs by building a product list component and a product service; subscribe to data and render it in html with cross-origin support.

Subscribe to product data in Angular via ProductService, display names and prices with ngFor and the currency pipe, and enable CORS in Spring Boot to allow localhost:4200 calls.

Create an Angular project, add Bootstrap, and build a product list component, wiring the app component to display products and run the dev server.

Create a TypeScript Product class matching the Spring Boot REST API JSON, then implement a ProductService to call REST APIs and wire it in via HttpClientModule in app.module.ts.

Define the base url for the Spring Boot REST API, inject HttpClient in the Angular service, and fetch the product list, mapping _embedded.products to a product array.

Focuses on updating the Angular component (step five) and displaying data in HTML (step six) by injecting ProductService and rendering product names and prices with *ngFor and currency pipe.

Add cross-origin support to a Spring Boot backend using @CrossOrigin and configure the origin for an Angular frontend, then run and test the full stack app.

Build an html table in this Angular project to display products. Rename and wire a dedicated product list table component, showing name, price, and units in stock with Bootstrap styling.

Add image support for products by placing placeholder.png in the assets/images/products directory, then reference tempProduct.imageUrl in an img tag to display thumbnails in the table.