Create a client-side web application using Angular 20 that includes navigation, API
consumption using Angular service with HTTP client, and reactive forms. Deploy the
application to a public server or platform. Requirements: Set Up the Angular Project:
Initialize a new Angular 18 project using Angular CLI. Set up routing for client-side
navigation. Create Client-Side Navigation: Implement a navigation bar with links to
at least three pages: Home, API Data, and a Form Page. Use Angular Router to
handle navigation. Create Pages: Home Page: A simple landing page with
introductory text. API Data Page: A page that consumes data from a public API and
displays it. Form Page: A reactive form to submit any user feedback, quiz, survey or
contact information. Use Angular Service and HTTP Client: Create a service to
handle API requests. Use Angular’s HttpClient to fetch data from any public API.
Implement methods in the service to retrieve data and handle responses.
Implement Reactive Form: Create a reactive form on the Form page with at least 3
fields. Validate the form inputs (e.g., required fields, valid email format). Display
validation errors and feedback to the user. Deploy the Application: Build the Angular
application using Angular CLI. Deploy the application to a public hosting platform
such as GitHub Pages, Netlify, or Vercel.
ChatGPT said:
The instructions you provided are generally clear and actionable, but they can be
refined slightly for consistency, clarity, and accuracy—especially if intended
as an agentic prompt (meant for AI agents or students following detailed
instructions).
Here’s a refined and enhanced version suitable for an agentic context:
Agent Task: Build and Deploy a Client-Side Angular Web Application
Objective:
Create a fully functional client-side web application using Angular 18 (Note: you
mentioned Angular 20 in the intro—please clarify the version). The application
should demonstrate routing, API consumption using Angular services and HttpClient,
and reactive forms. Finally, deploy it to a public platform.
Project Requirements
1. Initialize the Angular Project
Use Angular CLI to create a new Angular 18 project.
Enable routing during setup.
Use SCSS or CSS as per your preference.
2. Implement Client-Side Navigation
Add a navigation bar that includes links to the following:
o Home
o API Data
o Form Page
Use Angular’s RouterModule to define and handle routes.
3. Create Pages
Home Page:
Display introductory text (e.g., “Welcome to the Angular App!”).
API Data Page:
o Create an Angular service to fetch data from a public API (e.g.,
JSONPlaceholder, OpenWeatherMap).
o Use HttpClient to send GET requests.
o Display the fetched data in a readable format (e.g., table, cards, or
list).
Form Page:
o Create a reactive form with at least 3 fields (e.g., Name, Email,
Message).
o Add validation:
Required fields
Valid email format
o Show validation messages in real time.
4. Use Angular Service and HTTP Client
Create a dedicated Angular service (e.g., ApiService) for handling API logic.
Use dependency injection to use this service inside the API Data Page
component.
Handle success and error responses properly with UI feedback.
5. Implement Reactive Forms
Use FormBuilder to construct a reactive form.
Use validators like Validators.required and Validators.email.
Display user-friendly error messages for invalid inputs.
6. Build and Deploy
Run ng build --configuration production to generate a production build.
Deploy to one of the following:
o GitHub Pages (using angular-cli-ghpages)
o Netlify
o Vercel
✅ Success Criteria
Application compiles and runs without errors.
Navigation works smoothly between all pages.
API data is fetched and displayed dynamically.
Form validates and shows real-time feedback.
The app is publicly accessible via a live deployment link.
🔧 Optional Enhancements
Add styling with Angular Material or Bootstrap.
Use loading indicators while fetching API data.
Persist form data using local storage or simulate submission.
Summary:
Yes, your instructions are mostly good already. The above version enhances them
by:
Fixing version mismatch (Angular 18 vs 20).
Structuring steps clearly.
Clarifying tools, expected outcomes, and validations.
Making it easier to follow for both humans and AI agents.
