Загрузка данных до загрузки страницы AngularJS и NodeJS

0

Я немного новичок в AngularJS и NodeJS, у меня есть приложение, которое я хочу загрузить некоторые данные из mysql db и загружать эти данные через Node-сервер и Angular framework, на мой вопрос: как я могу загрузить данные, чтобы показать их на странице перед ее загрузкой? я пытаюсь его, но всегда я получаю undefined от 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>
Теги:

3 ответа

0
Лучший ответ

обслуживание

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>

Поделиться
  • 0
    Спасибо работает отлично
0

К сожалению, это не то, что вы можете полностью достичь прямым способом с угловым. Если вы загружаете большое количество данных, вам придется скрывать свое представление и показывать только при загрузке данных. Однако, если вы загружаете только небольшие данные, вы можете попробовать следующий код:

$scope.$on("$ionicView.beforeEnter", function(){
  //Load data here
  //And bind to scope
})

Но, как правило, для надежного исправления я всегда рекомендовал бы скрыть представление с помощью ng-show или ng-hide и отобразить представление только после загрузки всех данных.

Поделиться
  • 0
    Но большая проблема в том, что я хочу привязать ресурсы var json к представлению, чтобы я мог загружать данные независимо для просмотра, я имею в виду, что это должно работать, если загрузка привязана к json var, не знаю, знаете ли вы что я имею в виду
  • 0
    Ах, вы можете решить это с помощью двух методов. 1. Долгий и, вероятно, лучший способ - проанализировать json и добавить отдельные ключи к объекту данных, который привязан к представлению. 2. Этот метод не рекомендуется в угловом документе, но вы можете просто заменить свой объект данных, который привязан для просмотра, на ваш объект json, а затем вызвать $ scope. $ Apply (), который должен обновить представление.
0

Хорошим способом было бы использовать Location Provider ($ locationProvider) или State provider ($ stateProvider), где у вас есть возможность загрузить представление после разрешения обещания.

Или, если вы не используете ни одно из них, как в вашем случае, поскольку служба возвращает обещание, обновите представление, когда оно будет разрешено с помощью '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);
}]);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню