AngularJS中的菜单

by Santhakumar Munuswamy

  Posted on  24 December 2015

  AngularJS


 

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

我们将讨论如何轻松创建AngularJS菜单并了解示例菜单应用程序。

脚步 1:

打开Visual Studio 2015并转到文件菜单,指向新的,然后单击新项目。 新的ASP.NET项目窗口将打开, 您可以选择一个 空的 带有模板 没有身份验证n,然后单击确定按钮。

转到解决方案资源管理器,右键单击项目名称,然后单击“管理NuGet程序包”。

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

预览窗口将打开,您可以看到AngularJS版本的安装详细信息,然后单击确定按钮。 成功之后 installed in AngularJS,您可以看到以下内容,

你可以看到 AngularJsMenuDemo 下面的屏幕快照中的项目结构。

脚步 2:

Menu.html

<!DOCTYPE html>
<html>
<head>
    <title>San2Debug.net | AngularJs Menu 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 Menu 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演示输出如以下屏幕截图所示,

 Menu.aspx

结论  

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

 


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

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


Month List

社区徽章