@nfuture

Как реализовать ассинхронную загрузку данных в шаблон AngularJS?

Здравствуйте.
Не получается реализовать подгрузку данных с помощью ajax в шаблон AngularJS.
Делаю на освнове этого примера jsfiddle.net/derkoe/Wk7WD/presentation
Только, у меня данные должны грузиться в шаблон list.html

app.js
var app = angular.module('app', []).config(function ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ListCtrl'
		, resolve: {
            load: function ($route, dataService) {
			   return dataService.load();
            }
        }
    }).otherwise({
        redirectTo: '/list'
    });
});

app.controller('ListCtrl', function ($scope, $location, dataService) {
       $scope.data = dataService.data;
	
	consol.log(dataService.data);
	
    $scope.back = function () {
        $location.path('/list');
     };
});


app.factory('dataService', function ($q) {
    return { 
        data : {},
        load : function() {
            var defer = $q.defer();
            var data = this.data;
			
		/*
           код из примера
            $timeout(function () {
                data.id = id;
                defer.resolve(data);
            }, 1000);
	*/
		
                // -- здесь пока обычный jquery-ajax-запрос
                // -- знаю что в AngularJS есть $http , но пока не научился им пользоваться
                // -- если знаете, покажите с использование $http
 		$.ajax({
			type: 'GET',
			 url: 'backend/?route=notes:list',
			success: function(response) {
				$scope.notes = response.data.notes;
				
 				console.log(response);
				
 				data.notes = response.data.notes;
                                defer.resolve(data);
			},
			 error: function (req_obj, msg, error) {
				console.log('Ошибка запроса');
			},
			dataType: 'json'
		});
               //----------------
		
		});	
            return defer.promise;
        }
    };
});


Необходимо, чтобы в шаблон загружались данные ассинхронно, но этого не происходит.
load вообще не вызывается consol.log(dataService.data); , тоже не печатает данные с сервера.
Хотя с сервера данные правильно приходят.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>AngularJS</title>
 </head>

 <body ng-app="app">
    <div ng-view></div>

  <script src="lib/jquery-1.10.2.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>

  <script src="js/app.js"></script>

</body>
</html>


list.html
Тестовый список {{test}}
  • Вопрос задан
  • 4763 просмотра
Решения вопроса 1
agladkov
@agladkov
1. Помимо $http можно еще использовать $resource
Ваш пример
$http.get('backend/?route=notes:list').success(function (data) {
  ...
});

2. если у вас есть вызовы, не контролируемые AngularJS, например callback от $.ajax, то операции над $scope надо оборачивать в $scope.$apply
3. у вас ошибка в коде: console.log
4. @maxaon дело говорит
5. load, переданный в ListCtrl, будет содержать в себе promise, а не dataService
6. в примере, на который ссылаетесь контроллер узнал о dataService не через resolve, а через зависимость, что вы так же делаете, в примере resolve скорее используется как неявный вызов метода dataService.load с нужными параметрами, вместо передачи их в контроллер
7. callback, переданный $.ajax ничего не знает о $scope

В общем замение $.ajax на $http, уберите $scope из success, поправьте console и скорее всего заведется. Контроллеру оставьте dataService.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
maxaon
@maxaon
Ключи изз resolve инжектируются по ключу в контроллер, поэтому надо
app.controller('ListCtrl', function ($scope, $location, load) {

Или соответственно поменять имя в 'resolve'
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы