I'm new to angularjs. I'm working on a web application using angularjs and cloud endpoints. I'm getting the response from endpoint and I can see that in Console.log also. but when I'm trying to print that response it's not working. I'm not getting what's going wrong. Can anyone fix this?
Here's my code.
HTML Page
<div ng-repeat="lister in lists">
</div><h2>{{lister.title}}</h2>
</div>
AngularJs Code
<script>
function init() {
window.init();
}
</script>
<script>
var app = angular.module('list',[]);
app.controller('listCtrl',function($scope,$window){
$window.init= function() {
$scope.loader();
};
$scope.loader= function(){
gapi.client.load('MyEndPoint', 'v1', function(){
gapi.client.MyEndPoint.MyMethod1({
'latitude':'24.5555','longitude':'45.55555'
}).execute(function(resp) {
$window.console.log(resp);
$scope.lists = resp.items;
});
}, 'https://MyEndpointURL.appspot.com/_ah/api');
};
</script>
Related
I have a problem where a page has two components but only one of them is fully rendered.
The problem seem to be related to $http. I have a angular project where I need to construct a page based on RESTful API. The pages are such that I can expect multiple requests for the same data. At the moment, the set of requests are not behaving correctly.
For the sake of the argument (and also because it is a use case), the following page makes the same request twice.
game.html:
<html ng-app="prvdApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>Providence</title>
<script src="/js/angular-1.6.2.js"></script>
<script src="/data-access/data-access.service.js"></script>
<script src="/score-info/score-info.component.js"></script>
<script src="/js/game.js"></script>
</head>
<body>
<div ng-controller="gameController">
<score-info game-id="8000"></score-info>
<score-info game-id="8000"></score-info>
</div>
</body>
game.js:
angular.module('prvdApp', [
'scoreInfo',
'drivesInfo' ]);
angular.
module('prvdApp').
controller('gameController', function() {
});
score-info.component.js:
angular.module('scoreInfo', [
'dataAccess'
]);
angular.
module('scoreInfo').
component('scoreInfo', {
templateUrl : '/score-info/score-info.template.html',
controller : function ScoreInfoController(dataAccess) {
self = this;
self.$onInit = function() {
dataAccess.game(self.gameId).then(function(game) {
self.game = game;
});
}
},
bindings : {
gameId : '<'
}
});
score-info.template.html:
<div>
Data available: {{ $ctrl.game != undefined }}
</div>
data-access.component.js:
angular.module('dataAccess', []);
angular.
module('dataAccess').
service('dataAccess',
function DataAccessService($http, $q) {
self = this;
self.game = function(game_id) {
var url = '/api/game/' + game_id;
return $http.get(url, { cache: true}).then(function(response) {
return response.data;
});
}
});
The behaviour is as follows:
The page renders with the content:
Data available: false
Data available: false
After some hundreds of milliseconds the $http -request finishes, the page is updated to the following state where only the latter component is updated.
Data available: false
Data available: true
It should be noted that the behaviour is the same even if the two components are of different types with different controllers, etc.
I am trying to make a post request using Google Cloud Endpoints and AngularJS when the page loads so I can get the user information and fill the profile picture, profile description and so on...
I am able to run requests when pressing a button or something like that but can't call the google endpoints automatically when the page loads and that is whats I am trying to achieve.
Below is the HTML part where the {{userPicture}} should've been loaded in the angular script:
(HTML)
<div class="form-group">
<label class="col-sm-3 control-label">Profile image</label>
<div class="col-sm-9" ng-controller='initController'>
<img src="{{userPicture}}" class="user-image-profile" alt="User Image">
</div>
</div>
(ANGULAR)
controllers.initController = function($scope, $http){
$scope.userForm = {
"userEmail" : $.cookie('auth')
};
gapi.client.igardenendpoints.getProfile($scope.userForm).execute(function(resp) {
$scope.$apply(function () {
if (resp.error) {
$scope.backmessage.messagetext = "GetProfile Error!"
console.log("error");
} else {
if (resp.userEmail == "TEMPLATE"){
$scope.backmessage.messagetext = "Error please try again!"
}else{
$scope.userPicture = 'https://filiperebollo1986.appspot.com/serve?blob-key=' + resp.profilePicKey;
}
}
});
});
}
error
I also tried to use the following:
$scope.initData = function () {
gapi.client.igardenendpoints.getProfile($scope.userForm)...........
}
and run the function at the end of the controller, like:
$scope.initData();
But both does not work, any help on that?
I will not be able to help you in 100% as I'm not using Google Cloud, but will try to do my best.
First of all, to get the data it's usually better to use services rather than do it in the controller.
But anyway, your problem seems to be different. In your HTML did you include your script and client API?
I was able to fix my problem and bellow is the solution:
The problem was that at the moment of my call, the script may not have been loaded once I was using the "ng-app" directive directly on the body TAG.
Now I am injecting the angular module dinamicaly just after my API loading:
function googleOnLoadCallback(){
var apisToLoad = 1; // must match number of calls to gapi.client.load()
var gCallback = function() {
if (--apisToLoad == 0) {
//Manual bootstraping of the application
var $injector = angular.bootstrap(document, ['authModule']);
console.log('Angular bootstrap complete ' + gapi);
};
};
gapi.client.load('igardenendpoints', 'v12', gCallback, '//' + window.location.host + '/_ah/api');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>
And now It is working!!!!
The only problem now is that when the page loads it appears the {{example}} in the page, is it possible to avoid the {{}} to appear?
I have a issue.i make ajax-post request then it execute properly then i get the response.After process the response i need again make ajax-get then those data i set to a variables in the scope.the data are successfully assign in to variable but html elements are not refresh.this is the sample code.
this is html part
<div ng-controller="AppManagerCtrl" >
<md-list-item ng-repeat="app in apps">
<div>
<div flex="20" layout-padding>
<p>{{app.appId}}</p>
</div>
<div flex="20" layout-padding>
<p>{{app.appName}}</p>
</div>
</md-list-item>
</div>
this the angular service
app.service('AppManagerService',function($http){
this.loadApps = function(){
var request = $http.get('apps');
return request.then(handleSuccess,handleError);
};
this.submitApp = function(){
var request = $http.post('apps',
$('#newAppDetail').serialize(),
{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
);
return request;
};
function handleError(responce){
console.log(responce);
}
function handleSuccess( response ) {
return response.data.value;
}
});
this the angular controller
app.controller('AppManagerCtrl', function($scope,$mdDialog,$mdMedia,AppManagerService) {
function loadApps(){
AppManagerService.loadApps().then(function(apps){
$scope.apps = apps;
console.log($scope.apps);
}
);
}
loadApps();
$scope.submitNewApp = function(){
AppManagerService.submitApp().then(function(responce){
var data = responce.data;
if(data.status == 1){
loadApps();
}
});
};
});
all these are in the html body.from the begin html part then angular service and finally controller.
The result of an ajax call isn't monitored by Angular, which is why your scope isn't updated (it will be on the digest though).
To solve this, you must manually call $scope.apply().
However, if another digest is already in progress, it will throw an error. So it's safer to use the $timeout utility:
function loadApps(){
AppManagerService.loadApps().then(function(apps){
$timeout(function() {
// update your scope variables here. The refresh will occur automatically.
$scope.apps = apps;
console.log($scope.apps);
});
});
}
I am trying to use angular-resource.js file in my demo .I am retrieving
data from json file using $resource and display my data using ng-repeat .But Each item I added one button (info text button).I need to get it infomation using $resource property.I am sending ID on click function .but when I am using $resource property it gives error to me
$scope.getIn=function(id){
// alert(id)
$scope.oneUser = Entry.get({user: id});
console.log($scope.oneUser)
}
here is my code
http://plnkr.co/edit/lB11oQkQjbILK36u8V25?p=preview
If i understand correctly what you are trying to achieve this should solve it:
angular.module('app',['ngResource']).controller('a',function($scope, GetData){
// read data from factory and store it in $scope.posts
GetData.then(
function successCallback(data) {
$scope.posts = data.data;
},
function errorCallback(response) {
console.log(response); // handle any errors
});
// buttonclick to return the values from the selected id
$scope.getIn = function(id){
angular.forEach($scope.posts, function(value) {
if(value.id === id)
{
$scope.selectedValue = value;
}
})
};
console.log($scope.posts)
})
.factory('GetData', function($http){ // use http to read the json
return $http.get('data.json');
});
And the html:
<body ng-app='app' ng-controller='a'>
<div ng-repeat='p in posts'>
<span>{{p.name}}</span>
<button ng-click=getIn(p.id)>info</button>
</div>
{{selectedValue}}
</body>
I have seen some examples of using opencpu together with angular, but no examples of using opencpu in meteor (where angular could be inplemented easily).
Is it as easy as just including ocpu.seturl and jquery.min.js in meteor (as is done here), or does one need to think differently in meteor when using opencpu?
For example, there might be some conflicts between angular and meteor.
I know that is a diffuse question, but I've seen that I'm not the only one who does wonder about it.
Related:
https://groups.google.com/forum/#!topic/opencpu/rEi7lMK65GU
https://www.quora.com/Is-it-possible-to-call-the-R-server-within-a-website-made-with-Meteor-run-some-R-code-then-display-its-output
For example (thanks to http://jsfiddle.net/ramnathv/uatjd/15/):
var myApp = angular.module('myApp', ['angular-meteor']); //added 'angular-meteor'
//set CORS to call "stocks" package on public server
ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R")
myApp.factory('OpenCPU', function($http){
return {
Dist: function(dist){
var url = "http://public.opencpu.org//ocpu/library/stats/R/" + dist +
"/json"
return $http.post(url, {n: 100})
}
}
})
myApp.controller("HistCtrl", function($scope, $http, OpenCPU){
$scope.dist = 'rnorm'
$scope.dists = ['rnorm', 'runif']
$scope.color = 'blue'
$scope.colors = ['blue', 'red', 'darkmagenta']
$scope.breaks = 10
$scope.submit = function(){
var req = $("#plotdiv").rplot("hist", {
x : $scope.data,
col: $scope.color,
breaks: Math.floor($scope.breaks),
main: $scope.main
});
}
$scope.$watchCollection('[main, color, breaks, data]', function(x){
$scope.submit()
})
$scope.$watch('dist', function(newDist){
OpenCPU.Dist(newDist).success(function(result){
$scope.data = result
})
})
})
Would the above be a "correct" starting point? How should one declare dependencies in meteor (i.e. opencpu, jquery.min.js) ? New to meteor so any suggestions are highly appreciated!
Not using angular (not sure why one would need that), but here is a super basic setup in meteor:
HTML:
<head>
<title>opencpu</title>
<script src="//cdn.opencpu.org/opencpu-0.4.js"></script>
</head>
<body>
<h1>Testing OpenCPU</h1>
{{> hello}}
</body>
<template name="hello">
</template>
JS:
if (Meteor.isClient) {
Template.hello.onRendered(function() {
// ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R");
// couldn't come up with a good example for this
ocpu.seturl("//public.opencpu.org/ocpu/library/stats/R")
// this gives me a CORS error but the below still seems to work
console.log(ocpu);
var req1 = ocpu.call("rnorm", {n: 100}, function(session1){
var req2 = ocpu.call("var", {x : session1}, function(session2){
session2.getObject(function(data){
alert("Variance equals: " + data);
});
});
});
});
}
All I know about opencpu I've learned in the last 30 minutes -- little! So I don't know how to get past the CORS error. That error doesn't seem to happen when pointing at the graphics package, but for that one I couldn't think of a good example.