Angular API

Learn how to integrate APIs into an Angular project

Objectives

  1. Learn how to apply APIs in an Angular.

  2. Understand how to create, read, update, and delete (CRUD) data using APIs.

  3. Customize and enhance the design of the application using Angular features.

  4. Deploy the final activity on Firebase hosting.

  5. Document the process

Step 1: Fork this

thirdygayares/angular-api: In this repository, we demonstrate how to integrate the API into an Angular application

Step 2: Clone your Fork Repositories

Step 3: Integrate API

The project already includes code for User and Restaurant APIs for your reference.

https://angular-api-activity.web.app/user

documentation:

https://software-engineer.thirdygayares.com/angular-api

Additional Tasks:

  • Implement CRUD functionality for:

    1. Menu

    2. Menu-Category

    3. Restaurant-Category

Apply the CRUD API (CREATE READ UPDATE DELETE)

All files are included in the repository

Step 4: Change the Design

  • You can keep the existing table design, or:

    • Add new styles using CSS Grid or Flexbox.

    • Enhance the layout and design for better user experience.

Step 5: Push your code

Step 6: Deploy to Firebase Hosting

Step 7: Document Your Activity

  • Write a detailed step-by-step process of how you implemented the project.

  • Include:

    • Your GitHub repository link.

    • Firebase hosting link.

    • Screenshots of your output

For your reference

Github

https://github.com/thirdygayares/angular-api

API endpoint
https://testsvfcb.pythonanywhere.com

POSTMAN API DOCS

https://documenter.getpostman.com/view/24626304/2sAYBUDXqC

Sample Out

https://angular-api-activity.web.app/user

Docs:

https://software-engineer.thirdygayares.com/angular-api

Sample:

Updated on