Здравствуйте.
Не получается реализовать подгрузку данных с помощью 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}}