Task: Create a simple Angular project with basic routing and four components: login, signup, homepage, and landing page. The project will showcase using Angular routing to navigate between these components.
First open up the terminal, in my case bash terminal. I am running pwd to find out the working directory where I am currently. Then after that, I use cd to change the directory to the desired folder—in my case D:/Projects. After that, I run the command ng new AngularBasicRouting to get the boilerplate and setup files ready.
To check if the project is created I run ls (list directory) to get the lists of all folders on my current working directory. Notice we already have it, In the AngularBasicRouting folder we do the cd command once again to get to that folder.
After doing the cd command running the ng g c login && ng g c signup && ng g c homepage && ng g c landing-page gives us 4 total components. g is short for generate and c is for component and the ampersand just chains the different commands into a single command.
Run the code . to open the vs code on that current working directory:
Running the ng s will give this boilerplate code:
Go to the VSC menu by clicking the Ctrl + Shift + G G the let’s add a commit message in this case short yet meaningful ‘added new pages component’ then commit and push
Click public branch:
A small window will appear hit enter it’ll create a repository for you (streamlined):
Adding some tweaks to have a clean import using @ path resolution (highly optional):
Edit the app.route.ts as follows to get things working on routing. The right side is the changes. We’re adding components that earlier we generated using angular CLI command as follows:
And on the app.component.ts We’re removing the template URL as this file's role is to enable routing.:
Next, we’ll create a reusable navbar:
Next up we’ll use that reusable navbar as follows:
In the figure above, we import it from its directory after we import it into the @Component Decorator
Then after importing it, the selector property of it will be available inside the HTML:
Looking at the current state of the app at localhost:4200:
Now let’s tweak the navbar component ts and HTML files:
Then we leverage the Emmet Abbreviate to generate a nav items and link:
We’re going to use the routerLink attribute from RouterLink we’ve imported. Make sure the URL matches:
Then we got this:
This angular app looks as follows:
Don’t forget to commit the changes and push it to the GitHub
Repository link: froilanimnida/AngularBasicRouting (github.com)