AngularJS中的菜单

by Santhakumar Munuswamy

  Posted on  24 十二月 2015

  AngularJS


 

这个 article explains the how to create an AngularJS menu with a demo application using visual studio 2015.

We will discuss 怎么样 to 创造 AngularJS菜单 easily and understand 的 sample menu 应用.

脚步 1:

Open Visual Studio 2015 and go to file menu and point 的 new and 的n click new project. 新的ASP.NET项目窗口将打开, 您可以选择一个 空的 Template 与 没有身份验证n and 的n click OK button.

Go to Solution Explorer and right click 的 project name and 的n click Manage NuGet Packages.

NuGet软件包管理器窗口将打开,您可以键入AngularJS并浏览。同时选择AngularJS.Core 然后点击安装按钮

Preview window will open and you can see 的 AngularJS version installing details and click OK button. 成功之后 installed in AngularJS, you can see 的 following,

你可以看到 AngularJsMenuDemo project structure in 的 following screenshot.

脚步 2:

Menu.html

<!DOCTYPE html>
<html>
<head>
    <title>San2Debug.net | AngularJs菜单 Apps Demo</title>
    <link rel="stylesheet" href="Style/menu.css" type="text/css" />
	<meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    
</head>
<body>
    <div id="main" ng-app="">
       <ul class="{{active}}" ng-click="$event.preventDefault()">
           <li><a href="#" class="home" ng-click="active='home'">Home</a></li> 
           <li><a href="#" class="aboutus" ng-click="active='aboutus'">About Us</a></li> 
           <li><a href="#" class="contactus" ng-click="active='contactus'">Contact Us</a></li> 
        </ul>      
        <p ng-show="active">Sitemap <span>> </span><b>{{active}}</b></p>  
    </div>   
</body>
</html>

Menu.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="AngularJsMenuDemo.Menu" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>San2Debug.net | AngularJs菜单 Apps Demo</title>
    <link rel="stylesheet" href="Style/menu.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <form id="menuform" runat="server">
    <div id="main" ng-app="">
       <ul class="{{active}}" ng-click="$event.preventDefault()">
           <li><a href="#" class="home" ng-click="active='home'">Home</a></li> 
           <li><a href="#" class="aboutus" ng-click="active='aboutus'">About Us</a></li> 
           <li><a href="#" class="contactus" ng-click="active='contactus'">Contact Us</a></li> 
        </ul>      
        <p ng-show="active">Sitemap <span>> </span><b>{{active}}</b></p>  
    </div>  
    </form>
</body>
</html>

脚步 3:

AngularJS Menu Application 演示 output as in 的 following screenshot,

 Menu.aspx

结论  

本文可帮助您通过使用Visual Studio 2015的示例应用程序来了解AngularJS菜单。感谢您阅读我的文章。请分享您的意见或建议。

 


关于 的 作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师,并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计,软件产品开发,技术文档,Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域(汽车,电信,医疗保健,物流和仓库自动化等)的IT行业经验丰富,担任过技术架构师,Genesys顾问,技术负责人,团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我: 脸书, 推特, 谷歌加, 领英
博客评论由 领英


月份清单

社区徽章