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.
Related
I tried the $q service as follows but the browser still not waiting for the response. I already spent almost a day to figure out a solution, I also tried the $timeout.
login.controller("loginCtrl", ['$scope', '$rootScope', '$filter', '$window', '$http', 'APIService', 'localStorageService', 'doAlert', '$translate', '$q', '$timeout',
function ($scope, $rootScope, $filter, $window, $http, APIService, localStorageService, doAlert, $translate, $q, $timeout) {
$scope.isLogOut = true;
$(window).unload(function () {
$rootScope.$broadcast('onUnload');
});
$scope.$on('onUnload', function (e) {
var deferred = $q.defer();
$http.get(url).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
});
Here is a sample where I use a callback to process data back from my utility
function get(url, callback, obj) {
$http.get(url, obj)
.then(function (response) {
callback(response.data);
}, function () {
notification.error(PLEASE_CONTACT_SYS_ADMIN);
});
}
I am new to angularjs so this is probably simple. I have this as my main app entry point:
<div ng-app="mainApp">
<div ng-view></div>
</div>
Routed as such:
$routeProvider
.when('/general', { templateUrl: '/Rewards/SelfService_General', controller: 'GeneralController' })
.when('/resources', { templateUrl: '/Rewards/SelfService_Resources', controller: 'ResourcesController' })
.otherwise({ redirectTo: '/general' });
My resources controller is as such:
appRoot.controller('ResourcesController', ['$scope', '$interval', '$http', function ($scope, $interval, $http) {
$scope.GetResources = function GetResources() {
var requestData = {
AccessKey: "",
Culture: ""
};
$http.post('http://myapi.com/etc', requestData)
.success(function (data, status, headers, config) {
$scope.ViewName = status;
alert('success');
})
.error(function (data, status, headers, config) {
$scope.ViewName = status;
alert('error');
});
};
$interval($scope.GetResources(), 5000);
}]);
On loading the page, the GetResources function is immediately called and as expected, hits the error function returning a 401 status. What surprises me is that no further calls to GetResources are made. Why is the interval ended?
Adding this answer to close the issue.
In your markup attribute name should be ng-click not ngclick.
$interval($scope.GetResources(), 5000); should be $interval($scope.GetResources, 5000);
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'])
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();
});
}]);
});
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.
}]);