ACTIVITY 7: Angular Basic Routing

Create and Name your GitHub repository AngularBasicRouting

2. "Create a folder for your Angular project and name the folder 'activity-angular-basic-routing'."

   

3. Open your command prompt (CMD) and navigate to the top level of your project folder, then type "ng new Angular-Basic-Routing" to create a new Angular project.

   

4. Use the command "ng serve" to start a development server and run your Angular application locally.

   

Next, open your Angular project in your preferred editor, such as Visual Studio Code. Create a folder named "components" within your project directory to organize your Angular components.

Within your newly created "components" folder, use the Angular CLI to generate four components: "login", "signup", "homepage", and "landingpage".

Create a new file named app.module.ts within your Angular project's root directory. and Open your app.module.ts file and ensure it includes the necessary imports for routing, form handling, animations, and your newly created components, following the structure provided in the example.

To streamline the All ComponentsAppComponent, remove the standalone: true flag and the imports: [] array from its definition, ensuring that the HomepageComponent, loginComponent, signupComponent, and landingpageComponent are properly integrated within the application's structure.

To ensure the application starts correctly, the main.ts file needs to bootstrap the AppModule. This file serves as the entry point for your Angular application.

The app.component.html file now features navigation links to the Homepage, Loginpage, Signuppage, and LandingPage, allowing users to easily access different sections of the application.

The output displays navigation links to the Homepage, Loginpage, Signuppage, and LandingPage, providing users with easy access to various sections of the application.

To see the status of your Git repository at the top of your Angular app folder, open your command prompt or terminal and type git status.

If you have unstaged changes in your Angular app folder, you can add them to the staging area using the command git add .. This command will add all tracked files with changes to the staging area, preparing them for committing.

After adding your changes with git add ., you can use git status to view the current status of your Git repository and see which files are staged for your next commit.

To create your first commit with the staged changes and a descriptive message, you can use the command git commit -m "first commit". This will create a snapshot of your project's current state and associate it with the message "first commit".

To rename your current branch to "main", you can use the command git branch -M main. This command will update the name of your current branch to "main", making it the default branch for your repository.

To connect your local Git repository to a remote repository, you can use the command git remote add origin <remote_repository_URL>. This command will establish a connection between your local repository and the remote repository, allowing you to push and pull changes.

To push your local changes to the remote repository and set the upstream branch for future pushes, you can use the command git push -u origin main. This command will push the changes from your local "main" branch to the "main" branch on the remote repository and configure the remote branch as the upstream for your local branch.

Here is the link to my GitHub repository:

https://github.com/jerome09232/AngularBasicRouting.git