原文地址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文件
最终的结构看起来像这样
