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.

Learn how yarn replaces npm for installing node modules and how to install yarn across operating systems, including verifying the installation with yarn -v.

Install Visual Studio Code, a free Microsoft IDE, to develop Angular, React, and TypeScript apps, leveraging code assistance and built-in test and run capabilities throughout the course.

Download the MySQL installer, install MySQL and MySQL Workbench, configure MySQL with a root password, and run the service on Windows or Mac with port 3306.

Launch MySQL Workbench, set up a local connection to the default 3306 port as root, test the connection with your password, then create the database my db.

install the MySQL community server on windows, with visual c++ prerequisite and server-only option, set the root password, and note the 3306 port and password encryption.

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.

Discover how Angular components create an app from custom HTML like elements such as header and carousel, using a TypeScript class with @Component, selector, and templateUrl.

Create your first angular project with the angular cli using ng new angularBasics, then generate components, services, routes, and pipes with ng generate, and run it locally with ng serve.

Explore the Angular src folder and app components, examine index.html, understand @Component decorator, selector, templateUrl, styleUrls, string interpolation, and review package.json for dependencies.

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.

Master ngModules as the building blocks of an Angular app and see how the root AppModule bootstraps components and services. Leverage router and http modules for routing and API calls.

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 invoke the getProducts method from the product component HTML instead of direct property access, ensuring correct component interaction while keeping the output unchanged.

Learn how to implement input property binding in Angular by binding a boolean hide flag to the DOM property hidden, initially hiding seller information and preparing for a toggle.

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 to use the ngIf directive in Angular by creating a project and component, then render content conditionally based on a boolean value and run the app.

Learn to drive ngIf dynamically by using component variables x and y, string comparisons, and a function call that uses backend results to conditionally render content.

Explore the ngSwitch directive in an Angular component, rendering cases 1 through 4 with *ngSwitchCase and a dynamic mycase variable sourced from the component.

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.

Explore the ngFor directive by creating a for component, defining a courses array with Angular, React, and Node, and rendering each course using *ngFor and string interpolation.

Define an array of student objects in TypeScript and display it in a table using ngFor in Angular. Interpolate student fields fName, lName, and score to render a dynamic list.

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

Apply ngStyle to set css properties from Angular expressions, using [style.color] or [ngStyle] with an object for multiple properties like color and background-color. Wrap hyphenated keys in quotes.

Apply dynamic styling with ngStyle by binding color and fontSize from the component to template styles. Bind values dynamically to style.font-size.px and color, replacing hard-coded values.

Learn how the ngClass directive applies a CSS class using an object literal, toggling a tdata font-size class on table cells with boolean true or false, demonstrating 80 pixels.

Learn to dynamically apply CSS classes with ngClass by defining useTdata and a classObj in TypeScript, binding them in HTML, and toggling with a function.

Master Angular dependency injection by letting the framework provide the login service and http module to the login component through providers and constructor injection.

Create your first Angular service to fetch country details (name, capital, flag, currencies) from a RESTful API and render them in an Angular component using the restcountries.eu endpoint.

Learn to use application services to fetch and post data with RESTful web services in an Angular context, using provided links and resources like Angularlinks.txt.

Create a countries Angular app with ng new countries in the Angular folder. Generate a countries service inside a services folder and modify countries.service.ts in Visual Studio Code.

Walk through the service code and add the http client import to enable restful calls, using injectable and root dependency injection to provide the service across the app.

Inject an http client into the country service, implement a get countries method, and perform an http get to fetch all countries and their flags as an observable.

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.

Implement HTML by building a dynamic table that displays each country's name, capital, flag image, and first currency code using ngFor and data binding.

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.

Apply inline styling in the countries component HTML to add table border, cellspacing, cellpadding, center alignment, 20px font, grey thead background, and a 100×50 image.

Learn to build an Angular service that posts lowercase text data to a RESTful web service and receives an uppercase response, using a provided URL.

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 uppercase converter service using the Angular HttpClient post call, sending user input to a RESTful service and returning JSON to the component.

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.

Implement the HTML page using Angular input binding and ngModel to capture user input, bind it to my_message, and submit to convert, then display the JSON-formatted result in red.

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.

Run the Angular app locally with ng serve -o, replace app-root with app-uppercase-converter, and post a lowercase string to receive an uppercase message via http.post, ngModel binding, and json pipe.

