Navigation Menu Creation Example using AngularJS

By | June 2, 2018

You may have come across a list of categories on each website or application, it is called Menu, which is a broader picture of information that an application would have i.e. any project whose requirements are divided into a number of tasks will be combined under one tree called MENU. The best example we can say as, any shopping site will have a submenu called Electronics, Clothing, Home appliances etc under “Department”. Click on the link to learn login functionality in AngularJS. If you are looking for a combined login and registration application, click on the link.

In this article, we will see how can we navigate from one submenu to other using AngularJS.

We will build a simple shopping site application with below menu titles. On clicking on any menu item it displays which menu item is chosen.

  1. Home
  2. Electronics
  3. Appliances
  4. Clothing

We will have application folder structure with 3 files: index.html, app.js and style page style.css

The below code explains index.html.

As you can see above, we have used nav directive for navigation menu and 4 hyperlinks called Home, Electronics, Appliances and Clothing and 2 paragraphs for showing which menu is chosen.

The below code shows a javascript file app.js. This file is used as a controller for application module creation and having other logics if required.

Since we do not have any logic to be included in this app, we have just created an app module to include ngMdIcons.

We have stylesheet file for styling this application. Please take a look at it below.

 

Let us run this application and look at the result. The below image gives a picture of initial phase when you run your application, it looks like below.

Navigation Menu Creation Example using AngularJS

Since the user has not clicked on any menu item, the description shows to select something.

When the user selects/clicks a menu, the description will be changed to “you chose ….”. Also, observe the change in menu text color.

Shopping site menu example in AngularJS

Conclusion:

Navigation creation in AngularJS is very easy and anyone can create it within less time. You can also try using a fancy stylesheet to increase the look and feel.




Suggested articles for you:

Did it help? Comment here..

This site uses Akismet to reduce spam. Learn how your comment data is processed.