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>

页面截图

 

源码下载地址https://download.csdn.net/download/liwan09/10648701