create two services in a single angular component to consume two rest endpoints: one web service response and a customer data list using provided urls.

Create an angular project named multipleServices, generate two services—helloService to fetch customer data from w3schools and customerService to call Thinkster's hello service—and build a component that uses both.

Implement the hello and customer services in angular using http client to call restful APIs, inject http client, and create get methods to fetch data.

Import hello service and customer service, inject them in the constructor, subscribe to their responses, assign results to public helloResponse and customerResponse for the user interface.

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.

Build a RESTful API with Node and Express to perform CRUD operations on a product table, using the MySQL module and body-parser to handle requests for an Angular client.

Create the product table with id, name, description, and price to support CRUD operations and a future RESTful API, with the table currently empty.

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

Establish a database connection by creating a config folder with db_properties.js and db_connection.js, exporting a dbProps object and using MySQL module to create connection with host, user, password, and dbName.

Create a product controller to host a RESTful API, importing the db_connection and Express to establish a MySQL connection pool and define routes with an Express router.

Implement the read endpoint using router.get to expose a get endpoint at / that selects all products and returns the results via response.send, handling errors.

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.

Export the router from product.controller, run node server.js on port 8080, test a RESTful GET localhost:8080/api/products with Postman, and insert a product to see it in the array.

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.

Create a post method createProduct API to add a product via a JSON body using body-parser and insert into product table. Return a JSON response with insert: success or error.

Upgrade your Express.js server by removing body-parser, adopting express.json() and express.urlencoded({ extended: true }), and uninstalling body-parser to simplify a Node.js backend.

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 front-end CRUD client for a Node backend, refactor to the latest Angular version, learn and implement routing, download the reference project from resources, and test the application.

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.

Create an Angular service to retrieve products by implementing a get products method that injects HttpClient in the constructor and calls the RESTful API's /api/products endpoint.

Learn to fetch and display products by subscribing to ProductDataService.getProducts in the default component, store the JSON response in a local property, and render it in the HTML.

Update the configuration to test the get method by wiring the http client module and product data service in the app module.ts, using import shortcuts and adding providers.

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.

Learn how routing powers client-side navigation in Angular single-page applications, using the router module with routes, router outlet, and router link to move from search results to details.

Refactor the Angular product CRUD app into four components for create, update, fetch, and delete, and implement routing. The home page lists all products with navigation links to each screen.

Refactor an angular app by moving product operations from app.component.ts into dedicated create, update, fetch, and delete components, wiring in ProductDataService to manage and display products.

Refactor the Angular app by moving the view logic from app.component.html into individual component html files (create, update, fetch, delete), resulting in a cleaner app.component.html that only displays products.

Configure the forms module in the app module by adding it to the imports in app.module.ts.

Create a routing module, define and apply routes to the default html with a router outlet, and configure AppModule to enable end users to navigate views after ng serve.

Create the routing module by importing the NgModule and RouterModule, define a routes constant typed as Routes, configure RouterModule.forRoot(routes), and export the routing module.

Configure the app routes in Angular by mapping the paths to components (CreateComponent, UpdateComponent, FetchComponent, DeleteComponent) and set a default redirect to the index page.

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.

Import and configure routing by adding routing.module.ts to app.module.ts, import AppRouterModule (or RoutingModule) in the imports, and ensure routing works.

Map app navigation by replacing hrefs with Angular routerLink in app.component.html, linking to create, update, fetch, and delete routes, and render them with router-outlet.

Upgrade your Angular app by refactoring components and templates to the latest version, making fields public and aligning id, name, description, and price across create, update, delete, and fetch.

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.

Run the node backend and use ng serve -o to build and view routing in action, navigating a single page app through create, update, fetch, and delete routes.

Explore Angular pipes like titlecase, uppercase, lowercase, date, currency, json, number, percentages, async, and slice to transform data in html templates and models.

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.

Format dates in Angular with date pipe, initializing a date field with new Date(). Use shortDate, mediumDate, and fullDate shortcuts or supply custom patterns like dd-MM-yyyy to tailor the display.

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 to format numbers in Angular using the number pipe, specifying minimum integer digits, minimum and maximum decimal digits, via the 4.2-3 format example in a template.

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.

apply the slice pipe to arrays by specifying a start and end index, including negative offsets, to extract elements like 30 and 40 from [10,20,30,40,50].

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.