ERROR:- $http is undefined in Angular JS - angularjs

I am getting an error for this piece of controller, $http is not defined. Please tell me what's missing..
define(
['activityFeedTimeStamp' ],
function(app) {
app.register
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$http.get('http://localhost:7001/ebiz/ebizdashboard/activityfeed/updatetimestamp').
success(function(data, status, headers, config) {
// $('#timeStampVal').html(data.lastacesstime);
$('#timeStampVal').html(hiiiiiiiii);
}).
error(function(data, status, headers, config) {
$("#timeStamp").hide();
});
}]);
});

Inject "$http" into the controller like so:
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
'$http', // need to inject $http into controller
function($scope, $rootScope, $http) {
Basically, any service you use (be it defined by you or built-in Angular one like $http) needs to be injected into a controller to be used.
Since you're using the minify-friendly controller syntax (which lists injections in both an array and the function parameters), you'll need to add it in both places.
See documentation:
https://docs.angularjs.org/guide/di
(Specifically the section "Inline Array Annotation")

I have gone through the same problem when I was using
myApp.controller('mainController', ['$scope', function($scope,) {
//$http was not working in this
}]);
I have changed the above code to given below. Remember to include $http(2 times) as given below.
myApp.controller('mainController', ['$scope','$http', function($scope,$http) {
//$http is working in this
}]);
and It has worked well.
source : https://stackoverflow.com/a/22125671/2439715

You havent injected a $http service in controller
app.register
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
'$http'
function($scope, $rootScope,$http) {
$http.get('http://localhost:7001/ebiz/ebizdashboard/activityfeed/updatetimestamp').
success(function(data, status, headers, config) {
// $('#timeStampVal').html(data.lastacesstime);
$('#timeStampVal').html(hiiiiiiiii);
}).
error(function(data, status, headers, config) {
$("#timeStamp").hide();
});
}]);
});

Related

angularjs view does not update after $http

edit: I'm using bootstrap, I think bootstrap tab is causing the
problem
View does not get updated after $scope variable update.
$scope.codeData
if i console the $scope.codeData, i can see the data, but does not render in view.
I have to click twice to get the view render correctly.
is there anything wrong with my code??
Thank you.
config
angular.module('SPAroutes', ['ngRoute', 'SPAcontrollers', 'SPAdirectives'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'templates/views/admin.html',
controller: 'adminCtrl',
controllerAs: 'admin'
})
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
Controller.js
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
$scope.codeData = res.data;
console.log($scope.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
admin.html
{{codeData}}
You are mixing up controllerAs with scope as phil mentioned in his comment on question. Instead of using scope here store values insidethis reference something like this.
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
var admin = this;
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
admin.codeData = res.data;
console.log(admin.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
and inside the view: admin.html
{{admin.codeData}}
here is working plunk for your refernce

Injecting Service using Angular Seed - 'Unknown provider' error

I'm following a PluralSight tutorial on AngularJS fundamentals. Though I'm using a much different structure as I seem to have a much newer version of Angular Seed.
I'm trying to inject a service into controller using the same syntax structure as I have done before, which was working fine, but this one brings the following error:
Error: [$injector:unpr] Unknown provider: eventDataProvider <- eventData
viewEventDetails.js (Controller)
'use strict';
angular.module('myApp.viewEventDetails', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/viewEventDetails', {
templateUrl: 'viewEventDetails/viewEventDetails.html',
controller: 'viewEventDetailsCtrl'
});
}])
.controller('viewEventDetailsCtrl', ['$scope', 'eventData', function($scope, eventData) {
$scope.sortorder = '-upVoteCount';
$scope.event = eventData.getEvent(function (event) {
$scope.event = event;
});
$scope.upVoteSession = function (session) {
session.upVoteCount++;
};
$scope.downVoteSession = function (session) {
session.upVoteCount--;
};
}
]);
EventData.js (Service)
angular.module('myApp.services', [])
.factory('eventData', ['$http', '$log', function ($http, $log) {
return {
getEvent: function () {
$http({ method: 'get', url: '/data/event/1' })
.success(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
})
.error(function (data, status, headers, config) {
$log.warn(data, status, headers(), config);
});
}
}
}]
);
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.filters',
'myApp.services',
'myApp.viewNewEvent',
'myApp.viewEventDetails',
'myApp.viewEditProfile',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
you need to inject the myApp.services into your module that the controller is in, since the modules are different.
i.e.
angular.module('myApp.viewEventDetails', ['ngRoute', 'myApp.services'])

$timeout not firing with $HTTP

I have inherited a site and I am trying to complete a final part. On all other controllers I have added a variation of
$timeout(function(){ //Issue is this doesn't seem to timeout...
$scope.rTapTopNumbersContainer = document.getElementById('rtap-quote-summary');
rTapNotifyDOMChange($scope.rTapTopNumbersContainer);
}, 100);
but on this final controller I cannot seem to add this code anywhere in the controller without the angular code not working, or where I have it at the moment, timeout. I need the timeout to fire to then update the HTML DOM.
If I put it in .success the timeout doesn't seem to work. Where can I put this code or how can I call this code after the $http has fired?
app.controller('summary', ['$scope', '$http', function($scope, $http, $timeout) {
var init = function () {
$http({
method: 'GET',
url: $scope.api + 'sites/site/?title=' + $scope.site
}).
success(function(data, status, headers, config) {
...assign vars to scope etc...
$timeout(function(){ //Issue is this doesn't seem to timeout...
$scope.rTapTopNumbersContainer = document.getElementById('rtap-summary');
rTapNotifyDOMChange($scope.rTapTopNumbersContainer);
}, 100);
}).
error(function(data, status, headers, config) {
});
}
init();
}]);
Maybe you didn't import $timeout correctly?
app.controller('summary', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { // twice
// 1. 2. 3. 1. 2. 3.
}]);

: [$injector:unpr] Unknown provider in angularjs can't inject factory into controller

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 ...

Cannot read property 'get' of undefined with Angular

I'm developing a mobile app with Cordova and Angular JS. My app is on an easyphp localhost.
I use Angular Routes with a ng view directive in my index.html. And I've got this :
TypeError: Cannot read property 'get' of undefined
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}])
...
If I test the URL my script returns JSON (with json_encode). Where am I wrong ?
Thanks for your help,
Regards
try to change
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope','$http', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}]);
Changes:
Passing $http service to controller as string so that will resolve at runtime.

Resources