Tidak ada data yang dikembalikan saat menggunakan layanan web Restful menggunakan Angularjs

masukkan deskripsi gambar di siniSaya pemula mempelajari Angularjs. Tolong bantu saya dengan contoh untuk mengikuti

skrip ditambahkan

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
    }
})
});

berkas .html

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

cuplikan di atas memberikan keluaran sebagai

Hasil dari layanan RESTful adalah : {{time}}

dan bukan nilai yang saya harapkan ..Referensi : http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/

Saya ingin menulis metode CRUD (GET/POST/PUT/DELETE) dan saya sudah mulai dengan GET.

Terima kasih


crud angularjs restful-url angularjs-controller angularjs-service
person Priyanka    schedule 04.05.2014    source sumber
comment
Bisakah Anda membuat plnkr (plnkr.co)? Atau setidaknya contoh kode yang lebih lengkap. Saya curiga ada yang salah dengan kode yang belum Anda posting di sini, jika tidak, javascriptnya terlihat baik-baik saja   -  person mbroadst    schedule 05.05.2014
comment
Di mana Anda meletakkan direktif ng-app=myapp Anda?   -  person zszep    schedule 05.05.2014
comment
Maaf terlambat mengedit. Ada di tag badan   -  person Priyanka    schedule 05.05.2014
comment
@mroadst yakin plnkr.co/edit/EASJ8q2jVVMWXM5w78RA?p=preview   -  person Priyanka    schedule 05.05.2014

Jawaban (2)


arrow_upward
1
arrow_downward

Anda perlu memastikan bahwa modul aplikasi utama Anda memasukkan layanan Anda. Di plnkr Anda, Anda memiliki:

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

di mana Anda seharusnya memiliki:

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

Hal ini memastikan bahwa modul layanan dimasukkan ke dalam modul aplikasi Anda, dan Anda dapat menggunakan UserFactory yang Anda tentukan dalam modul tersebut. Untuk kasus sederhana ini Anda juga dapat mendefinisikan pabrik UserFactory pada modul 'myapp' juga

person mbroadst    schedule 04.05.2014
comment
Bisakah Anda mengirimkan tautan untuk tutorial yang bagus tentang metode CRUD yang sama? - person Priyanka; 05.05.2014

arrow_upward
1
arrow_downward

Ini sangat dekat tetapi Anda memiliki sedikit kesalahan dalam pembuatan instance aplikasi Anda. Seharusnya sebagai berikut:

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

Ada beberapa masalah lain yang saya lihat juga, tetapi satu hal adalah saya biasanya melakukan hal berikut untuk permintaan async

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

EDIT: Berikut ini contoh metode bernama untuk layanan ReST tertentu:

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'
            }
        }
    });

Anda dapat mengaksesnya seperti berikut:

Factory.[methodName](payload)
person dmcqu314    schedule 04.05.2014
comment
Dan bagaimana perubahan pengontrol sesuai setiap metode? Bisakah Anda memposting tautan tutorial yang bagus untuk hal yang sama? - person Priyanka; 06.05.2014
comment
@Priyanka Situs ini memiliki banyak video tutorial bagus (sebagian besar gratis). Inilah pengontrol dan pabrik yang terlihat layak: egghead.io/lessons/ Angularjs-menggunakan-sumber daya-untuk-model-data - person dmcqu314; 06.05.2014