[英]Load data before page is loaded AngularJS and NodeJS
我是AngularJS和NodeJS的新手,我有一個應用程序,我想從mysql db加載一些數據並通過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);
});
};
});
和控制器具有以下語句:
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>
遺憾的是,這並不是您可以完全直接地以角度實現的。 如果要加載大量數據,則必須隱藏視圖並僅在數據加載后才顯示。 但是,如果僅加載少量數據,則可以嘗試以下代碼:
$scope.$on("$ionicView.beforeEnter", function(){
//Load data here
//And bind to scope
})
但是通常為了獲得可靠的修復,我總是建議您使用ng-show或ng-hide隱藏視圖,並且僅在加載所有數據后才顯示視圖。
一個好方法是使用位置提供程序($ locationProvider)或狀態提供程序($ stateProvider),在這里您可以在解決承諾后加載視圖。
否則,如果您未使用任何一種方法(例如,由於服務正在返回promise),請在使用“ then”解析時更新視圖
app.controller(){
this.json = [];
var self = this;
adminPedidos.then(function(data){
self.json = data; //a digest cycle would be required (Depends)
//also, probably use ng-show to show the view (as other person have suggested)
}, function(err){
});
console.log(this.json);
}]);
服務
angular.module('pedidos').factory('adminPedidos', ['$http', function ($http) {
return {
getAll: function () {
return $http.get('all'); // or change all to http://localhost:3000/all
}
};
}]);
控制者
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.