angular框架的SmartAdmin模板 如何请求后台数据

来源:互联网 发布:淘宝怎么修改一口价 编辑:程序博客网 时间:2024/05/22 06:27

公司新项目用angular 并且要求在smartadmin里写, 以前没用过,记一下。
1.在自己的模块里创建控制器controllers.js文件
文件里代码如下:

angular.module('app.Inspection').controller("inspection",    function ($scope, Inspectionhttp ) {//Inspectionhttp是第二步里自己定义的名称,一定要传        $scope.param = {//返回给后台的数据            one: 1,            two: 10,            she: "",        };        $scope.loadData = function(pageNum) {            console.log(pageNum);            var param = {};            angular.forEach($scope.param,function(item,val){//简单过滤空数据的函数                if(item.toString()){                    param[val] = item;                }            })            param.pageNum = pageNum || param.pageNum;            Inspectionhttp.getPurchaseData(param).then(function(res) {//调用Inspectionhttp里的方法,这个前面的名字一定记得根据自己写的名字改                $scope.pageInfo = res //调取数据成功把数据赋给$scope.pageInfo            }, function(err) {                console.log('load');//失败在控制台打印load            })        }        $scope.loadData();    });

第2步。创建service.js文件 代码如下:

"use strict";angular.module('app.integratedQuery').service("CurrentQhttp" //"currentQhtttp"是你定义的接口的名称, function($http, $q, APP_CONFIG) {    this.getPurchaseData = function(params) {        var d = $q.defer();        $http({          method : 'POST',          url : APP_CONFIG.baseUrl + '/storage/getTGStorages',          params : params,        }).then(function successCallback(response) {          // 请求成功执行代码          d.resolve(response.data);        }, function errorCallback(response) {          // 请求失败执行代码          d.reject("error");        });        return d.promise;      }})

第3步。 HTML部分,因为我们公司这个项目大部分是表格,所以举个跟表格相关的例子:将获取到的后台数据渲染到table里

                        <table>                                <thead>                                    <tr>                                        <th>序号</th>                                        <th data-class="expand">姓名</th>                                        <th>性别</th>                                    </tr>                                </thead>                                <tbody>  // pageInfo.list是第一步里存数据的                                   <tr ng-repeat='item in pageInfo.list track by $index'>                                        <td>{{$index}}</td>                                        <td>{{itemName}}</td>                                        <td>{{item.sex}}</td>                                    </tr>                                </tbody>                            </table>