# ACTIVITY 7: Angular Basic Routing

## Simple Angular Project with Basic Routing

In this project, I created a simple Angular application with basic routing to demonstrate navigation between different components.

## Components Created:

* Login
    
* Signup
    
* Homepage
    
* Landing Page
    

## Steps Followed:

1. Created the project using Angular CLI.
    
2. Generated the four components.
    
3. Configured routing using the `app-routing.module.ts` file.
    
4. Created basic templates for each component.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726473832572/8731e279-bff0-4f43-903a-f332d022c38e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726473926034/25a8ad5a-ca4d-409a-aa2e-3abc38264c63.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726473999362/e4bfee36-3364-4da0-b798-702968491f0d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726545246071/8e1427b4-4f0e-4825-a82f-e5434a3069bb.png align="center")

### Output :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726546175383/edbbb3cd-628e-4b95-bb70-18c9f22ad736.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726546185241/c2280025-8312-43ba-a555-2c78a7006e0a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726546191687/ad63c5b6-7598-4129-bae4-411b96fa6459.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726546197959/32ec4f0f-7196-431f-9899-41ac4c2c48bc.png align="center")

[https://github.com/JoshuaNato/AngularBasicRouting1](https://github.com/JoshuaNato/AngularBasicRouting1)