AngularJS+WebAPI入门示例

83 阅读 0 评论 55 点赞

我是靠谱客的博主丰富月亮，最近开发中收集的这篇文章主要介绍AngularJS+WebAPI入门示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、项目搭建

1、创建一个.NET Core WebAPI项目，包含简单的增删改查接口功能

2、VS2017 创建一个MVC项目，从https://code.angularjs.org/下载angularJS包，项目中引入相关的angularjs

二、功能实现

1、mvc项目中创建三个页面——登录页面（Login）、数据列表页(AccountList)、编辑页面（AcocuntEdit）

2、登录功能

式样代码

<style>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.text-center {
text-align: center !important;
padding-top: 15%;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>

表单代码

<div class="text-center">
<form class="form-signin" ng-app="myAPP" ng-controller="loginctrl" name="myForm" novalidate>
<h2 class="form-signin-heading">Please sign in</h2>
<label for="loginID" class="sr-only">LoginID</label>
<input type="text" id="loginID" class="form-control" placeholder="登录账号" name="loginID" ng-model="loginID" required autofocus>
<span style="color:red" ng-show="myForm.loginID.$dirty && myForm.loginID.$invalid">
<span ng-show="myForm.loginID.$error.required">请输入登录账号</span>
</span>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="密码" name="inputPassword" ng-model="inputPassword" required>
<span style="color:red" ng-show="myForm.inputPassword.$dirty && myForm.inputPassword.$invalid">
<span ng-show="myForm.inputPassword.$error.required">请输入登录密码</span>
</span>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="button" ng-click="login()">Sign in</button>
</form>
</div>

登录事件代码

<script>
var myapp = angular.module("myAPP", []);
myapp.controller("loginctrl", function ($scope, $http) {
//登录事件
$scope.login = function () {
$http({
method: 'POST',
url: 'http://localhost:50001/api/AccountInfo/Login',
data: { LoginID: $("#loginID").val() , PassWord: $("#inputPassword").val() }
}).then(function successCallback(response) {
//请求成功执行代码
var returnvalue = response.data;
if (returnvalue == "") {
alert("用户名或密码错误!");
}
else {
//页面跳转
window.location.href = "AccountList";
}
}, function errorCallback(response) {
// 请求失败执行代码
alert("服务器错误!");
});
}
});
</script>

3、获取列表功能

列表布局代码

<div class="container container-fluid" ng-app="myAPP" ng-controller="GetList">
<div class="form-inline">
<input type="button" class="btn btn-primary"
ng-click="edit('')" value="新增" />
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>用户名</th>
<th>账号</th>
<th>创建日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="x in accountlist">
<td>{{x.UserName}}</td>
<td>{{x.LoginID}}</td>
<td>{{x.CreateTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>
<input
type="button" class="btn btn-link" ng-click="edit(x.AccountID)" value="编辑"/>
<input type="button" class="btn btn-link" ng-click="delete(x.AccountID)" value="删除"/>
</td>
</tr>
</tbody>
</table>
</div>

事件代码

<script>
var myapp = angular.module("myAPP", []);
myapp.controller("GetList", function ($scope,$http) {
//获取列表
$http({
method: 'GET',
url: 'http://localhost:50001/api/AccountInfo/GetList',
}).then(function successCallback(response) {
$scope.accountlist = response.data;
}, function errorCallback(response) {
alert("服务器错误！");
});
//编辑
$scope.edit = function (accountid) {
window.location.href = "AccountEdit?id=" + accountid;
};
//删除
$scope.delete = function (accountid) {
if (confirm("确定删除吗？")) {
$http({
method: 'DELETE',
url: 'http://localhost:50001/api/AccountInfo/Delete?accountID=' + accountid,
}).then(function successCallback(response) {
alert(response.data.message);
//刷新数据列表
window.location.reload();
}, function errorCallback(response) {
alert("服务器错误！");
});
}
}
});
</script>

4、编辑功能

表单代码

<div class="form-horizontal" ng-app="myAPP" ng-controller="GetModel">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户姓名</label>
<input type="text" class="form-control" id="username" name="username" ng-model="accountmodel.UserName" required />
</div>
<div class="form-group">
<label for="loginID" class="col-sm-2 control-label">登录账户</label>
<input type="text" class="form-control" id="loginID" name="loginID" ng-model="accountmodel.LoginID" required />
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">登录密码</label>
<input type="text" class="form-control" id="password" name="password" ng-model="accountmodel.PassWord" required />
<input type="hidden" id="accountid" name="accountid" ng-model="accountmodel.AccountID" />
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-primary" ng-click="save()" value="保存" />
</div>
</div>
</div>

事件代码

<script>
var myapp = angular.module("myAPP", []);
//注入$locationProvider服务,通过$location获取url参数
myapp.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
myapp.controller("GetModel", function ($scope, $location, $http) {
//获取实体类信息
$scope.accountmodel = [];
$scope.accountid = $location.search().id;//获取url参数 id
if ($scope.accountid == "") {
$scope.accountmodel = [{
"AccountID": "",
"LoginID":"",
"UserName": "",
"PassWord": ""
}];
}
else {
$http({
method: 'GET',
url: 'http://localhost:50001/api/AccountInfo/GetModel?accountID=' + $scope.accountid,
}).then(function successCallback(response) {
$scope.accountmodel = response.data;
//刷新数据列表
}, function errorCallback(response) {
alert("服务器错误！");
});
}
//保存
$scope.save = function () {
$http({
method: 'POST',
url: 'http://localhost:50001/api/AccountInfo/Save',
data: { AccountID: $scope.accountmodel.AccountID, UserName: $scope.accountmodel.UserName, LoginID: $scope.accountmodel.LoginID, PassWord: $scope.accountmodel.PassWord }
}).then(function successCallback(response) {
if (response.data.message == "success") {
alert("操作成功!");
window.location.href = "AccountList";
}
else {
alert("操作失败！");
}
}, function errorCallback(response) {
alert("服务器错误！");
});
}
});
</script>

页面截图