Данные не возвращаются при использовании веб-службы RESTful с использованием Angularjs

введите описание изображения здесьЯ новичок в изучении Angularjs. Пожалуйста, помогите мне с примерами для следующего

добавлен скрипт

JavaScript -

var app = angular.module('myapp', []);

app.controller('MyCtrl1', ['$scope', 'UserFactory', function ($scope, UserFactory) {
UserFactory.get({}, function (userFactory) {
    $scope.time = userFactory.time;
})
}]);
var service = angular.module('apiService', ['ngResource']);

service.factory('UserFactory', function ($resource) {
return $resource('http://time.jsontest.com', {}, {
    query: {
        method: 'GET',
        params: {},
        isArray: true
    }
})
});

.html файл

<body ng-app="myapp">
<divng-controller="MyCtrl1" >
<p>
    Result from RESTful service is: {{ time }}
</p>
</div>
</body>

приведенный выше фрагмент дает вывод как

Результат службы RESTful: {{time}}

а не то значение, которое я ожидаю. Ссылка: http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/

Я хочу написать методы CRUD (GET/POST/PUT/DELETE), и я начал с GET.

Спасибо


crud angularjs restful-url angularjs-controller angularjs-service
person Priyanka    schedule 04.05.2014    source источник
comment
Не могли бы вы собрать plnkr (plnkr.co)? Или хотя бы более полный пример кода. Я подозреваю, что что-то не так с кодом, который вы здесь не разместили, иначе javascript выглядит нормально   -  person mbroadst    schedule 05.05.2014
comment
Куда вы поместили директиву ng-app=myapp?   -  person zszep    schedule 05.05.2014
comment
Извините за позднее редактирование. Это в теге body   -  person Priyanka    schedule 05.05.2014
comment
@mbroadst уверен, plnkr.co/edit/EASJ8q2jVVMWXM5w78RA?p=preview   -  person Priyanka    schedule 05.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны убедиться, что ваш основной модуль приложения внедряет ваш сервис. В вашем plnkr у вас есть:

var app = angular.module('myapp', []);

где вы действительно должны иметь:

var app = angular.module('myapp', ['apiService']);

Это гарантирует, что сервисный модуль будет внедрен в ваш модуль приложения, и вы сможете использовать UserFactory, который вы определили в этом модуле. Для этого простого случая вы могли бы также просто определить фабрику UserFactory в модуле «myapp».

person mbroadst    schedule 04.05.2014
comment
Не могли бы вы прислать ссылку на хороший учебник по методам CRUD для того же самого? - person Priyanka; 05.05.2014

arrow_upward
1
arrow_downward

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

var app = angular.module('myapp', [ 'apiService' ]);

Я также вижу пару других проблем, но одна вещь заключается в том, что я обычно делаю следующее для асинхронных запросов.

var promise = UserFactory.get({}).$promise; 
promise
   .then( function(response) {
     $scope.time = userFactory.time;
   });

EDIT: Вот пример именованных методов для данной службы ReST:

return $resource('/api/v2.0/user/lists/:listId',
    {},
    {

        // POST - list create/product addition to list
        'addProduct': {
            method: 'POST',
            isArray: false,
            params: {
                listId: '@listId',
                productId: '@productId'
            }
        },
        'createList': {
            method: 'POST',
            isArray: false,
            params: {
                listName: '@listName'
            }
        },

        // GET - list of user lists/list details
        'readLists': {
            method: 'GET',
            isArray: false,
            params: {}
        },
        'readListsWithProductId': {
            method: 'GET',
            isArray: false,
            params: {
                productId: '@productId'
            }
        },
        'readListById': {
            method: 'GET',
            isArray: false,
            params: {
                listId: '@listId',
                sort: '@sort',
                flags: true,
                extendedInfo: true,
                rows: '@rows',
                start: '@start'
            }
        },

        // PUT - list renaming
        'renameList': {
            method: 'PUT',
            isArray: false,
            params: {
                newName: '@listName',
                listId: '@listId'
            }
        },

        // DELETE - list deletion/clear/product removal
        'removeProduct': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId',
                productId: '@productId'
            }
        },
        'clearList': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId',
                clear: true
            }
        },
        'deleteList': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId'
            }
        }
    });

Вы можете получить к нему доступ следующим образом:

Factory.[methodName](payload)
person dmcqu314    schedule 04.05.2014
comment
И как меняется контроллер в соответствии с каждым методом? Не могли бы вы опубликовать хорошую ссылку на учебник для того же? - person Priyanka; 06.05.2014
comment
@Priyanka На этом сайте много хороших видеоуроков (большинство из которых бесплатны). Вот один из контроллеров и фабрик, который выглядит прилично: egghead.io/lessons/ angularjs-использование-ресурсов-для-моделей-данных - person dmcqu314; 06.05.2014