I have the following Angular and HTML code:
<script type="text/javascript">
var application = angular.module('Application', []);
application.service('ImageService', function ($http) {
return {
GetList: function () {
return $http.get('api/images');
},
}
});
application.controller('ImageController', function ImageController($scope, ImageService) {
ImageService.GetList()
.success(function (data, status, headers, config) {
$scope.images = data;
})
.error(function (data, status, headers, config) { });
});
</script>
<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
<div data-ng-repeat='image in images' class="image">
<img src="{{image.Url}}" alt="" />
</div>
</div>
The API call is returning the following:
[
{"Key":"89207","Url":"http://somedomain.com/image89207.jpg"},
{"Key":"12321","Url":"http://somedomain.com/image12321.jpg"},
{"Key":"23434","Url":"http://somedomain.com/image23434.jpg"}
]
I would like to load the next page when the user scrolls down to the end of the page or when it clicks a button saying "Show More".
I also need to return on my JSON the NextPage value ...
The point is that if current page is "233" then next page might be "4545".
I think the API might need to return the next page value and a list of images.
How can I do this?
I agree with pankajparkar. You should handle 'show more' button, load more images and join it with $scope.images. ng-repeat will do remaining work. Here is code sample
<script type="text/javascript">
var application = angular.module('Application', []);
application.service('ImageService', function($http) {
return {
GetList: function(page) {
return $http.get('api/images', {
params: {
page: page
}
});
},
}
});
application.controller('ImageController', function ImageController($scope, ImageService) {
var page = 0;
$scope.images = [];
var load = function() {
ImageService.GetList(page)
.success(function(data, status, headers, config) {
$scope.images = $scope.images.concat(data);
})
.error(function(data, status, headers, config) {});
};
load();
$scope.loadMore = function() {
page++;
load();
}
});
</script>
<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
<div data-ng-repeat='image in images' class="image">
<img src="{{image.Url}}" alt="" />
</div>
<div>
<button ng-click="loadMore()">load more</button>
</div>
</div>
Related
I've subscribed in my controller on socket event.
When some event has come, i need to get some data from server (i try to call lb.get() as a function into some factory).
$scope.counter = 0;
$scope.$on('lEvent', function (event, response) { // socket event
$scope.counter ++;
console.log('counter '+$scope.counter);
lb.get(response[0]).then(function(response){
var Item = {
id: response.id,
mime: response.mime,
name: response.name,
};
$scope.items.push(Item);
console.log("$scope.items"+$scope.items.length);
});
});
// here is a function in my factory
get: function(id) {
deferred = $q.defer();
$http({
method: "post",
url: url,
data: $.param({id: id}),
headers: header
})
.success(function (data) {
deferred.resolve(data);
})
.error(function (data) {
deferred.reject(data);
});
return deferred.promise;
}
Imagine, i've got 5 socket events, but function lb.get() has called a 4 (or 3) times instead of 5. You can see the result of calling in console:
As you can see, the function lb.get() was called 4 times instead of 5.
I think, i need something like a request queue.
You don't have handle for the error response method get. Maybe in this case, your response is disappear.
You don't need a request queue.
See example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleOneController', function($scope, ServiceExample) {
$scope.counter = 0;
$scope.successCounter = 0;
$scope.errorCounter = 0;
$scope.$on('raise.event', function(event, value) {
console.log('counter', $scope.counter);
$scope.counter++;
ServiceExample.get(value).then(function() {
console.log('success response:', $scope.successCounter);
$scope.successCounter++;
}).catch(function() {
console.log('error response:', $scope.errorCounter);
$scope.errorCounter++;
});
});
})
.controller('ExampleTwoController', function($scope) {
$scope.raiseValue = "www.google.com"
$scope.raise = function(val) {
$scope.$emit('raise.event', val);
};
})
.service('ServiceExample', function($http) {
return {
get: function(url) {
return $http({
method: "GET",
url: url
});
}
}
});
.errors {
color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ExampleApp">
<div ng-controller="ExampleOneController">
<h3>
ExampleOneController
</h3>
<form name="ExampleForm" id="ExampleForm">
<pre>counter : {{counter}}</pre>
<pre>successCounter: {{successCounter}}</pre>
<pre class="errors">errorCounter: {{errorCounter}}</pre>
</form>
<div ng-controller="ExampleTwoController">
<h3>
ExampleTwoController
</h3>
<form name="ExampleForm" id="ExampleForm">
<input ng-model="raiseValue">
<br>
<button ng-click="raise(raiseValue)" simple>
Send request to "{{raiseValue}}"
</button>
</form>
</div>
</div>
</body>
I'm trying to write down a Controller that pass a var to a Factory in Angularjs.. The following code return (in console) the values, but I'm not been able to load that into my html page.
Just to record, yes, I'm starting in angularjs.
app.js
var myApp = angular.module('myApp',[]);
myApp.factory('eventData', function ($http, $q) {
delete $http.defaults.headers.common['X-Requested-With'];
return {
getEvent: function (id) {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'page' + id
}).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
};
});
myApp.controller('AngularJSCtrl',
function FeederController($scope, eventData) {
$scope.data = [];
for (var i = 0; i < 10; i++) {
eventData.getEvent(i).then(
function (data) {
$scope.data = data;
console.log($scope.data);
},
function (statusCode) {
console.log(statusCode)
});
}
}
);
page.html
<div ng-controller="AngularJSCtrl">
<div ng-repeat="patient in patients">
<businesscard>{{patient.name}}</businesscard>
</div>
</div>
Problem solved. I've searched for a while until get this right.
Thanks for #Claies and Brad Barrow for the tips :)
app.js
var myApp = angular.module('myApp',[]);
myApp.factory('patientsData', function ($http) {
delete $http.defaults.headers.common['X-Requested-With'];
return {
getPatients: function () {
return $http({
url: 'http://localhost/ucamradio/php/tst.php?campusId=1',
method: 'GET'
})
}
}
});
myApp.controller('AngularJSCtrl', function($scope, patientsData){
$scope.patients = [];
var handleSuccess = function(data, status) {
//$scope.patients = data;
$scope.patients.push(data);
console.log($scope.patients);
};
patientsData.getPatients().success(handleSuccess);
});
page.html
<div ng-controller="AngularJSCtrl">
<div ng-repeat="patient in patients">
<businesscard>{{patient.name}}</businesscard>
</div>
<!--
<div ng-repeat="patient in patients ">
<businesscard>{{patient.id}}</businesscard>
</div> -->
</div>
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.
I have the following Angular and HTML code to display a list of images and allow voting:
<script type="text/javascript">
var application = angular.module('Application', []);
application.service('ImageService', function ($http) {
return {
GetList: function (page) {
return $http.get('api/images', { params: { page: page } });
},
Vote: function (image) {
return $http.post('api/images/{key}/vote', { key: image.Key });
}
}
});
application.controller('ImageController', function ImageController($scope, ImageService) {
var page = 0;
$scope.images = [];
ImageService.GetList(page)
.success(function (data, status, headers, config) {
$scope.images = $scope.images.concat(data);
})
.error(function (data, status, headers, config) { });
$scope.vote = function (image) {
ImageService.Vote(image)
.success(function (data, status, headers, config) { })
.error(function (data, status, headers, config) { });
};
});
</script>
<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
<div data-ng-repeat='image in images' class="image">
<img src="{{image.Url}}" alt="" />
<i class="icon-heart"></i>
<span>{{image.Votes}}</span>
</div>
</div>
Each image has an unique id, image.Id.
How can I disallow a user to vote the same image twice?
Use ng-hide to hide link if hasVoted is true.
<div class="gallery">
<div data-ng-repeat='image in images' class="image">
<img src="{{image.Url}}" alt="" />
<i class="icon-heart"></i>
<span>{{image.Votes}}</span>
</div>
</div>
Then modify controller to set voted to true. If it fails we will set it back to false. The reason to do it is to prevent multiple clicks on the button until we receive success back from the server:
$scope.vote = function (image) {
image.hasVoted = true;
ImageService.Vote(image)
.success(function (data, status, headers, config) { })
.error(function (data, status, headers, config) { image.hasVoted = false; });
};
The simplest tweak on the client side would be something like this:
$scope.vote = function (image) {
if (!image.voted) {
ImageService.Vote(image)
.success(function (data, status, headers, config) { image.voted = true })
.error(function (data, status, headers, config) { });
}
};
Simply flag the image as voted.
I have the following code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript">
var application = angular.module('Application');
application.controller('ImageController', function ImageController($scope, $http) {
$scope.result = "Start here ...";
$http.get('api/images').
success(function (data, status, headers, config) {
$scope.images = data;
$scope.result = "Everything is ok";
}).
error(function (data, status, headers, config) {
$scope.result = "Something went wrong";
});
});
</script>
<div ng-app="Application" ng-controller="ImageControler">
<p>{{result}}</p>
<div ng-repeat='image in images'>
<span>{{image.votes}}</span>
</div>
</div>
What I get on the rendered HTML page is {{result}} and {{image.votes}} like Angular was not working ... I also checked the API and it is not called ...
What am I missing?
You have spelling mistake in <div ng-app="Application" ng-controller="ImageControler">
Controller with 2 L's