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菜单。感谢您阅读我的文章。请分享您的意见或建议。