After Refering this Link , I am trying to get JSON data into my angular service.
Service:
.factory('restservice', ['$rootScope','$http', '$q', '$log',
function($rootScope,$q, $http) {
return {
getData: function() {
var defer = $q.defer();
$http.get('xyz.com/abc.php', { cache: 'true'})
.success(function(data) {
defer.resolve(data);
});
return defer.promise;
}
};
}])
Controller:
.controller('RestaurantsCtrl', function ($scope,$http, restservice,restViewservice){
restservice.getData().then(function(data) {
$scope.Restaurants = data;
});
})
After Implementing this console says '$q.defer is not a function'.
What's the issue here? Please Help ...!! Am new to Angular Js so forgive if something is wrong.
You have wrong service definition:
factory('restservice', ['$rootScope','$http', '$q', '$log',
function($rootScope, $q, $http) {
Should be:
factory('restservice', ['$rootScope', '$http', '$q', '$log',
function($rootScope, $http, $q, $log) {
Common mistake :)
We faced the same error and resolved now:
Please refer angular 1.6.1 version file, since older version of angular gives the above error.
Related
amcApp.service('utilService', function ($http, $q,$rootScope) {
var getSupportTypes = function () {
var deferred = $q.defer();
$http.get($rootScope.BaseUrl+'vendor/supportTypes')
.then(function daoSuccess(response) {
console.log("Getting Sub Customer Service call success ", response);
deferred.resolve(response);
}, function daoError(reason) {
console.log("Getting SubC data service call error", reason);
deferred.reject(reason);
});
return deferred.promise;
};
return{
getSupportTypes : getSupportTypes,
};
});
Above is the service I defined.
Below is the controller I defined.
amcApp.controller('contractForm', ['$scope', '$http','$rootScope','$filter', '$uibModal', '$state', 'testService','utilService','contractService',
function ($scope, $http,$rootScope, $filter,$uibModal, testService,utilService,contractService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function(response){
$scope.supportTypes = response.data.UtilDataType;
});
}]);
This is the error I'm getting:
Can I get any suggestions?
Check the dependencies what you inject into the controller, you have an extra $state in the array which has not been passed to the function. I would suggest to remove as the following:
amcApp.controller('contractForm', ['$scope', '$http', '$rootScope', '$filter', '$uibModal', 'testService','utilService','contractService',
function ($scope, $http, $rootScope, $filter, $uibModal, testService, utilService, contractService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function (response){
$scope.supportTypes = response.data.UtilDataType;
});
}]);
On the other hand I would simply remove all the not used services, I assume this is working also fine:
amcApp.controller('contractForm', ['$scope', 'utilService', function ($scope, utilService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function (response) {
$scope.supportTypes = response.data.UtilDataType;
});
}]);
Just a suggestion - if you keep your code clean it is much easier to figure out the root cause of any issues.
I am having difficulty getting $http service to work with my AngularJS application. I am developing it in Visual Studio 2012, using IISExpress. I have the following code:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope,$http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
});
}]);
"success" is never fired. How do I get $http to work?
You should also use .error() to figure out why it's not working.
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', ['$scope', '$http',
function($scope, $http) {
$http.get('js/data.json')
.success(function(data) {
$scope.artists = data;
})
.error(function(err) {
// Figure out what's not working here.
console.log(err);
});
}
]);
I have an unknown provider error and I'm not sure how to solve it. I think my services, controllers are declared properly. I have tried everything but it doesn't work. my photosFactory factory doesn't work. it's not injected into controller. I'd appreciate any help.
My app.js :
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
my controllers.js :
angular.module('starter.controllers', [])
.controller('PlaylistsCtrl', ['$scope', 'photosFactory', '$http', function ($scope, $http, Util, $ionicLoading, $location, photosFactory) {
$ionicSideMenuDelegate.canDragContent(true);
$scope.allDeals = [];
$scope.navigate = function(url){
$location.path(url);
};
photosFactory.getPhotos().success(function(data){
$scope.allDeals= data;
});
}])
My services.js :
angular.module('starter.services', [])
.factory('photosFactory', function($http) {
return{
getPhotos : function() {
return $http({
url: 'http://www.somecompany.co.uk/bigcapi/feeds/deals/company_id/88',
method: 'GET',
params: {all: '1', mobileready: 1}
})
}
}
})
I think it's because you don't inject $http in your factory.
Try it
.factory('photosFactory', [ '$http', function($http) {
return{
getPhotos : function() {
return $http({
url: 'http://www.somecompany.co.uk/bigcapi/feeds/deals/company_id/88',
method: 'GET',
params: {all: '1', mobileready: 1}
})
}
};
}]);
There is also a problem when declaring your controller
['$scope', 'photosFactory', '$http', function ($scope, $http, Util, $ionicLoading, $location, photosFactory) {
The order is very important so you must have something like this
['$scope', 'photosFactory', '$http', 'Util', '$ionicLoading', '$location', function ($scope, photosFactory, $http, Util, $ionicLoading, $location,) {
Well,
You only declared 3 injectables,
controller('PlaylistsCtrl', ['$scope', 'photosFactory', '$http',
but want to use 6 - that is not good.
function ($scope, $http, Util, $ionicLoading, $location, photosFactory)
Mind the order.
You haven't included your HTML so can't confirm - did you include your services javascript in the index?
Assuming you fix your various import issues, this seems the most likely reason.
Actually you should only declare angular.module('starter.controllers', []) once. You should use angular.module('starter.controllers') instead. (eg. angular.module('starter.controllers', []).controller ...
I understand how to use Restangular in a controller, however my thoughts are that Restangular is essentially an ORM on steroids.
The ORM shouldn't have any knowledge of the state of the application. That is the job of the controller.
I also want to re-use queries to the ORM, and as such, I believe that Restangular should be used inside a service.
My problem is that I am a js / angularjs and restangular noob, having only about 2-3 months exp with anything front-end.
My Controllers:
app.controller('AdminSupplierIndexController',
['$scope', '$stateParams', '$state', 'Supplier',
function ($scope, $stateParams, $state, Supplier) {
$state.reload();
Supplier.getAll.then(function (suppliers) {
$scope.suppliers = suppliers;
});
}]);
app.controller('AdminSupplierDetailController',
['$scope', '$stateParams', 'Supplier',
function ($scope, $stateParams, Supplier) {
Supplier.getOne({ supplierId : $stateParams.supplierID}).then(function(supplier) {
$scope.supplier = supplier;
});
}]);
My Factory
app.factory('Supplier', ['Restangular', function (Restangular) {
return {
getAll: Restangular.all('supplier').getList(),
getOne: Restangular.one('supplier', supplierId).get()
};
}]);
My Supplier.getAll method works fine - I can list all the suppliers from the Supplier factory.
My problem is with my Supplier.getOne method.
Question 1: How do I inject the supplierId into the factory? I am getting ReferenceError: supplierId is not defined
Question 2: Am I trying to over-engineer things considering that I would have to create individual methods for C-R-U-D for every single factory when these methods are already provided by Restangular?
I know this is old, but an alternate way would just be to wrap it within a function. This way, you can keep any other logic within the service/method.
app.factory('Supplier', ['Restangular', function (Restangular) {
return {
getAll: Restangular.all('supplier').getList(),
getOne: function(supplierId) {
return Restangular.one('supplier', supplierId).get()
}
};
}]);
Found the solution in https://github.com/mgonto/restangular#decoupled-restangular-service
Essentially, the way I have solved this problem is as follows:
app.js
$stateProvider
...
.state('admin.supplier', {
url : "/supplier",
templateUrl : 'templates/admin/supplier/index.html',
controller: "AdminSupplierIndexController",
resolve: {
suppliers: ['Supplier', function(Supplier) {
return Supplier.getList();
}]
}
})
.state('admin.supplier.detail', {
url : "/:supplierId",
templateUrl : "templates/admin/supplier/detail.html",
controller: "AdminSupplierDetailController",
resolve: {
supplier : ['Supplier', '$stateParams', function(Supplier, $stateParams) {
return Supplier.one($stateParams.supplierId).get();
}]
}
})
...
Supplier.js
app.factory('Supplier', ['Restangular', function(Restangular) {
return Restangular.service('supplier');
}]);
SupplierControllers.js
app.controller('AdminSupplierIndexController', ['$scope', '$stateParams', '$state', 'suppliers',
function ($scope, $stateParams, $state, suppliers) {
$state.reload();
$scope.suppliers = suppliers;
}]);
app.controller('AdminSupplierDetailController', ['$scope', 'supplier',
function ($scope, supplier) {
$scope.supplier = supplier;
}]);
I wrote a directive and a service. The directive calls a timeout function in the service. However, once the $timeout is reached, it throws an error:
TypeError: object is not a function
Original $scope.msg is not displayed. And the $timeout function does not wait for (20sec) to call the callback (or so I assume, since the $scope.msg changes right away).
I am absolutely lost. I found a few questions regarding timeouts, but none of them seem to have this problem. This one is as close as I got, and I am already following that answer Angularjs directive TypeError: object is not a function.
Here is a Plunker to the code:
http://plnkr.co/edit/xrepQOWIHlccbW5atW88?p=preview
And here is the actual code.
angular.module('myApp', [
'ui.bootstrap',
'myApp.services',
'myApp.directives',
]);
angular.module('myApp.directives', []).
directive('logoutNotification', [
function(admin) {
return {
restrict: "E",
template: "<div>{{msg}}</div>",
controller: ["$scope", "$timeout", "admin",
function($scope, $timeout, admin) {
$scope.msg = "Hey, no timeout yet";
$scope.resetNotification = function() {
admin.resetNoticeTimer(function(){
$scope.msg = "Hey, I'm back from timeout"
});
};
}
],
link: function(scope) {
scope.resetNotification();
}
};
}
]);
angular.module('myApp.services', []).
factory('admin', ['$rootScope', '$location', '$timeout',
function($rootScope, $timeout, $location, admin) {
var noticeTimer;
return {
resetNoticeTimer: function(cb) {
if (noticeTimer) {
$timeout.cancel(noticeTimer);
}
noticeTimer = $timeout(cb(), 20000);
}
};
}
]);
Thanks in advance!
You have misordered the dependencies.
Your code:
factory('admin', ['$rootScope', '$location', '$timeout',
function($rootScope, $timeout, $location, admin) {
Should be:
factory('admin', ['$rootScope', '$timeout', '$location',
function($rootScope, $timeout, $location) {