Terminology
Components - an Angular component is a small part of a webpage that has its own design, content, and actions. It can be reused and combined with other components to build a full website. Components help keep the website organized and easy to manage.
Module - a module is a container that organizes related components, services, and code into one group. This helps keep the app structured and easier to manage. Modules can be reused and combined to build different parts of the app.
Routes - routes let users navigate between different pages or views without reloading the whole app. Each route connects a URL to a specific component. This makes moving through the app smooth and fast.
In this activity, I created a folder named Angular Walkthrough to guide me when I forget something I can return to it. This will be the compilation of all lessons and activities.
Instructions:
1. Create a repository named AngularBasicRouting
2. In the app folder, create a component folder where you will place the homepage, landing page, log in, and sign up, and then make components using the command below.
Terminal Command:
ng generate component homepage
ng generate component landing-page
ng generate component login
ng generate component sign-up
3. Add a typescript file to the app named app.module.
The app.module.ts is the main module that sets up the application. It defines which components, services, and other modules the app uses and tells Angular which component to start with. It helps organize and connect different parts of the app.
Content of app.module.ts
4. Remove standalone: true and imports: [] from all components
5. Update main.js
6. Update app.component.html
7. Output
Github link: https://github.com/Walterific/AngularBasicRouting.git