First create an empty asp.net application and add a web form named ”Default.aspx” to it.

Now add “angular.min.js” file to your project because this file is necessary for working with angular js.

Step 2

Now add “angular.min.js” file to your head section of your page by drag-n-drop from the solution explorer like this:

<headrunat="server">
    <title>Navigation Menu</title>
    <scriptsrc="angular.min.js"></script>
</head>

Step 3

Next add the ng-app attribute to the body tag:

<bodyng-app>

By defining the ng-app attribute in the body tag, it denotes that the angular will active on whole body tag. If you want to enable angular for whole html page, put it in html tag.

Step 4

Now write the following code in the body section of the webpage:

<navclass="{{active}}"ng-click="$event.preventDefault()">
        <ahref="#"class="home"ng-click="active='home'">Home</a>
        <ahref="#"class="services"ng-click="active='services'">Services</a>
        <ahref="#"class="products"ng-click="active='products'">Products</a>
        <ahref="#"class="contactUs"ng-click="active='contactUs'">Contact Us</a>
    </nav>
    <png-hide="active">Please click on a menu item</p>
    <png-show="active">You Choose:<b>{{active}}</b></p>

And also add the following style tag in the head section:

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0auto;
            text-align: center;
        }
        nav {
            display: inline-block;
            margin: 60pxauto45px;
            background-color: #17c5ed;
            border-radius: 2px;
            box-shadow: 0px1px1px#ccc;
        }
            nava {
                display: inline-block;
                font-size: 16px;
                padding: 18px30px;
                text-decoration: none!important;
                line-height: 1;
                text-transform: uppercase;
                font-weight: bold;
                color: black!important;
                background-color: transparent;
                transition: background-color0.25s;
            }
            nav.home.home,
            nav.products.products,
            nav.services.services,
            nav.contactUs.contactUs {
                background-color: #e35885;
            }
        p {
            font-size: 22px;
            font-weight: bold;
            color: #7d9098;
        }
            pb {
                color: #ffffff;
                display: inline-block;
                padding: 5px10px;
                background-color: #c4d7e0;
                border-radius: 2px;
                text-transform: uppercase;
                font-size: 18px;
            }
    </style>

Output