[Angularjs]asp.net mvc+angularjs+web api单页应用详解

写在前面

文章，关于anguar的位置也没有一个比较好的一个标准。这里也是抛砖引玉，希望通过讨论，得到一个更好的结构。

项目结构

文件作为模板文件，这里将应用的js，及css文件，都凡在该页。如图所示：

文件夹：存放webapi接口。

文件夹，这样做，也是为了操作方便（文件多的话，来回的切换窗口，确实很麻烦）。

文件，以及app.js

包括module的注册，以及服务信息：

app = angular.module('app_store',['ngRoute','StoreService'//服务
var StoreService = angular.module('StoreService',[]);
//请求服务
StoreService.factory('requestService',function ($http,$q) {
var request = {
method: 'POST',url: '',headers: { 'Content-Type': 'application/json' },data: {}
};
var postData = {
lists: function (type) {
request.method = "get";
request.url = "../apI/Order/lists/" + type + "";
return requestService($http,$q,request);
},submit_product: function (data) {
request.method = "post";
request.url = "../apI/Order";
request.data = data;
return requestService($http,request);
}
};
return postData;
});
function requestService($http,request) {
var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行
 $http(request).
success(function (data,status,headers,config) {
deferred.resolve(data); // 声明执行成功，即http请求数据成功，可以返回数据了
 }).
error(function (data,config) {

    deferred.reject(data);   </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 声明执行失败，即服务器返回<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>  </span>

});
return deferred.promise; // 返回承诺，这里并不是最终数据，而是访问最终数据的API
};

文件中，其中也包括请求的服务，考虑到减少一次静态文件的请求，所以将服务也放在了该文件中。

功能不是太多，还是放在一个里面，如果定义太多的js文件，一是静态文件的请求次数会很多，二是开发起来确实很头大，每次开发在vs打开n个tab页面，你会发现会让你非常的头大。

自定义的过滤器，（如果过滤器不多，建议还是合并到app.js文件中。）

名称建文件夹。如果视图不多，我是一股脑的都塞到views文件夹了。

一个例子

一个根据关键字搜索商品的列表的例子。

app.controller('StoreController',cope,$http,$location,$routeParams,requestService) { console.log('StoreController' (!cope.productKey) { $scope.productKey = "飞机"cope.productKey).then( (data._code === 200cope.orders =

app.config(['$routeProvider','/',{ templateUrl: '../Scripts/Views/OrderList.html',controller: 'StoreController''/error',{ templateUrl: '../Scripts/Views/Error.html',controller: 'ErrorController''/error'

搜索商品" Box" < {{item.Name}} 单价：{{item.Price}}

</div>

添加视图，作为呈现的页面。

stem; stem.Collections.Generic; stem.Linq; stem.Web; stem.Web.Mvc;

namespace Wolfy.MvsSinglePage.Controllers
{
public class StoreController : Controller
{
// GET: Store
public ActionResult Index()
{
return View();
}
}
}

一个添加指定ng-view的div，用来呈现Views中的html模板的。

stem; stem.Collections.Generic; stem.Linq; stem.Net; stem.Net.Http; stem.Threading.Tasks; stem.Web.Http; namespace Wolfy.MvsSinglePage.Controllers.api
{
public class OrderController : ApiController
{
// GET: apI/Order
 [HttpGet]
[Route("apI/Order/lists/{key?}")]
public async Task Get(string key)
{
return await Task.Run(() =>
{
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.Accepted);
List lst = new List() {
new Order(){ Id=Guid.NewGuid(),Dt=DateTime.Now,Name="飞机",Price=2222222},new Order(){ Id=Guid.NewGuid(),Name="飞机2",Name="飞机3",Name="飞机4",Name="飞机5",Name="飞机6",};
var results = string.IsNullOrEmpty(key) ? lst : lst.Where(x => x.Name.Contains(key));
response = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StringContent(JsonConvert.SerializeObject(new { _code = 200,_data = results }))
};
return response;
});
}
}
}

标签添加指令ng-app。

总结

分享一下，在网上也找了一些资料，并没有具体的分层方式。我这里抛砖引玉，希望有个更好的方案。

Demo Url:

[Angularjs]asp.net mvc+angularjs+web api单页应用详解

写在前面

项目结构

一个例子

总结

相关推荐