Full-Stack Web Development using Angular 10, Web API & SQL

Install sql server and management studio to create databases and objects, using free developer edition, then connect to a local database and run a simple query on an existing table.

Install Visual Studio to start the project; download the community version for free and follow the official site to set up web and desktop development.

Install Visual Studio Code from the official website, download and install with default settings, and prepare to use the open source editor for the Angler Project.

Install Postman to test the API methods by downloading from the official link and installing with default settings; no account is required, though Bowsman has not been successfully installed.

Install Node.js to create and run the Angular project, download and install with default settings, then verify the version to confirm a successful setup.

Learn how to install Graziella Engler's Yalea, a command line utility for creating angler products; install globally with npm install -g, then verify the version using --version.

Create a database and two tables, department and employee, using queries to define an identity id, add department name, employee details, join date, and profile photo name.

Create an API project in Visual Studio, explore configurations, models, and controllers, set up routing, and implement a values endpoint; test with browser and Postman to verify it works.

Force the API to return JSON by updating the method to return an anonymous type of list, adjusting the return type, and validating that the response is in JSON format.

Enable cors to bypass cross-domain blocks when the api and ui run on different servers, by installing a package and configuring the origin, either allowing all or whitelisting specific domains.

Create the department and employee models as blueprints to interact with the database. Define department id as integer and department name as string, with four properties for the employee model.

Create a get API method to fetch data from the department table using a controller. Emphasize replacing raw queries with stored procedures to prevent SQL injection, as demonstrated in Postman.

Implement post, put, and delete operations for the department screen using Angular 10, Web API, and SQL, and validate changes via Postman.

Develop and test an employee API screen by reusing department EPA methods, implementing a new employee controller, with get, post, put, delete operations, and a dropdown of department names.

Create an api method to save uploaded profile pictures by saving the first file to a photos folder, with a custom route and returning the filename as anonymous dot punji.

Explore building an Angular app with two main screens for departments and employees, using component-based architecture and a shared service to manage API data with pop-up add/edit dialogs.

Create an Angular 10 project with routing, skip default styling, and run ng serve to view the app in the browser.

Create department and employee components and a service to consume APIs, with components to show, delete, add, and update, and register the service in providers.

Register the http client and observables, then implement service methods to consume api methods for departments and employees, and save profile pictures.

Learn to implement routing that navigates to department or employee screens by typing keywords, and test the app to verify the routing feature works.

Add Bootstrap to your Angular app to style web pages faster. Use the traditional approach by inserting the Bootstrap stylesheet link and script before the closing body tag in index.html.

Add a navigation menu to switch between the department and employee screens in the app component, using Bootstrap styling and buttons to activate each screen.

Create a departments screen table that displays department data via a shared service API. Initialize and refresh department list asynchronously in ngOnInit, rendering rows with Bootstrap styling and edit/delete options.

Create a bootstrap modal pop-up in an angular app to add or edit departments, pass department data to the add/edit component, and refresh the department list after changes.

Implement add and edit department functionality by passing the department object, binding the department name, toggling actions by department id, and calling add/update APIs via a shared service.

Implement the delete department method using bootstrap icons for buttons, call the department api to remove a department, display a confirmation message, refresh the table, and test the deletion.

Replicate the show department screen for the show employee screen by renaming variables to employee, updating the add component, and using a default profile picture; test confirms the screen works.

Implement the employee screen with upload profile picture, add and edit employee details, and use department and name dropdowns to save data via the FBI method.

Implement a custom sorting and filtering system for a department table using text inputs, a backup data source, and includes-based filtering; control sorting with per-column ascending and descending buttons.

Learn to obtain deployable files for Epper and your project by publishing through the folder publish option, then access the bubblish and bobin folder link to view the dashboard.