65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 ASP.NET MVC5 的 AngularJS HelloWorld 简介

Mathew Soji
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (32投票s)

2014年9月27日

CPOL

3分钟阅读

viewsIcon

67966

downloadIcon

2

使用 AngularJS 框架与 ASP.NET MVC5 的基本介绍

引言

本文介绍 AngularJS 与 ASP.NET MVC5 应用程序。我们将使用 Angular 框架开发一个简单的 Web 应用程序，并将其与 ASP.NET MVC 集成。在这里，我将使用 AngularJS 开发一个 Hello World 类型的 ASP.NET MVC5 应用程序。

在我们开始之前，先简单介绍一下 AngularJS。AngularJS 是一个开源的 Web 开发框架，最适合创建 SPA（单页应用程序 - 我们有一个主页，我们可以将多个视图/页面加载到主页中的应用程序）。AngularJS 使用新的属性扩展了 HTML，通过双向数据绑定提供动态内容，从而可以自动同步模型和视图。

ASP.NET MVC5 是微软的一个开源 Web 开发框架，它利用了 ASP.NET 和 .NET Framework 的强大功能。

对于演示应用程序，我将使用 Visual Studio Express 2013 for Web 作为开发环境，目标是 .NET framework 4.5。

步骤 1

打开 Visual Studio 2013 for Web 并创建一个新的 ASP.NET Web 应用程序，选择空模板并选中添加 MVC 的文件夹和引用的选项，如下所示

现在我们已经创建了一个基本的 ASP.NET MVC 文件夹，带有非常少的引用。解决方案资源管理器如下所示

第二步

我们需要下载 AngularJS 文件并使用 NuGet 包管理器添加到我们的解决方案中。

  • 在 VS 2013 解决方案资源管理器中 -> 右键单击引用并选择管理 NuGet 程序包。
  • 搜索“angularjs”并安装 AngularJs Core 库，如下所示。

注意：在这里，您可以直接从 Angular 网站下载 AngularJS 库，并将其添加到scripts文件夹中，而不是使用 NuGet。

安装成功后，我们可以在解决方案资源管理器 -> /scripts文件夹下看到 AngularJS 文件。

步骤 3

在我们的解决方案资源管理器中的“\Views”文件夹下创建一个名为“Angular”的子文件夹，如下所示。

  • 解决方案资源管理器 -> 右键单击 Views 文件夹 -> 添加 -> 新建文件夹
    将文件夹命名为“Angular”以保存我们的视图。
  • 解决方案资源管理器 -> 右键单击 Angular 文件夹 -> 添加 -> 视图...
    添加一个空的模板视图并将其命名为Index.cshtml。

步骤 4

现在我们需要为我们的 Angular 视图文件夹创建一个相应的控制器。

  • 解决方案资源管理器 -> 右键单击 Controller 文件夹 -> 添加 -> 控制器...
    选择 MVC 5 Controller – 空模板并将控制器文件重命名为AngularController.cs。

在步骤 3 和步骤 4 之后，我们的解决方案资源管理器如下所示

现在我们的应用程序已准备好运行。要测试，请按 F5（或您在 Visual Studio 中配置的任何调试键），并查看加载的空白索引页。

步骤 5

要将 Angular 框架用作我们应用程序的一部分，我们需要添加对脚本文件的引用，如下所示。

在我们的Index.cshtml文件中，添加如下代码。您也可以简单地将 AngularJS 脚本文件拖放到 HTML head 标记下。添加 AngularJS 脚本文件使我们的 ASP.NET MVC 5 应用程序能够利用 Angular 框架的功能。

@*Index.cshtml*@
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
        <script src="~/scripts/angular.js"></script>
    <title>Index</title>
</head>
<body>
    <div>
        Angular JS Demo
    </div>
</body>
</html>

步骤 6

接下来，我们将添加代码以显示 Angular 框架的简单绑定功能。

将以下代码添加到我们的视图中。

这里，ng-app 指令被添加到将 div 部分定义为 Angular JS 应用程序。如果没有此指令，我们的应用程序将无法生成 AngularJS 功能。

ng-model 指令将 HTML5 输入文本框控件绑定到 Angular 应用程序变量“helloworld”。

{{  }} - AngularJS expressions are written inside double braces {{ expressionname }}.
@*Index.cshtml*@
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/scripts/angular.js"></script>
    <title>Index</title>
</head>
<body>
    <div ng-app="">
        Angular JS Demo <br />
        Input :  <input type="text" ng-model="helloworld" /><br />

        {{helloworld}}

    </div>
</body>
</html>

现在，按 F5（或您在 Visual Studio 中配置的任何调试键）以查看 AngularJS 绑定演示。在输入控件中输入一些文本，相同的文本将使用 Angular 显示在输入控件下方。

这只是关于如何将 Angular 框架与 ASP.NET MVC 5 一起使用的初学者文章。请参阅 Angular 文档，以获取有关 AngularJS 指令和其功能的更多详细信息。

在生产版本中，我们需要使用 ASP.NET 的捆绑功能来缩短加载时间。此外，您可以从内容分发网络 (CDN) 服务器加载 AngularJS 脚本文件，作为最佳实践。

© . All rights reserved.