Develop Reference

ReferenceError: angular is not defined?

I have create service that are interact with server side but my case error like
angular are not defined. I am tired this error.
(function() {
angular.module('myApp').factory('userService', function($http, $q, $rootScope,CONSTANTS) {
var obj = {};
var response = {};
obj.setResponse = function(data) {
response = data;
}
obj.getResponse = function() {
return response;
obj.saveUser = function(user) {
console.log(user);
console.log()
var deferred = $q.defer();
var config = {
headers : {
'Content-Type' : 'application/json'
}
}
var data = angular.toJson(user);
console.log(data);
$http.post("user/createUser", data, config).success(
function(data, status, headers, config) { deferred.resolve(data);
}).error(function(data, status, headers, config) {
deferred.reject();
});
return deferred.promise;
}
return obj;
});
})();

Youtube API v3 console.logging way too much

I have some code which is should get channelinfo by name, followed by playlistId by channelinfo, followed by videoes by playlistId, and finally videodetails by videos.
On approximately 200 videos it seams to be calling the same YouTube API 500 times.
My code is as follows.
Service:
appApi.factory('ServiceAPI', ['$http', function($http) {
var factory = {};
factory.channelDetails = function(channelname, success, error){
var promise = $http.get('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+channelname+'&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
if(success){
promise.success(success);
}
if(error){
promise.error(error);
};
}
return factory;
}]);
appApi.factory('ServiceCHLnames', ['$http', function($http) {
var factory = {};
factory.channelnames = function(success, error){
var promise = $http.get('http://localhost:8080/api/resources/channelNames')
if(success){
promise.success(success);
}
if(error){
promise.error(error);
};
}
return factory;
}]);
appApi.factory('ServiceVideos', ['$http', function($http) {
var factory = {};
factory.videos = function(playlistId, success, error){
var promise = $http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=' + playlistId + '&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
if(success){
promise.success(success);
}
if(error){
promise.error(error);
};
}
return factory;
}]);
appApi.factory('ServiceVideoDtls', ['$http', function($http) {
var factory = {};
factory.videodetails = function(videoid, success, error){
var promise = $http.get('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + videoid + '&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
if(success){
promise.success(success);
console.log("GOT ONE VIDEO DETAIL")
}
if(error){
promise.error(error);
};
}
return factory;
}]);
controller:
var appApi = angular.module('YoutubeAPI', ['ngRoute'])
appApi.controller('youtubeCTRL', ['$scope','$http','$q','ServiceAPI','ServiceCHLnames','ServiceVideos','ServiceVideoDtls', function ($scope, $http, $q, ServiceAPI,ServiceCHLnames,ServiceVideos,ServiceVideoDtls) {
$scope.channel = [];
$scope.video = [];
var playlistId = [];
var pagetokenarr = [];
//GET Id on channelname
$scope.saveNewchlName = function () {
var channelname = $scope.newchlName;
ServiceAPI.channelDetails(channelname, function(data){
$scope.newchannelNames = {
channelName: $scope.newchlName,
channelId: data.items[0].id,
playlistId: data.items[0].contentDetails.relatedPlaylists.uploads
};
console.log($scope.newchannelNames)
$http({
method: 'POST',
url: 'http://localhost:8080/api/resources/channelNames/',
data: $scope.newchannelNames,
dataType: 'json'
}).success(function (data) {
$scope.channel.push(data);
console.log('SUCCESS!');
$scope.error = null;
}).error(function (data, status) {
if (status == 401) {
$scope.error = "You are not authenticated to Post these data";
return;
}
$scope.error = data;
});
});
}
//Henter Details på alle videoer på PlaylistID fra save NewchlName
$scope.GetDetailsOnChl = function () {
var playlistId;
ServiceCHLnames.channelnames(function(data){
angular.forEach(data._embedded.channelNames, function (chlName) { // FOR EACH LOOP, LOOPER IGENNEM ALLE CHL NAMES OG FINDER PLAYLIST ID
playlistId = chlName.playlistId;
console.log("i forEach loop") // CONSOLE.LOGGING
console.log(playlistId)// CONSOLE.LOGGING
// if (pagetokenarr.length == 0) {
ServiceVideos.videos(playlistId, function(data){
angular.forEach(data.items, function (item) {
var video = {
id: item.snippet.resourceId.videoId,
title: item.snippet.title,
dateofupload: item.snippet.publishedAt
};
$scope.video.push(video);
// console.log(video); // CONSOLE.LOGGING
//
// console.log($scope.video.length); // CONSOLE.LOGGING
pagetokenarr = data.nextPageToken;
});
// console.log($scope.video); // CONSOLE.LOGGING
// console.log($scope.video); // CONSOLE.LOGGING
angular.forEach($scope.video, function (video) {
var videoid = video.id;
// console.log(videoid); // CONSOLE.LOGGING
ServiceVideoDtls.videodetails(videoid, function(data){
// console.log("Vi er inde i videodetails") // CONSOLE.LOGGING
videometrics = {
id: data.items[0].id,
title: video.title,
dateofupload: video.dateofupload,
views: data.items[0].statistics.viewCount,
likes: data.items[0].statistics.likeCount,
dislikes: data.items[0].statistics.dislikeCount,
favoritecount: data.items[0].statistics.favoriteCount,
commentcount: data.items[0].statistics.commentCount
};
$http({
method: 'POST',
url: 'http://localhost:8080/api/resources/videos/',
data: videometrics,
dataType: 'json'
}).success(function (data) {
$scope.channel.push(data);
console.log('SUCCESS!'); // CONSOLE.LOGGING
$scope.error = null;
}).error(function (data, status) {
if (status == 401) {
$scope.error = "You are not authenticated to Post these data";
return;
}
$scope.error = data;
});
})
});
// }
});
})
I have no idea what is causing this issue, or if is normal.
When I check the http://localhost:8080/api/resources/videos/ with Postman, there are the 200 videos which it should call (and did).
however it still keep printing out the "SUCCESS" console.log too much.

So the videos array was making some async calls, and therefore my code posted some data before the video were properly pushed to the array.
I just removed the array and it worked.

Can not read property then of undefined error in angular JS

This is my angularJS service and controller.
sampleApp.factory('BrandService', function($http, $q) {
var BrandService = {};
var BrandList = [];
BrandService.GetBrands = function() {
var Info = {};
Info.Action = "GET";
Info = JSON.stringify (Info);
var req = {
url: BrandURL,
method: 'POST',
headers: { 'Content-Type': 'application/json'},
data: Info
};
if ( BrandList.length == 0 )
{
$http(req)
.success(function(response) {
BrandList = response.data
alert ('Brand Fetching is successful');
return response.data;
})
.error(function (data, status, headers, config) {
alert ('Brand Fetching Error');
alert (status);
alert (data);
});
}
else
{
var deferred = $q.defer();
deferred.resolve(BrandList);
return deferred.promise;
}
}
return BrandService;
});
sampleApp.controller('BrandController', ['$scope', 'BrandService', function ($scope, BrandService){
$scope.Brands = [];
$scope.GetBrands = function() {
BrandService.GetBrands().then(function(data) {
$scope.Brands = data;
});
};
$scope.GetBrands();
}]);
When controller is loading I m seeing the following error.
Cannot read property 'then' of undefined
at l.$scope.GetBrands (Controllers.js:337)
Can please someone help me what i m doing wrong?

You are not returning promise in case of HTTP request when data is not yet cached.
Correct code would be:
sampleApp.factory('BrandService', function($http, $q) {
var BrandService = {};
var BrandList = [];
BrandService.GetBrands = function() {
var req = {
url: BrandURL,
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify({Action: 'GET'})
};
if (BrandList.length) {
return $q.when(BrandList);
}
return $http(req)
.success(function(response) {
BrandList = response.data
alert('Brand Fetching is successful');
return response.data;
})
.error(function(data, status, headers, config) {
alert('Brand Fetching Error');
alert(status);
alert(data);
});
}
return BrandService;
});
Also you don't need to create dummy deferred object, you can return resolved promise with $q.when.

How to call ajax from service in AngularJS?

I have Employee controller which is having property Id, Name , Specification. I have made one Employee service which is having ajax call and get employee list. But every time getting '' in User.
When i debug the code i found that it call success first and then it goes for Ajax call.
When i do ajax call without service it works fine.
angular.module('EmployeeServiceModule', [])
.service('EmployeeSer', ['$http',function ($http) {
this.Users = '';
this.errors = '';
this.SearchEmployee = function () {
// Ajax call
$http({
method: 'GET',
url: '/Home/GetEmployeeList',
params: { filterData: 'Test' },
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(onSuccess, onError);
var onSuccess = function (response) {
this.userUsers = response.data;
this.errors = '';
};
var onError = function (reason) {
this.userUsers = reason;
this.errors = "Error in retrieving data.";
};
return this.Users;
}
}]);
angular.module('Employee', ['EmployeeServiceModule'])
.controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) {
this.Id = '';
this.name = '';
this.expertise = '';
$scope.repoSortOrder = 'id';
$scope.filterField = '';
// Call to service
this.GetAllEmployee = function () {
// Initiates the AJAX call
$scope.User = EmployeeSer.SearchEmployee();
// Returns the promise - Contains result once request completes
return true;
};
this.AddEmployee = function () {
var empData = {
Id: $("#txtId").val(),
Name: $("#txtName").val(),
Expertise: $("#expertise").val()
};
$http({
method: 'POST',
url: '/Home/Create',
params: JSON.stringify(empData),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(onSuccess, onError);
// Returns the promise - Contains result once request completes
return true;
};
var onSuccess = function (response) {
$scope.user = response.data;
$scope.error = '';
};
var onError = function (reason) {
$scope.error = "Error in retrieving data.";
};
}]);

It's because you are returning the users before the data is fetched from the server. Also it doesn't seem like you are assigning them correctly.
Here are two ways to solve the problem:
Firstly. You bind your controller user-data to the user-data in the service.
angular.module('EmployeeServiceModule', [])
.service('EmployeeSer', ['$http',function ($http) {
this.Users = '';
this.errors = '';
$http({
method: 'GET',
url: '/Home/GetEmployeeList',
params: { filterData: 'Test' },
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(onSuccess, onError);
var onSuccess = function (response) {
this.Users = response.data;
this.errors = '';
};
var onError = function (reason) {
this.users = null;
this.errors = "Error in retrieving data.";
};
}
}]);
angular.module('Employee', ['EmployeeServiceModule'])
.controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) {
this.users = EmployeeSer.users;
EmployeeSer.SearchEmployee();
}]);
And the second way would be to return the promise in the service and unwrap it in the controller.
angular.module('EmployeeServiceModule', [])
.service('EmployeeSer', ['$http',function ($http) {
this.SearchEmployee = function () {
return $http({
method: 'GET',
url: '/Home/GetEmployeeList',
params: { filterData: 'Test' },
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
}
}]);
angular.module('Employee', ['EmployeeServiceModule'])
.controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) {
this.GetAllEmployee = function () {
EmployeeSer.SearchEmployee()
.then(onSuccess, onError)
};
var onSuccess = function (response) {
$scope.user = response.data;
$scope.error = '';
};
var onError = function (reason) {
$scope.error = "Error in retrieving data.";
};
}]);
OFF TOPIC
You should probably consider using ngModel instead of jQuery to get you data to the controller.
Not like this:
var empData = {
Id: $("#txtId").val(),
Name: $("#txtName").val(),
Expertise: $("#expertise").val()
};

// Here serverRequest is my service to make requests to the server
serverRequest.postReq = function(url, data, sucessCallback, errorCallback){
$http({
method: 'POST',
url: urlToBeUsed,
data:data,
headers : {'Content-Type': 'application/x-www-form-urlencoded'}})
.success(function(data, status, headers, config) {
sucessCallback(data);
})
.error(function(data, status, headers, config){
errorCallback(data);
})
}
// In the controller
serverRequest.postReq('urlToBeCalled', dataToBeSent, scope.successCb, scope.errorCb);
scope.successCb = function(data){
// functionality to be done
}
scope.errorCb = function(data){
// functionality to be done
}
Try it this way your problem might be solved
Promise must be unwrapped in your controller if you want to use it

injecting factory in controller angularJS

i have a problem with angularJS factory and controller
i want to get the http reply in a factory and use the api reply in controller
but i dont know how to handle the factory and inject it in controller
.controller('PlaylistsCtrl', function ($scope, $http) {
$http({ method: 'GET', url: "https://www.googleapis.com/blogger/v3/blogs/1309320265504420965/posts?key=***************" }).
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
for (var i =0; i < data.items.length;i++)
{
var m,
urls = [],
str = data.items[i].content,
rex = /(https?:\/\/.*\.(?:png|jpg))/g;
while ( m = rex.exec( str ) ) {
urls.push( m[1] );
data.items[i].ImageURL = urls[0];
}
//data.items[i].ImageURL = urls[0];
}
$scope.playlists = data.items;
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or \\server returns response with an error status.
});
})

I am not exactly sure what you are looking for, but you can always return a promise by returning the http call. then grab that promise in controller and do something with it:
for example:
apiService.js
(function(app) {
"use strict";
app.factory("apiService", ["$http", function($http) {
var get = function(url, config) {
return $http.get(url, config);
};
var post = function(url, data, config) {
return $http.post(url, data, config);
};
var put = function(url, data, config) {
return $http.put(url, data, config);
};
var remove = function(url, config) {
return $http.delete(url, config);
};
return {
get: get,
post: post,
put: put,
remove: remove
};
}]);
})(_app);
and in your controller just inject the service:
(function(app) {
"use strict";
app.controller("MyCtrl", ["$scope", "apiService", function($scope, apiService) {
$scope.getData = function() {
apiService.get("/server/data").success(function(data) {
console.log(data);
}).error(function(err) {
console.log(err);
});
};
}
]);
})(_app);
Optional (app.js):
var _app = _app || {};
(function() {
"use strict";
_app = angular.module("myApp", []);
})();