[渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS

2022-12-02 16:06:25

原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/

我们最近发布了一个VS2010/2012的项目模板，以支持AngularJS与ASP.Net MVC4。我篇文章描述了引擎下到底发生了什么。我们怎样才能将AngularJS与ASP.Net MVC4很好的揉合在一起。我们在这里打包的项目模板将你初次设置AngularJS的难度降到最低。

对于一个典型的ASP.Net MVC的WebAPI信息流可以通过下面的图来描述。

正如你在图中看到的服务器上的流程基本是相同，但发生变的是客户端，由于AnuglarJS是一个单页面应用（SPA）框架，它带来了一系列功能，帮助提供一个真正的SPA体验给用户。

在一个典型的MVC应用程序中你加载一个视图，执行一些操作，然后导航到另一个视图。这是通过标准的HTTP调用服务器加载HTML和相关内容，通常是通过一整个页面刷新完成的。

在AngularJS中事情有点不同，看起来像在页面没有刷新的情况下加载了内容。一些HTML标记区域里的内容在被浏览时发生变化。

需要注意的是AngularJS并不是一个被应用就能直接使用的Javascript库。它是一个成熟的SPA框架，因此需要一些配置才能将AngularJS和ASP.Net MVC很好的融合在一起。

配置

在我们开始配置前了解一下AngularJS的原理是很重要的。

AngularJS Routing

一旦AngularJS开始工作它将拦截所有的网址导航请求（<a>标记），并停止浏览器刷新整个页面。它是这么处理的：

它开始与用户访问APP的HOME（如http://localhost/home）。这是从一个服务器视图中获取数据的标准HTML请求。
浏览器然后加载必要的HTML和脚本，并设置了AngularJS配置。

AngularJS导航（$location服务）发起请求加载局部视图到一个特定的页面部分（ng-view或ng-include）。

牢记这一点，我们开始设置视图。

Setting up Views

AngularJS有它自己的视图引擎（templating engine），因此我们可以使用标准的HTML文件或razor view返回的HTML内容。如果是标准的HTML文件我们将不能通过动态视图（CSHTML，vbhtml）来获得一些内容。

这篇文章详细描述了如何在razor view中配置。

Master Page (_layout.cshtml)

从一个典型的母版页开始与AnuglarJS集成

<html>

    <head>

         <!-- Style sheet declartion -->

    </head>

    <body ng-app="main" ng-controller="RootController">

         <!-- Header \ Sidebar Content-->

         <div class="container">

            @RenderBody()

         </div>

         <!--Script declarations go here-->

    </body>

 </html>

注意body上ng-app的标签和RootController。 AngularJS bootstraps框架一旦它看到的ng-app被声明。

接下来的步骤则是设置容器（它填充了@ RenderBody（）区域）。

Container HTML View (home/index.cshtml)

一个典型的容器视图可以很简单，比如这：

<div data-ng-view=""></div>

这里的ng-view的声明是一个AngularJS指令，它由包括当前路径的模板渲染到主布局（index.cshtml）文件补充$route的（在内部依赖于$location服务）。

此div现在作为一个容器供其他partial views加载。每当路径（URL）变化在此div的内容都会更具服务端返回内容产生变化。

Other Partial Views

这些都是ASP.NET MVC中模板页之外的标准partial views。

 @{

     Layout = null;

   }

   <h2>Users</h2>

   <div>

         <!--HTML template for rendering user list-->

   </div>

由于这些partial views所提出的请求是不完整的页面请求所以只有HTML片段。

这是标准设置的视图。接下来的部分是路由

Routing Setup

在AngularJS路由的设置是使用$ routeProvider做在配置阶段。

下图显示了如何在AngularJS路由映射到局部视图

如果您的阅读过AngularJS routing，这将立即开始变得有意义。在浏览器的URL变化，该框

架要求已在$ routeProvider配置。

Browser Url : http://localhost/#/demo

Partial requested : http://localhost/home/demo

现在你可以明白是怎么AngularJS和MVC的路由可以在一起很好的工作。

最后一步是设置AnglarJS脚本文件。

AngularJS App Scripts

对于AngularJS的构建包括controllers，指令，过滤器和服务。一些约定可以帮助我们组织应用程序代码中AngularJS。

为每个指令，过滤器和服务创建一个文件

为每一个局部视图创建一个文件

创建一个用于配置常用AngularJS设置和引导应用程序中的app.js文件

最终的结构看起来像这样

码农公寓