Post
Ask Question

Menu In AngularJS

We will discuss how to create an AngularJS menu easily and understand the sample menu application.

Steps 1:

Open Visual Studio 2015 and go to file menu and point the new and then click new project. New ASP.NET project window will open, you can select a Empty Template with No Authentication and then click OK button.

 

Go to Solution Explorer and right click the project name and then click Manage NuGet Packages.
 
 

NuGet Package Manager window will open and you can type AngularJS and browse. Also select AngularJS.Core and click Install button
 

Preview window will open and you can see the AngularJS version installing details and click OK button. After it is successfully installed in AngularJS, you can see the following,

 

You can see AngularJsMenuDemo project structure in the following screenshot.
 
 
 
Steps 2:
 
Menu.html code here, 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>San2Debug.net | AngularJs Menu Apps Demo</title>  
  5.     <link rel="stylesheet" href="Style/menu.css" type="text/css" />  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.       
  9. </head>  
  10. <body>  
  11.     <div id="main" ng-app="">  
  12.        <ul class="{{active}}" ng-click="$event.preventDefault()">  
  13.            <li><a href="#" class="home" ng-click="active='home'">Home</a></li>   
  14.            <li><a href="#" class="aboutus" ng-click="active='aboutus'">About Us</a></li>   
  15.            <li><a href="#" class="contactus" ng-click="active='contactus'">Contact Us</a></li>   
  16.         </ul>        
  17.         <p ng-show="active">Sitemap <span>> </span><b>{{active}}</b></p>    
  18.     </div>     
  19. </body>  
  20. </html>  
Menu.aspx code here, 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="AngularJsMenuDemo.Menu" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>San2Debug.net | AngularJs Menu Apps Demo</title>  
  6.     <link rel="stylesheet" href="Style/menu.css" type="text/css" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <form id="menuform" runat="server">  
  11.     <div id="main" ng-app="">  
  12.        <ul class="{{active}}" ng-click="$event.preventDefault()">  
  13.            <li><a href="#" class="home" ng-click="active='home'">Home</a></li>   
  14.            <li><a href="#" class="aboutus" ng-click="active='aboutus'">About Us</a></li>   
  15.            <li><a href="#" class="contactus" ng-click="active='contactus'">Contact Us</a></li>   
  16.         </ul>        
  17.         <p ng-show="active">Sitemap <span>> </span><b>{{active}}</b></p>    
  18.     </div>    
  19.     </form>  
  20. </body>  
  21. </html>  
Steps 3: AngularJS Menu Application demo output as in the following screenshot,

 
 
Menu.aspx
 
 

Note: 

You can also read this article in my blog here.

Conclusion:

This article helps you to understand AngularJS Menu with sample application using Visual Studio 2015. Thank you for reading my articles. Kindly share your comments or suggestion.


Similar Articles