# Angular Basic Routing

**1\. First step is repository Setup:**

Naming my Github repository “AngularBasicRouting“

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726541686746/b39c63cb-f1f6-458a-99aa-5228c3bd26a5.png align="center")

**2\. Create Four Components:**

* `login`
    
* `signup`
    
* `homepage`
    
* `landing page`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726541792786/d1e5029f-dfec-46d0-b81a-bc2f78e6664f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543529442/caf9cbd9-eb59-4a3b-a7bf-c2a078b88fc9.png align="center")

3\. **Set Up Routing**

Set up Angular routing to navigate between the **login**, **signup**, **homepage**, and **landing page** components.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543125242/e13b977d-ad92-4c65-86c6-73286c23ba59.png align="center")

After inputting routes we need to import the “RouterLink“

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543387784/e0a33bc8-5c75-4750-bff3-fe8648fd4423.png align="center")

And then we can run the program

First for the homepage

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543433463/ad32f81f-286f-4ae7-a688-70a524138878.png align="center")

Second for the landing page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543554950/f7976aff-ab31-4e81-8658-ee9ce18c3716.png align="center")

Third for the login page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543567711/e275a047-d8e9-4f62-a2d3-29cb8b3cb945.png align="center")

And last for the signup page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543581157/7cfd8e20-1f9a-4c50-8bc8-e83740ac25fa.png align="center")

After finishing the routing in angular we can add, commit and push the file into our Github account.

Knowing the status of our program if some files are changed and need to be added:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543741153/d6af2c95-fdfd-49ba-93e3-7b023e352a88.png align="center")

Add the files to our repository:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543800617/288c2644-196e-494f-9dc6-d92d6ad1ff41.png align="center")

Commit the following changes:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726543942656/60eacf5a-9293-4913-b7ea-8391ac8a1104.png align="center")

Finished task:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726544001810/aeaa3561-36df-4cbd-b845-c6bfc60684b8.png align="center")

GITHUB LINK: [https://github.com/rodney-lqr/AngularBasicRouting](https://github.com/rodney-lqr/AngularBasicRouting)