**Does anyone know how you can check to see that a resource failed to be fetched in AngularJS?
error:
Error: [ng:areq]
http://errors.angularjs.org/undefined/ng/areq?p0=PhotoListCtrl&p1=not%20a%20function%2C%20got%20undefined
**
<html ng-app>
<head>
<title>angularjs</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body ng-controller="PhotoListCtrl">
<h1>Angular js</h1>
<p>Nothing here {{'yet' + '!'}}</p>
<button title="list" ng-click="list()">list</button>
<button title="copy" ng-click="copy()" >copy</button>
<ul >
<li ng-repeat="photo in photos">
<img src="{{'data:image/png;base64,' + photo.Image}}" title="{{photo.Name}}"></img>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.min.js"></script>
<script type="text/javascript">
var app= angular.module('myApp', ['ngResource']).factory('dataservice', function ($resource) {
return $resource('/applicationdata.svc/Photos/:id', {id:'#id'}, {
query: { method: 'GET', isArray: true },
get: { method: 'GET', params: {id:0} },
remove: { method: 'DELETE' },
edit: { method: 'PUT' },
add: { method: 'POST' }
});
});
app.controller('PhotoListCtrl', ['$scope', 'dataservice', function ($scope, dataservice) {
$scope.photos = [];
$scope.list = function () {
dataservice.query({}, function (data) {
$scope.photos = data.value;
});
};
}]);
//function PhotoListCtrl($scope ,$http) {
// $http.get('/applicationdata.svc/Photos').success(function (data) {
// $scope.photos = data.value;
// });
// $scope.orderProp = 'Name';
// $scope.copy = function () {
// $http.post('/applicationdata.svc/Photos', $scope.photos[0]).success(function (data) {
// console.log(data);
// });
// }
//}
</script>
</body>
</html>
Related
I am new to AngularJS and Ionic. I have the following problem. I cannot pass the data from the factory service to the controller and scope.
May I know what is the problem?
service.js
angular.module("starter")
.factory("newsFeedService", function($http){
var feedService={};
feedService.retrieve = function() {
$http.get("https://jsonplaceholder.typicode.com/posts/")
.then(function(response) {
return response.data;
})
.catch(function(response) {
console.log("Error retrieving data.")
})
.finally(function(response) {
console.log("End of service.")
})
}
return feedService;
})
controller.js
angular.module("starter")
.controller("newsFeedController", function($scope, newsFeedService) {
$scope.newsFeeds = newsFeedService.retrieve(function(data));
console.log($scope.newsFeeds);
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/service.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="newsFeedController">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">SG News Feed </h1>
</ion-header-bar>
<ion-content>
<ul ng-repeat="newsFeed in newsFeeds">
<li>{{newsFeed.title}}</li>
</ul>
</ion-content>
</ion-pane>
</body>
</html>
Your function does not return the response of your http call but a promise.
Correct your controller as follow:
angular.module("starter")
.controller("newsFeedController", function($scope, newsFeedService) {
$scope.newsFeeds ={};
$scope.loadNews = function(){
newsFeedService.retrieve(function(data){
// the server returns the news: you can use them in your scope
$scope.newsFeeds = data;
});
}
$scope.loadNews();
})
// on service
feedService.retrieve = function(successCallback, failedCallback) {
$http.get("https://jsonplaceholder.typicode.com/posts/")
.then(successCallback, failedCallback);
}
// on controller
$scope.newsFeeds = null;
newsFeedService.retrieve(function(response){
$scope.newsFeeds = ......;
console.log($scope.newsFeeds);
},
function(response){
console.log("Oops! somethings went wrong!");
});
Try above code. Because $http.get is asynchronous, so I think all data handling should be done in callback function.
You can read more detail on AngularJS document: $http service document
Try following code.
angular.module("starter")
.factory("newsFeedService", function($http, $q) {
var retrieve = function() {
var deferred = $q.defer();
$http.get("https://jsonplaceholder.typicode.com/posts/")
.then(function(response) {
deferred.resolve(response);
})
.catch(function(response) {
console.log("Error retrieving data.")
deferred.reject(response);
})
.finally(function(response) {
console.log("End of service.")
})
return deferred.promise;
}
return {
retrieve: retrieve
};
})
/*Because $http.get return promise you can use following way as well without $q service*/
.factory("newsFeedService", function($http) {
var retrieve = function() {
return $http.get("https://jsonplaceholder.typicode.com/posts/");
}
return {
retrieve: retrieve
};
})
angular.module("starter")
.controller("newsFeedController", function($scope, newsFeedService) {
newsFeedService.retrieve().then(function(data) {
$scope.newsFeeds = data
}, function(data) {
console.log(data);
});
console.log($scope.newsFeeds);
})
You have to return promise from the retrieve function like so :
angular.module("starter")
.factory("newsFeedService", function($http){
var feedService={};
feedService.retrieve = function() {
return $http.get("https://jsonplaceholder.typicode.com/posts/") // "return" is the key here
.then(function(response) {
return response.data;
})
.catch(function(response) {
console.log("Error retrieving data.")
})
.finally(function(response) {
console.log("End of service.")
})
}
return feedService;
})
and then in controller :
angular.module("starter")
.controller("newsFeedController", function($scope, newsFeedService) {
newsFeedService.retrieve()
.then(function(data){
$scope.newsFeeds = data;
console.log($scope.newsFeeds);
})
.catch(function(){
})
})
I am attempting to integrate Filestack into an existing app. I think I am having issues with how those modules are configured, but can't get the ordering correct. I receive this error:
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=TypeError%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A20%3A156)
Here is the routing file:
(function () {
var app = angular.module('myApp', ['ngRoute', 'angular-filepicker']);
// ROUTING
app.config(['$routeProvider', function($routeProvider, filepickerProvider){
$routeProvider
.when('/home', {
templateUrl: "views/home.html",
controller: "HomeController"
})
.when('/shopping-list/:id', {
templateUrl: "views/shopping-list.html",
controller: 'ShoppingListController'
})
.when('/add-list', {
templateUrl: "views/add-list.html",
controller: 'AddListController'
})
.otherwise({
redirectTo: '/home'
});
filepickerProvider.setKey('XXXXXXX');
}]);
Here is the index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- CDN SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js"></script>
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tara's Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Imported Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Shopping List</title>
</head>
<body>
<div ng-include="'partials/header.html'"></div>
<main ng-view></main>
<!--ANGULAR SCRIPTS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="/bower_components/filepicker-js/filepicker.js"></script>
<script src="/bower_components/angular-filepicker/dist/angular_filepicker.js"></script>
<script type="text/javascript" src="//api.filestackapi.com/filestack.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/controllers/controller-header.js"></script>
<script type="text/javascript" src="js/controllers/controller-home.js"></script>
<script type="text/javascript" src="js/controllers/controller-add-list.js"></script>
<script type="text/javascript" src="js/controllers/controller-shopping-list.js"></script>
</body>
</html>
And the controller that is using Filestack:
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('ShoppingListController', ['$scope', '$http', '$routeParams', 'API_BASE', '$location', function($scope, $http, filepickerService, $routeParams, API_BASE, $location){
// GET SPECIFIC LIST
$scope.list = [];
var id = $routeParams.id;
$http({
method: 'GET',
url: API_BASE + 'shopping-lists/' + id
}).then(function successCallback(response) {
$scope.list = response.data[0];
}, function errorCallback(response) {
console.log('it did not work');
console.log(response.statusText);
});
// REMOVE LIST
$scope.removeList = function(){
var id = $scope.list.id;
console.log(id);
$http.delete(API_BASE + 'shopping-lists/' + id)
.success(function (data, status, headers, config) {
console.log('you deleted :' + $scope.list);
})
.error(function (data, status, header, config) {
});
$location.path('/home');
};
// RANDOM ID
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
text += Date.now();
return text;
}
// ADD ITEM
$scope.addItem = function(){
var created = new Date();
var newID = makeid();
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
name : $scope.newItem.name,
priority : $scope.newItem.priority,
note: $scope.newItem.note,
picture: $scope.newItem.picture,
isChecked: false,
listId: $scope.list.id,
created: created,
id: newID
});
// console.log($scope.list.items);
$http.put(API_BASE + 'shopping-lists/', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
// Reset input fields after submit
$scope.newItem = {
name: "",
priority: "",
note: ""
};
};
// ADD ITEM IMAGE
$scope.upload = function(){
filepickerService.pick(
{
mimetype: 'image/*',
language: 'en',
services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE','IMAGE_SEARCH', 'FACEBOOK', 'INSTAGRAM'],
openTo: 'IMAGE_SEARCH'
},
function(Blob){
console.log(JSON.stringify(Blob));
$scope.newItem.picture = Blob;
$scope.$apply();
});
};
// REMOVE ITEM
$scope.removeItem = function(item){
var removedItem = $scope.list.items.indexOf(item);
$scope.list.items.splice(removedItem, 1);
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// CLEAR ITEMS
$scope.clearItems = function(){
$scope.list.items.length = 0;
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// CLEAR CHECKED ITEMS
$scope.clearCheckedItems = function(){
var length = $scope.list.items.length-1;
for (var i = length; i > -1; i--) {
if ($scope.list.items[i].isChecked === true) {
$scope.list.items.splice(i,1);
}
}
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
//Edit Items / Checked Items
$scope.editItem = function(){
$http.put(API_BASE + 'shopping-lists', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
};
// SORT ITEMS
$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};
}]);
}());
Right now, I can't get the page to load at all. Something isn't being called properly, I just can't figure out how to get the page to load (getting the Filestack to function properly is secondary right now).
Any suggestions with the configuration?
You do not have to declare a module for your controller,
var app = angular.module('myApp');
Change like this also you are missing 'filepickerService' while inecting,
angular.module('myApp').controller('ShoppingListController', ['$scope', '$http','filepickerService', '$routeParams', 'API_BASE', '$location', function($scope, $http, filepickerService, $routeParams, API_BASE, $location){
I wrote some Angular JS code by learning from a tutorial. But in that video tutorial, the code works properly, but my code is not working. My web page is showing a blank page.
The index.html:
<div body ng-app="angularTable">
<div class="all_cat_main" ng-controller="listdata">
<div class="all_cat" ng-repeat="state in statelist">
<h2>{{state.Satename}}</h2>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="~/Content/AppJS/AllSate.js"></script>
And the AllSate.js
var app = angular.module('angularTable', []);
app.controller('listdata', function ($scope, $http) {
$scope.statelist = [];
$.ajax({
url: "/JobWebApi/getDataForAngularGrid",
dataType: 'jsonp',
method: 'GET',
data: '',
})
.success(function (response) {
$scope.statelist = response;
})
.error(function (error) {
alert(error);
});
});
Please someone guide me why the code is not working ?
Please Remove injected $http from Controller and Firstly Load Jquery lib file.(http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js)
var app = angular.module('angularTable', []);
app.controller('listdata', function ($scope) {
$scope.statelist ="";
$.ajax({
url: "http://api.geonames.org/weatherIcaoJSON?ICAO=LSZH&username=demo",
dataType: 'jsonp',
method: 'GET',
data: '',
}).success(function (response) { debugger;
$scope.statelist = response.status;
$scope.$apply();
})
.error(function (error) {
alert(error);
});
});
<html ng-app="angularTable">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body ng-controller="listdata">
<div >
<div >
<h2>{{statelist.message}}</h2>
</div>
</div>
</body>
</html>
I'm not too much angularjs information . I want to make the ionic foursquare integration . But do not resolve the error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error:
[$injector:modulerr] Failed to instantiate module ngFoursquare due to:
Error: [$injector:nomod] Module 'ngFoursquare' is not available!
You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
app.js
angular.module('starter', ['ionic', 'starter.controllers' ,'ngFoursquare'])
.constant('CLIENT_ID', 'X4ITCR1UHKU2EKFVIBEZRRYX52W2I2I3I3ZN5K0A2M3YDIKS')
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, FoursquareProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
//$urlRouterProvider.otherwise('/app/playlists');
$urlRouterProvider.otherwise({
resolve : {
token: function ($location) {
var match = $location.path().match(/access_token=(.*)/)
if(match){
FoursquareProvider.token = match[1]
}
}
}
,templateUrl: 'templates/login.html'
,controller:'LoginCtrl'
})
});
controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.loginData = {};
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeLogin = function() {
$scope.modal.hide();
};
$scope.login = function() {
$scope.modal.show();
};
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('LoginCtrl', function($scope,Foursquare, $log, CLIENT_ID, $location) {
var match = $location.path().match(/access_token=(.*)/)
$scope.userId = 'self'
$scope.client_id = CLIENT_ID
$scope.redirect_uri = encodeURIComponent(location.origin+location.pathname)
$scope.access_token = match && match[1] || ''
$scope.clear = function () {
$scope.userId=null
$scope.venueId=null
$scope.ll=null
$scope.checkinId=null
}
$scope.getUser = function (userId) {
$scope.data = Foursquare.Users.get({
userId: userId
},function (data) {
$scope.user = data.response.user
})
}
$scope.getUserLists = function (userId) {
$scope.data = Foursquare.Users.lists({
userId: userId
})
}
$scope.searchVenues = function (ll) {
$scope.data = Foursquare.Venues.search({ll:ll})
}
$scope.getVenue = function (venueId) {
$scope.data = Foursquare.Venues.get({
venueId:venueId
})
}
$scope.addCheckin = function (venueId,broadcast) {
$scope.data = Foursquare.Checkins.add({
venueId:venueId,
broadcast:broadcast
})
}
$scope.getCheckin = function (checkinId) {
$scope.data = Foursquare.Checkins.get({
checkinId:checkinId
})
}
$scope.search = function () {
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.$apply(function () {
$scope.pos = pos
$scope.data = Foursquare.search(pos)
})
})
}
$scope.getList = function (listId) {
$scope.data = Foursquare.Lists.get({
listId:listId
})
}
$scope.addList = function (name) {
$scope.data = Foursquare.Lists.add({
name:name
})
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/foursquare.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
foursquare.js
angular.module('ngFoursquare',["ngResource"])
.constant('BASE_API_URL','https://api.foursquare.com/v2')
.constant('encodeParam',function (data) {
return data && Object.keys(data).map(function (k) {
return encodeURI(k)+'='+encodeURI(data[k])
}).join('&')
})
.config(function ($provide,$resourceProvider,$httpProvider) {
var $hp = angular.copy($httpProvider)
,$rp = angular.copy($resourceProvider)
i = 0
$provide.decorator('$cacheFactory',function ($delegate) {
return function (cacheId,options) {
if(cacheId=='$http'){
cacheId+=''+i++
}
$delegate(cacheId,options)
}
})
delete $hp.defaults.headers.common["X-Requested-With"]
$provide.provider('$customHttp',$hp)
$rp.$get[0]="$customHttp"
$provide.provider('$customResource',$rp)
})
.provider('Foursquare',function (encodeParam) {
var FoursquareProvider = {
'$get': function ($customResource,$q,BASE_API_URL) {
var $resource=$customResource
,params = {
oauth_token: FoursquareProvider.token || ''
,v: '20130425'
}
,Foursquare = {
token: function (token) {
FoursquareProvider.token = token
}
,Users: $resource(BASE_API_URL+'/users/:userId/:action',
{},{
lists:{
method:'GET',
params: angular.extend({action:'lists'},params)
},
get:{
method:'GET',
params: params
}
})
,Venues : $resource(BASE_API_URL+'/venues/:venueId/:action',
{},{
search: {
method: 'GET'
,params: angular.extend({action:'search'},params)
},
get: {
method: 'GET',
params: params
}
})
,Checkins: $resource(BASE_API_URL+'/checkins/:checkinId/:action',
{},{
add: {
method: 'POST',
params: angular.extend({action:'add'},params),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: encodeParam
},
get: {
method: 'GET',
params: params
}
})
,Lists: $resource(BASE_API_URL+'/lists/:listId/:aspect/:action',
{},{
get: {
method:'GET',
params: params
},
add: {
method: 'POST',
params: angular.extend({action:'add'}, params),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: encodeParam
}
})
,search:function (position) {
return $q.when(position).then(function (pos) {
var c = pos.coords,
ll = "" + c.latitude + "," + c.longitude
return ll
})
.then(function (ll) {
var deferred = $q.defer()
Foursquare.Venues.search({
ll:ll
},deferred.resolve,deferred.reject)
return deferred.promise
})
}
}
return Foursquare
}
}
return FoursquareProvider
})
I think you have not included angular-resource.js in your index.html.
You need to include it first.Then after your ngFoursquare module is created
and then it is available for injection in other module.
i am trying angular for the first time. i am trying to sign in with google account. But It is not working. When i load the page the button appears and then after loading it hides. and the code is not working to.
here is my app.html
<body >
<div ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="update()">Post data</button>
</div>
<div ng-controller="SignCtrl">
<span id="signinButton" >
<span class="g-signin" ng-click="signIn()"></span>
</span>
<button onclick="SignedOut();">SignedOut</button>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript" src="appMy1.js"></script>
<script type="text/javascript" src="GSignIn.js"> </script>
</body>
Here is my controller
var app = angular.module("app", []);
app.factory("GPlusAuthService", function ($q, $window) {
var signIn;
signIn = function () {
var defered = $q.defer();
$window.signinCallback = function (response) {
$window.signinCallback = undefined;
defered.resolve(response);
};
gapi.auth.signIn({
clientid: "389760997134-uredjv5rat0k3vsjaqlt7nn4pbgtqrat.apps.googleusercontent.com",
cookiepolicy: "single_host_origin",
requestvisibleactions: "http://schemas.google.com/AddActivity",
scope: "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read",
callback: "signinCallback"
})
return defered.promise;
};
return {
signIn: signIn
}
});
app.controller("AppCtrl", function($scope,$http) {
$scope.update=function(){
$http.post("/user/signup",{Name:'Mr.x',Email:'AX#gmail.com',Organisation:'Ruet',PlacesLived:'dhaka',Img_url:'xyz'})
.success(function(data, status, headers, config) {
console.log(headers);
})
.error(function(data, status, headers, config) {
//console.log(data);
console.log(headers);
});
}
}),
app.controller('SignCtrl', function ($scope, GPlusAuthService) {
$scope.signIn = function() {
GPlusAuthService.signIn().then(function(response) {
});
}
});
Any clue what i am doing wrong?
The error is "cookiepolicy is a required field". But i have mentioned the cookiepolicy.