MVC + Web API + AngularJs 搭建简单的 CURD 框架

  GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage

简介

  AngularJS[1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

  布局页的引用

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@*angularJs*@
<script src="~/Scripts/angular-js/angular.js"></script>
<script src="~/Scripts/angular-js/angular-route.js"></script>
@*angularJs 自定义的配置*@
<script src="~/Scripts/core/app.js"></script>
<script src="~/Scripts/core/app-route.js"></script>
<script src="~/Scripts/core/app-service.js"></script>
@*angularJs 自定义的控制器*@
<script src="~/Scripts/core/controllers/demoController.js"></script>

  app.js

var app = angular.module('myApp', ['ngRoute', 'demoService', ]);

  

  app-route.js

//路由配置
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', { templateUrl: '../Scripts/core/views/demo/index.html', controller: 'demoController' })
.when('/home', { templateUrl: '../Scripts/core/views/demo/index.html', controller: 'demoController' })
.when('/add', { templateUrl: '../Scripts/core/views/demo/edit.html', controller: 'demoEditController' })
.when('/edit/:id', { templateUrl: '../Scripts/core/views/demo/edit.html', controller: 'demoEditController' })
.when('/error', { templateUrl: '../Scripts/Views/Error.html', controller: 'errorController' })
.otherwise({ redirectTo: '/error' });
}]);

  app-service.js

//服务
var demoService = angular.module('demoService', []); //请求服务
demoService.factory('requestService', function ($http, $q) {
var params = {
method: '',
url: '',
headers: { 'Content-Type': 'application/json' },
data: {}
}
var request = {
//增
add: function (data) {
params.method = "post";
params.url = "../api/demo/add";
params.data = data;
return requestService($http, $q, params);
},
//删
del: function (id) {
params.method = "delete";
params.url = "../api/demo/del?id=" + id;
return requestService($http, $q, params);
},
//改
update: function (data) {
params.method = "put";
params.url = "../api/demo/update";
params.data = data;
return requestService($http, $q, params);
},
//查
get: function (id) {
params.method = "get";
params.url = "../api/demo/get?id=" + id;
return requestService($http, $q, params);
},
//分页
details: function (key, pageIndex) {
params.method = "get";
params.url = "../api/demo/details?key=" + key + "&pageIndex=" + pageIndex;
return requestService($http, $q, params);
}
}; return request;
}); //请求服务
function requestService($http, $q, request) {
return $http(request);
};

  demoController.js

app.controller('demoController', function ($scope, $http, $location, $routeParams, requestService) {
console.log('demoController'); var currentPageIndex = 1;
$scope.list = []; //删除
$scope.del = function (id) {
requestService.del(id)
.then(function (result) {
var data = result.data;
console.log(data);
});
}; $scope.demoKey = $scope.demoKey ? $scope.demoKey : "";
$scope.details = function (key, pageIndex) {
requestService.details(key, pageIndex)
.then(function (result) {
var data = result.data;
$scope.list = data;
});
console.log($scope.list);
};
$scope.details("", currentPageIndex); //查询
$scope.search = function () {
$scope.list = [];
$scope.details($scope.demoKey, currentPageIndex);
}; //新增
$scope.add = function () {
$location.url('/add');
}; //编辑
$scope.edit = function (id) {
$location.url('/edit/' + id);
}; //下一页
$scope.nextPage = function () {
currentPageIndex++;
$scope.details($scope.demoKey, currentPageIndex);
}; //上一页
$scope.prePage = function () {
if (currentPageIndex > 1) {
currentPageIndex--;
}
$scope.details($scope.demoKey, currentPageIndex);
};
}); //demoEditController
app.controller('demoEditController',
function ($scope, $http, $location, $routeParams, requestService) {
console.log('demoEditController'); $scope.demo = {
Id: '',
Name: '',
Price: 0
}; var id = $routeParams.id;
$scope.get = function () {
requestService.get(id).then(function (result) {
console.log(result);
$scope.demo = result.data;
});
}
if (id != null) { $scope.get(); } $scope.save = function () {
if (id) {
$scope.demo.Id = id;
requestService.update($scope.demo).then(function (result) {
console.log(result);
var data = result.data;
console.log("更新成功");
console.log(data);
});
} else {
requestService.add($scope.demo).then(function (result) {
console.log(result);
var data = result.data;
console.log("添加成功");
console.log(data);
});
};
}; });

  index.html

<div class="address_serace">
<input class="form-control" ng-change="search()" ng-model="demoKey" placeholder="搜索">
</div>
<div class="address_div">
<dl class="address_dl" ng-repeat="item in list">
<dd class="address_font">
<p class="address_font_t">{{item.Name}}</p>
<p>单价:¥{{item.Price}}</p>
<a ng-click="del(item.Id)">删除</a>
<a ng-click="edit(item.Id)">编辑</a>
</dd>
</dl> </div> <button class="btn btn-primary btn-block " ng-click="prePage()">上一页...</button>
<button class="btn btn-primary btn-block " ng-click="nextPage()">下一页...</button>
<button class="btn btn-primary btn-block " ng-click="add()">添加</button>

  edit.html

<input type="text"
name="name" class="form-control" placeholder="商品" ng-model="demo.Name" required /> <input type="text"
name="name" class="form-control" placeholder="价格" ng-model="demo.Price" required />
<button class="btn btn-primary btn-block" ng-click="save()">保存</button>

  API:Demo 控制器

