我是 AngularJS 和 NodeJS 的新手,我有一个应用程序,我想从 mysql 数据库加载一些数据并通过 Node 服务器和 Angular 框架加载该数据,我的问题是,如何加载数据在加载之前将其显示在页面中?我正在尝试,但总是从 json var 中得到未定义的结果。
这是我的代码:
var app = angular.module('pedidos',[]);
app.service('adminPedidos',function($http){
this.getAll = function(){
var data =[];
var req = {
method: 'GET',
url: 'http://localhost:3000/all',
};
return $http(req).then(function(response, status, headers, config) {
return response;
}).error(function(response, status, headers, config) {
alert(response+" "+status);
});
};
});
并且 Controller 有以下句子:
app.controller('Main'['$scope','$http','adminPedidos',function($scope,$http,$adminPedidos){
this.json = [];
this.json = $adminPedidos.json;
console.log(this.json);
}]);
另外在 html 中我有这个:
<section class="container" ng-controller="Main as controller">
<section ng-repeat="items in controller.json" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div data-id="{{items.id}}">
<span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="name">{{items.name}}</span>
<span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="link"><a href="{{item.link}}">{{items.link}}</a></span>
<span class="col-lg-2 col-md-2 col-sm-6 col-xs-12" name="price">{{items.price}}</span>
<span class="col-lg-1 col-md-1 col-sm-6 col-xs-12" name="quantity">{{items.quantity}}</span>
</div>
<div class="col-lg-offset-1 col-md-offset-1 col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="edit" class="btn btn-warning">Editar</button></div>
<div class="col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="delete" class="btn btn-danger">Borrar</button></div>
</section>
</section>
最佳答案
服务
angular.module('pedidos').factory('adminPedidos', ['$http', function ($http) {
return {
getAll: function () {
return $http.get('all'); // or change all to http://localhost:3000/all
}
};
}]);
Controller
angular.module('pedidos').controller('Main'['$scope', 'adminPedidos', function ($scope, adminPedidos) {
adminPedidos.getAll().success(function (data) {
$scope.items = data;
});
}]);
html
<section class="container" ng-controller="Main">
<section ng-repeat="item in items" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div data-id="{{item.id}}">
<span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="name">{{item.name}}</span>
<span class="col-lg-3 col-md-3 col-sm-6 col-xs-12" name="link"><a href="{{item.link}}">{{item.link}}</a></span>
<span class="col-lg-2 col-md-2 col-sm-6 col-xs-12" name="price">{{item.price}}</span>
<span class="col-lg-1 col-md-1 col-sm-6 col-xs-12" name="quantity">{{item.quantity}}</span>
</div>
<div class="col-lg-offset-1 col-md-offset-1 col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="edit" class="btn btn-warning">Editar</button></div>
<div class="col-lg-1 col-md-2 col-sm-6 col-xs-6"><button id="delete" class="btn btn-danger">Borrar</button></div>
</section>
关于javascript - 在页面加载之前加载数据 AngularJS 和 NodeJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33970124/