(翻译)如何在ASP.Net MVC和Entity Framework中使用AngularJS
原文地址：http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx
这些日子，看起来像是每个人都在谈论AngularJS和ASP.NET MVC。所以在这篇博文中，我们通过在ASP.NET MVC应用程序中使用AngularJS来演示如何将两者有效地结合在一起，并充分利用AngularJS的优点。在后面，我们将看到如何使用Entity Framework作为第一解决方案来获取数据，然后我们还将看到如何在AngularJS中获取数据，并使用控制器将数据传递到视图中。简而言之，这篇文章会包含以下几点：
l 在ASP.NET MVC中添加AngularJS库；
l 引用AngularJS，捆绑及微小；
l 使用EF获取数据；
l 从ASP.NET控制器返回JSON数据；
l 在AngularJS服务中处理JSON数据；
l 在AngularJS控制器中使用AngularJS服务来传递数据到视图，并且在AngularJS视图中渲染这些数据。
一开始，先创建一个 ASP.NET MVC应用程序，并右击该项目。从上正文菜单中，点击管理Nuget包。找到AngularJS包并安装进项目中。
安装好AnngularJS库后，您会在Scripts文件夹中找到这些文件。
引用AngularJS库
您有两个办法来在项目中引用AngularJS：MVC微小和捆绑系统，或在单个视图的Script节中引用AngularJS。如果您使用捆绑系统，AngularJS将在整个项目中可用。或者您也可以只在特定视图中使用AngularJS。
我们假定您只在Home控制器的特定视图（Index.cshtml）中使用AngularJS。首先您要在scripts节中引用AngularJS库，如下所示：
@section scripts{
<script src="~/Scripts/angular.js">script>
}
接下来，在HTML元素中应用ng-app指令及其它所需的指令，如下所示：
<div ng-app="" class="row">
<input type="text" ng-model="name" />
{{name}}
div>
当您运行应用程序时，您会发现AngularJS在视图中运行了。在当前程序中，您不能在其它视图中使用AngularJS，因为您只在Index视图中引用AngularJS库。
您可能需要在整个MVC应用程序中使用AngularJS。鉴于此，您最好是使用在布局页层级上，利用MVC的捆绑和微小系统将AngularJS引用进来。做法是，从App_Start文件夹打开BundleConfig.cs文件，并加入AngularJS的bundle配置，如下所示：
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(newScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js"));
在BundleConfig 文件中添加bundle后，您需要在Layout.cshtml中添加AngularJS bundle，如下所示：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Applicationtitle>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
head>
After creating an AngularJS bundle and referring to it in _Layout.cshtml, you should be able to use AngularJS in the entire application.
在Layout.cshtml创建了AngularJS bundle，您就可以在整个应用程序中使用AngularJS了。
从数据库中获得数据，并在AngularJS中使用
到目前为止，我们看到了如何在特定的视图中，及在整个应用程序中安装AngularJS。现在让我们继续看看如何在端到端的MVC程序中做以下事情：
1. 使用EF从数据库中获取数据。
2. 从MVC控制器中返回JSON数据。
3. 创建一个AngularJS服务，使用$http来获取数据。
4. 创建一个AngularJS 控制器。
5. 在MVC视图中创建一个 AngularJS 视图，并在表格中展示数据。
使用EF连接数据库
要使用EF连接数据库，首先右击MVC应用程序并选择新建项。从数据选项卡中，选择ADO.NET Entity Model，如下所示：
下一步，选择EF Designer from database。
继续下一步，点击新建连接，连接到数据库。
1. 提供数据库服务器名。
2. 从下拉列表中选择数据库。这里我们选择“学校”数据库。
下一步，连接字符串保持默认。
下一步，选择你想要用作模型的表或者其它实体。简单起见，我这里只选择“Person”表格作为模型。
到目前为止我们创建一个数据库连接，并将模型添加到了项目中。你会看到项目中多出了一个edmx文件。
从MVC控制器返回JSON
要将Person数据作为JSON返回，在控制器添加一个action，返回类型为JsonResult。注意，您也可以很容易写一个WebAPI来返回JSON数据。不过该教程的目的是向您展示如何使用AngularJS，所以我坚持最简单的选择，那就是创建一个action来返回JSON数据。
public JsonResult GetPesrons()
{
SchoolEntities e = new SchoolEntities();
var result = e.People.ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
创建一个AngularJS服务，使用$http来获取数据
我假定您已了解如下AngularJS名词，不过还是让我们快速过一篇核心概念：
控制器
控制器是一个JavaScript构造函数，包含了业务逻辑和数据。控制器和视图之间用$scope对象通讯。每一次控制器使用视图，都会创建一个实例。因此如果我们使用10次，就会有10个构造器的实例被创建。
服务
服务是一个JavaScript函数，在程序的单个生命周期内，只创建一个实例。跨控制器分享的任何东西都是服务的一部分。可以用5种不同的方式创建服务。最流行的是使用service方法或者factory方法。AngularJS提供了许多内置的服务：比如$http服务可以用来从Angular程序中调用基于http的服务，不过在服务使用前，必须先将它注入。
模块
模块是一系列JavaScript函数，包含了服务或控制器在内。一个Angular程序必须至少拥有一个模块。
这些只是AngularJS最基本的定义，您可以在网上搜寻到更多的资料。
现在开始创建一个模块！首先，右击项目并添加一个JavaScript文件。你可以任意取名，不过在本例中，我们取名StudentClient.js。
在StudentClient.js中创建一个模块和一个简单的控制器。迟些我们会修改该控制器，让它从MVC的action中获取数据。
var StudentApp = angular.module('StudentApp', [])
StudentApp.controller('StudentController', function ($scope) {
$scope.message = "Infrgistics";
});
要在视图上使用模块和控制器，你需要将StudentClient.js文件引入，并设置ng-app指令的值为“StudentApp”。下面是做法：
@section scripts{
<script src="~/StudentClient.js">script>
}
<div ng-app="StudentApp" class="row">
<div ng-controller="StudentController">
{{message}}
div>
div>
运行程序，你会发现angularjs成功渲染了页面。让我们开始创建服务。我们这里使用factory方法创建服务。在服务中，使用内置的$http服务调用MVC控制器的action。我们将服务也放在StudentService.js文件中。
StudentApp.factory('StudentService', ['$http', function ($http) {
var StudentService = {};
StudentService.getStudents = function () {
return $http.get('/Home/GetPersons');
};
return StudentService;
}]);
一旦服务被创建，下一步需要创建一个控制器。在控制器中我们将使用自定义的服务，并将返回的数据赋给$scope对象。让我们看看如何创建控制器：
StudentApp.controller('StudentController', function ($scope, StudentService) {
getStudents();
function getStudents() {
StudentService.getStudents()
.success(function (studs) {
$scope.students = studs;
console.log($scope.students);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
}
});
现在我们创建了控制器，服务，和模块。将代码整合，StudentClient.js将是这样：
var StudentApp = angular.module('StudentApp', []);
StudentApp.controller('StudentController', function ($scope, StudentService) {
getStudents();
function getStudents() {
StudentService.getStudents()
.success(function (studs) {
$scope.students = studs;
console.log($scope.students);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
}
});
StudentApp.factory('StudentService', ['$http', function ($http) {
var StudentService = {};
StudentService.getStudents = function () {
return $http.get('/Home/GetPersons');
};
return StudentService;
}]);
在视图中，我们可以使用控制器了。不过要记住，我们是在Index.cshtml创建了一个AngularJS视图。如下所示：
@section scripts{
<script src="~/StudentClient.js">script>
}
<div ng-app="StudentApp" class="container">
<br/>
<br/>
<input type="text" placeholder="Search Student" ng-model="searchStudent" />
<br />
<div ng-controller="StudentController">
<table class="table">
<tr ng-repeat="r in students | filter : searchStudent">
<td>{{r.PersonID}}td>
<td>{{r.FirstName}}td>
<td>{{r.LastName}}td>
tr>
table>
div>
div>
在视图中，我们使用ng-app，ng-controller, ng-repeat,和ng-model指令，同时使用“filter”过滤了textbox中的输入。本质上它们是AngularJS和ASP.NET MVC应用程序相结合的过程。
结论
在这篇教程中我们着重于一些简单却重要的步骤来使AngularJS和ASP.NET MVC结合工作。我们也接触了一些关键AngularJS组件的基本概念，EF框架和MVC。在未来的教程中我们将更深入该主题，不过我希望这篇教程能让你上手在ASP.NET MVC中使用AngularJS。感谢阅读！