#region

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using Wen.MvcSinglePage.Models.Api; #endregion namespace Wen.MvcSinglePage.Controllers.Api
{
public class DemoController : ApiController
{
private IList<DemoViewModel> _demos = new List<DemoViewModel>(); public DemoController()
{
InitDemo();
} /// <summary>
/// 添加
/// </summary>
/// <param name="demo"></param>
/// <returns></returns>
[HttpPost]
public DemoViewModel Add([FromBody] DemoViewModel demo)
{
_demos.Add(demo); return demo;
} /// <summary>
/// 获取
/// </summary>
/// <returns></returns>
[HttpGet]
public DemoViewModel Get(int id)
{
return _demos.FirstOrDefault(x => x.Id == id);
} /// <summary>
/// 删除
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpDelete]
public int Del(int id = 0)
{
var demo = _demos.FirstOrDefault(x => x.Id == id);
if (demo != null)
_demos.Remove(demo); return id;
} /// <summary>
/// 更新
/// </summary>
/// <param name="demo"></param>
/// <returns></returns>
[HttpPut]
public DemoViewModel Update([FromBody] DemoViewModel demo)
{
var entity = _demos.FirstOrDefault(x => x.Id == demo.Id);
if (entity == null) return demo; entity.Name = demo.Name;
entity.Price = demo.Price; return demo;
} /// <summary>
/// 详情(分页)
/// </summary>
/// <param name="key"></param>
/// <param name="pageIndex"></param>
/// <returns></returns>
[HttpGet]
public IEnumerable<DemoViewModel> Details(string key, int pageIndex)
{
const int pageSize = 5;
if (!string.IsNullOrEmpty(key))
{
_demos = _demos.Where(x => x.Name.Contains(key)).ToList();
} return _demos.Skip(pageSize * (pageIndex - 1)).Take(pageSize);
} /// <summary>
/// 初始化 Demo
/// </summary>
private void InitDemo()
{
var random = new Random();
for (var i = 0; i <; i++)
{
_demos.Add(new DemoViewModel
{
Id = i,
Name = $"商品:{i}",
Price = random.Next()
});
} }
}
}

DemoController.cs

GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage


【博主】反骨仔

【出处】http://www.cnblogs.com/liqingwen/p/6713612.html

【参考】http://www.cnblogs.com/wolf-sun/p/5279175.html

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架的更多相关文章

  1. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  2. [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序

    本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...

  3. 动态枢轴网格使用MVC, AngularJS和WEB API 2

    下载shanuAngularMVCPivotGridS.zip - 2.7 MB 介绍 在本文中,我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格.在我之前的文章 ...

  4. ASP.NET MVC Web API Post FromBody(Web API 如何正确 Post)

    问题场景: ASP.NET MVC Web API 定义 Post 方法,HttpClient 使用 JsonConvert.SerializeObject 传参进行调用,比如 Web Api 中定义 ...

  5. ASP.NET MVC Web API For APP

    近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScr ...

  6. 【转载】ASP.NET MVC Web API 学习笔记---联系人增删改查

    本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查.目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的.下面我们通过创建一个简单的Web API来管理联系 ...

  7. Asp.net mvc web api 在项目中的实际应用

    Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...

  8. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  9. mvc Web api 如何在控制器中调用

    关于如何调用 mvc Web api 的方法,网上一搜就是一大把,基本都是在前台jq中调用的,但是如何在后台调用呢? 本楼主做了一下测试,仅供参考. 先写一个简单的api,如下:[域1] namesp ...

随机推荐

  1. jQuery中$.extend(true,object1, object2);深拷贝对象

    语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep],是可选的,为true或false.默认情况是fa ...

  2. 在python&numpy中切片(slice)

     在python&numpy中切片(slice) 上文说到了,词频的统计在数据挖掘中使用的频率很高,而切片的操作同样是如此.在从文本文件或数据库中读取数据后,需要对数据进行预处理的操作.此时就 ...

  3. 通过Map间接比较两个Json格式是否相同

    首先,我们举个例子来对两个Json格式进行比较 第一个Json格式: {"singleway":[],"multiway":{"channelSlav ...

  4. ehcache 使用笔记

    要想使用 java 的本地缓存,可以考虑用 ehcache,或者 guava. guava 更高端一点,可以自动定时刷新.我选择了 ehcache. 在 spring 中是集成了 ehcache 的. ...

  5. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  6. Atom 编辑器试用

    简介 它号称"21世纪可黑客的文本编辑器".GitHub支持并开源,并支持跨平台.和brackets编辑器一样基于浏览器开发,意味着你可以使用less(包含css)来定制编辑器界面 ...

  7. js中的this关键字,setTimeout(),setInterval()的执行过程

    var test1 = { name: 'windseek1', showname: function () { console.log(this.name); } } var test2 = { n ...

  8. OpenStack及其构成简介

    新的一年新的开始,突然想学习下Openstack,之前了解过很多,但是想系统的学习一下,第一次写博客,只想把学到的东西记录下来加深印象,如有写的不好的地方请多多见谅.下面开门见山. 1.What is ...

  9. 模式识别(1)——PCA算法

    作者:桂. 时间:2017-02-26  19:54:26 链接:http://www.cnblogs.com/xingshansi/articles/6445625.html 声明:转载请注明出处, ...

  10. Java内存泄露实例