Angular Crash Course with Node and Java Backend

Install node and npm, install angular CLI globally, create a project with ng new, enable routing and strict type checking, then run ng serve -o to launch on localhost:4200.

Install MySQL Workbench on Windows, launch the GUI client to connect to a MySQL server, and use the query window to create and use databases.

Download the completed project zip from the resource section to reference finished projects, then run npm install to install dependencies and create node_modules before building each project.

Create and wire your first Angular component using the CLI, generate component files, define properties with types, expose getters, and render values via HTML interpolation.

Bootstrap your first custom component by configuring app.module.ts with NgModule (declarations, imports, bootstrap), then render AppComponent and its ProductComponent via the app-product selector with ng serve -o.

Learn to set the product component as the bootstrap root, update app.module.ts and index.html, and verify output while hot-reloading shows product details from product.component.html.

Create a seller component in Angular to list product sellers, initialize a sellers string array, implement getSellers, and render via the seller component within the product component.

Learn to use output event binding to toggle seller visibility with a click. Move the logic from template to the component and use regular brackets for the event.

Explore how Angular directives like ngIf, ngSwitch, ngFor, ngNonBindable, ngStyle, and ngClass control the DOM and styling with practical examples of conditional rendering, iteration, and safe interpolation.

Learn how ngSwitchDefault renders a default element when no cases match. See how the default case displays in the UI when an unmatched value occurs.

Learn how to use ngNonBindable to display code as-is in Angular templates. Wrap code in a div with ngNonBindable to prevent Angular processing.

Create an Angular component to consume the country service, inject it in the constructor, use ngOnInit to subscribe to getCountries, and expose the response data for the template.

Learn to handle errors in Angular HTTP GET calls by capturing error responses and exceptions with an error variable and console error logging.

Wire the app module by importing the country service and http client module, register the country service in providers, and bootstrap the country component to render country information.

Watch how the countries service feeds data to app-countries component, updates index.html to use app-countries, and runs ng serve -o to display country names and flags in an Angular app.

Create an angular postservice project, add an uppercase service, and generate an uppercaseConverter component to wire into app.module.ts, then open the project in Visual Studio Code.

Implement the component to use the uppercase converter service by importing and injecting the service, then create a convert method that calls convertToUppercase and handles success and HttpErrorResponse errors.

Bootstrap the application by configuring app.module.ts with http client and forms modules, importing the uppercase converter service, and setting the uppercase converter component as the bootstrap component.

Upgrade to the latest Angular version and learn to define variables in the TypeScript component rather than in HTML, and bind them in the template.

learn to render responses in the ui by updating the component html to display helloResponse and customerResponse in h1 tags with Angular interpolation and json pipe, colored red and green.

Configure the Angular app by wiring hello and customer services, import the HttpClientModule, set providers, adjust the app module and route component, and render the multiple services component.

Run the application with ng serve -o to launch, view helloService and customerService in the multiple-services component, and render the first output in red and the customer data in green.

Learn to execute parallel service calls in angular with forkJoin by importing forkJoin from rxjs, invoking multiple services in ngOnInit, and handling a response array.

Create your first node project as the product API to host RESTful services for CRUD operations using express, MySQL, and body-parser.

Set up a rest api bootstrap with server.js by importing express, mapping api/products to product.controller, and starting the server on port 8080 with a startup log.

Expose a restful endpoint to fetch a single product by id via a path variable, using get, request.params.id, and a where clause to return the matching record.

Test a post request to localhost:8080/api/products/ via postman, inspect node console logs for sql insert errors, fix the missing closing bracket, and verify the insert succeeds in the database.

Update the product endpoint using put to modify name and price by id, with a json body and sql update statement, then verify with postman and a 200 ok response.

Implement the delete operation to remove a product by id, map the delete verb to the endpoint, and return a delete success message after verifying in the database.

Create an Angular client project to consume the Node and Express RESTful API, and implement a service and a component to render output in HTML.

Implement create, update, delete, and fetch single product methods using post, put, get, and delete calls with a shared base url and product objects.

Implement component methods for create, update, get single, and delete product using a service, handle responses, and prepare for per-component html integration.

Create html for an angular product form by binding id, name, description, and price to the component, wiring a create product action, and showing the json response.

Finish the HTML for update, fetch, and delete actions, enabling update of name and price, fetch by id, and delete by id, with routing and componentization planned.

Explore the pathMatch property in Angular routes. Compare full and prefix values, and learn how to set pathMatch to full for strict route mapping in the first routes object.

Configure cors support on the product api by editing server.js to set access-control-allow-origin, headers, and methods, enabling the Angular app on 4200 to access the backend on 8080.

Explore text pipes in Angular by applying titlecase, uppercase, and lowercase to a sample title using Visual Studio Code, an ng new project, and string interpolation.

Learn how to format numbers as money using the currency pipe in angular, applying it to a myMoney field and switching between usd, gbp, and inr formatting for the ui.

Use the json pipe to convert a simple object literal with name and salary into a json string for display in HTML; TypeScript automatically infers the object type.

Learn how the percent pipe in Angular converts a number to a percentage by multiplying by 100, appending the % symbol, and formatting with digits before the decimal and after.

Learn to slice an array inside ngFor using the slice pipe, display values with bold formatting, and render elements 30, 40, 50 through simple string interpolation.

Learn how to create a promise with getPromise that resolves after a 2 second delay, and display the result in the template using promiseData before exploring the async pipe.

Leverage the async pipe to handle the promise directly in the html template. Assign the getPromise result to a promise variable and render it in the ui as data arrives.

Create a custom Angular pipe to reverse strings, generated with ng g p reversepipe, implemented via a class that implements PipeTransform and declared in app.module.ts for template use.