Scribd
Upload
3 views4 pages

Angular Assignment

Angular Assignment for the preparation of Angular

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

Angular Assignment

Angular Assignment for the preparation of Angular

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Angular Assignment: Create a Basic Form and Folder

Structure
Objective:

Learn to set up an Angular project with a proper folder structure and


create a basic form with user input handling.

Assignment Details:

Part 1: Project Setup and Folder Structure

1. Create a new Angular project using the Angular CLI:

ng new AngularFormAssignment

2. Create a folder structure inside the src/app directory:

3. Ensure the application follows a modular and organized structure:

o components: Contains all reusable and feature-specific


components.

o services: Contains all service logic for handling data and


business logic.

o models: Contains TypeScript interfaces and classes to define


application data models.

4. Set Up a .NET Web API:


Create a new .NET Web API project:

dotnet new webapi -n UserRegistrationAPI


Configure the API to handle CORS for integration with the Angular
frontend.

5. Set Up the Backend Folder Structure:


Organize the Web API with the following structure:

o Controllers: Contains API controllers (e.g., UserController.cs).

o Models: Contains classes representing data models (e.g.,


User.cs).

o Services: Contains service logic for business rules and data


handling.

Part 2: Create a User Registration Form

1. In the form.component.html, create a form with the following fields:

o Full Name

o Email

o Password

o Confirm Password

2. Add Angular validation rules:

o All fields are required.

o Email must be in a valid format.

o Password and Confirm Password must match.

3. Display validation error messages beneath each field when invalid.

4. Use two-way binding to capture user input in the form.component.ts


file.

Backend (Web API)

1. Create an API endpoint for user registration:

o Define a User model with properties for Full Name, Email, and
Password.

o Implement a POST endpoint in the controller to accept and


save user details temporarily in memory.
Part 3: Submit Form

1. Frontend

On Form Submission:

o Send the user details to the .NET Web API backend using the
HttpClient service.

o Log the user details in the browser console.

o Display a success message upon successful submission.

2. Service Integration:
Create a data.service.ts file to manage communication between the
Angular app and the Web API.

3. Backend

o Save the user details temporarily in memory using a service or


static storage.

o Validate the incoming data in the API and return appropriate


responses (e.g., success or validation errors).

Expected Features:

 Properly organized folder structure.

 Functional and validated user registration form.

 Error messages displayed for invalid fields.

 Success message displayed on successful form submission.

 Simulated backend using Angular services.

Bonus Challenge:

 Implement a button to reset the form fields.

 Style the form using CSS to improve its appearance.


Deliverables:

 Angular Project Folder: The complete Angular project folder with


implemented solution.
 Validation Screenshot: A screenshot of the form with validation in
action.
 Success Screenshot: A screenshot of the success message upon
form submission.
 Challenges Faced: A brief description of the challenges
encountered during the assignment.

You might also like