【转】asp.net mvc webapi+angular.js案例

时间 2019-11-22

标签 asp.net asp mvc webapi+angular.js webapi angular 案例栏目 ASP 繁體版

原文原文链接

参考地址：http://www.mamicode.com/info-detail-892383.htmlhtml

你们好，本文用一个简单的demo演示AngularJS在MVC中的使用，在学习这个demo以前，须要你对angularJS有基本的了解，而且对asp.net webAPI也了解一些，我最近也是由于公司项目须要，才开始学习这两种新的知识（对我而言）。web

网上对于angularJS和MVC结合的资料不多，因此在学习过程当中走了不少弯路，在刚刚搞明白的时候，赶忙写下一篇笔记，方便之后查阅，也能够发出来请熟练大牛指正，互相学习。编程

首先按照我我的的理解，解释一个使用过程当中遇到的问题。那就是在angularJS模板的使用上，应该选择MVC的视图页仍是静态的HTML页面。在通过练习和思考后，我的的理解是，使用HTML更加好一些，在一篇网上的英文文档中，做者对angularJS的模板页指定对应的是相应控制器下的MVC布局页，我的以为不妥。浏览器

对angularJS来讲，最终展示的是一个HTML页面，操做的也是一个HTML页面，而MVC的视图页最终也是转换成HTML页面交给浏览器处理，何不直接使用angularJS处理HTML页面，使用MVC视图页岂很少了亢余的步骤。app

这个问题只是我的感受，欢迎熟悉的朋友和我讨论。asp.net

好了，开始咱们的小Demo。布局

首先打开VS2013建立web程序(我用的2013版本，里面对路由的控制有不少新特性，2012好像不支持。)。学习

有不少朋友可能会在VS2013里面选择visusl studio2012而后建立详细的web程序，我这里直接使用VS2013的web程序。网站

肯定以后会弹出详细页面，咱们选择一个空的页面，而且勾选下面的MVC和WebAPI选项，VS会自动帮咱们新建一些文件夹，这里微软作的仍是挺nx的，选择其余的类型，直接就是一个网站Demo，新手能够建立一个进行学习。spa

接下来咱们在Controllers文件夹里面直接新建一个MVC5的空的控制器，起名HomeController。

而后在Index方法上右击新建一个默认名称的使用布局的视图页。

这时，VS会自动帮咱们建好母版页和关联的布局页。

咱们打开母版页_Layout.cshtml，能够看见它使用了@RenderBody()做为占位符，填充占位符的就是其余咱们建立的视图页面了，好比Index.cshtml。并且咱们须要使用的引用，也能够放在这里，好比咱们将要用到的angularJS文件。既然是最最最母版页，那么咱们表明angularJS入口的ng-app也须要写在这里了，咱们在<body>标签里面设置ng-app。

打开index.cshtml文件，此时里面应该是空的，那么好，咱们把这个当作咱们angularJS的母版页，只须要加入一段代码<div ng-view></div> 。若是你了解angularJS的话，相信能看懂这是什么意思，ng-view的做用就是表明这是一个angularJS的模板页，其余的部分页都在这个div下面显示。

好了，准备工做已经完成了，接下来，咱们开始写其余代码。

咱们为了简单，直接写一个Person类当作咱们的数据源。

在Models文件夹新建一个Person类，写上属性当作咱们的数据源。

嗯，设置好了用来模拟的数据源，咱们建立调用数据源的控制器，这里咱们使用web API来控制数据，咱们仍是在controllers文件夹下建立(严格的来讲，在项目中webAPI应该放在Apis文件夹下面，这里咱们简单起见)。建立一个空的web API2控制器，取名ShowController。

好了，建立完控制，该制造咱们的伪数据源了。在这里，我暂时不使用RESTful模式的路由方式了，直接使用属性路由，关于属性路由，我会在以后写一篇简单的介绍，感兴趣的朋友能够看看，但愿能和你们讨论。

好了，数据和MVC模板都已经准备好了，咱们接下来开始angularJS的部分。首先建立一个名叫App的文件夹，这是在标准的angularJS里面经常使用的文件夹分类方式，通常关于angularJS的文件都放在这里，我就不作过多的介绍了。

在App文件夹中，咱们建立两个文件，一个是app.js和Show.html。

打开Show.html文件，把里面的内容所有删除，由于咱们须要它来充当整个页面的部分页。而后添加下面内容，这里使用一个li列表展现数据。

接下来就是开始咱们的JS代码的编写了，这里我就不对angular作过多的解释了，若是有时间，我会把这段时间学习的笔记分享出来，想要学习angularJS的朋友能够看看，也方便和你们讨论。

大功告成了，哦对了，千万别忘了在MVC母版页对一些重要的JS文件的引用，这个为何放在最后说呢？但愿你们之后别犯错，说多了都是泪啊……

咱们这个Demo中用到了angularJS的两个JS文件，由于angularJS将不少功能分开打包了，因此须要注意这一点，我刚开始就是由于把route文件没引用，折腾了半天才发现缘由。还有一个就是咱们写的app.js文件了，这是一个队angularJS全局控制的文件，必须引进来。

PS关于angularJS的引用文件，你们能够去GitHub下载，或者在VS里面的NuGit里面搜索angular也能够直接安装，推荐NuGit安装，很方便。

好了，看看咱们的运行效果吧。

数据已经展现出来了。

最后我在小小的改动一下，使用咱们的asp.net web API特有的方式，就是RESTful模式，我我的暂时将RESTful看作是一种模式，咱们使用这种方式看看。

第一：咱们去掉属性路由的设置方式，让API控制器使用自身的请求方法。

第二，咱们把angularJS的入口文件app.js里面的服务请求URI也小小的改动一下。

咱们运行一下，看看效果。

如出一辙，这是为何呢？由于属性路由规定了URI的路由前缀，按照这个前缀访问过来的RUI会自动的匹配路由属性控制的方法或者类。而咱们在angularJS里面设置的服务请求地址正好是这个属性路由所指定的路由前缀，嗯，恍然大悟了吧，就是这么简单。

而使用RESTful的方式呢？咱们去掉属性路由，让一切回归天然。这时路由的请求是按照API的控制器的名字请求的，发现没，我在app.js文件里面对http服务的改动正好是web API控制器的前缀，嗯，有没有又恍然大悟的感受。对，这就是web API的处理请求的方式，经过控制器名字，至于进入这个控制器，直行哪个具体的方法，那就是RESTful模式啦。

PS：欢迎朋友们和我讨论，而且指正文章中的错误，我也在学习中，但愿获得你们的帮助。

嗯，这个例子很小，可是对于刚接触angularJS的同窗（好比我）来讲，怎么在项目中和其余的技术结合使用，确实是一个很头疼的事情。若是作完了这个小案例，相信你对angularJS怎么在MVC里面应用，有了一个大体的映像，好了，这就是咱们须要的，编程之路还很长，咱们一块儿学习进步。