I am working on a webapp built upon angularjs.So,i have a search result UI built which upon search displays result in grid.Now,when user clicks on each row of the result ,an external webpage should be called with values of columns passed from that clicked grid row to the external webpage.
How can i do this,can i have a sample controller to refer upon.
Please help with this
Thanks,
Alex
If I understand you correctly, you want to send an AJAX call to some JSON api when a user clicks on some element. Here's a basic thing of how to do that in an angularjs controller:
angular.module("your.app")
.controller("ajaxingCtrl",["$http","$scope", function($http, $scope){
$scope.onSomeUserAction = function(argument){
//substitute the type of request your api requires
$http.get("http://your.remote.api/some/resource",
{
//params will get parsed into HTTP query parameters
params: {
x:arguments.x
}
}
).then(function(result){
console.log(result);// and then do what you will with the result
})
}
}])
You can find more information about doing ajax calls in angular's $http service docs.
Related
I am creating my data API using the Laravel Resource. And testing the methods in Postman. Now when I am trying to fetch data from database and show them, it is working fine both in Postman and Browser.
But when I am trying the delete method, using postman, providing the URL as per I defined in my routes and selecting the method delete, it returns me:
"419 Page Expired"
Here is my route for delete:
Route::delete('feed/api/{id}', 'FeedController#destroy');
Here is the function in controller:
public function destroy($id)
{
$feed = Feeds::findOrFail($id);
if ($feed->delete()) {
return new FeedResource($feed);
}
}
Note: If I use the route in my api.php file instead of web.php, it works. But I don't want to keep that in api.php. Because the routes in api.php don't work if middleware checked.
For api you must exclude routes from csrf check for apis in VerifyCsrfToken.php
working on the sample meanjs application. I am not able to understand the below code snippet.
Kindly explain the use of this script in layout.server.view.html view.
<!--Embedding The User Object-->
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
Basically user is being sent via express/swig everytime a request is made to the route /* (see here) so that user data can be used by AngularJS.
If you check the file core.server.controller.js (here), you will see that MEAN.JS passes a user object in the response in this code block:
res.render('modules/core/server/views/index', {
user: safeUserObject
});
Then in the code block you mentioned, you're assigning user object sent by express/swig to the variable user which can then be accessed later using $window.user similarly to what is done here.
json and safe are two swig filters. The first one returns a string representation of a JavaScript object and the second one forces the input to not be auto-escaped.
I am developing a mobile application using Ionic framework. I get a JSON file containing the template and it's controller. The server will push data once there's data in JSON format. The problem is adding the states dynamically, and I have read that it's only possible at the config time.
Please tell me if there's a way to do this through a controller which will only be responsible of receiving and setting the new state and that will also receive the JSON and from it create the new state.
The help is highly appreciated!
Edit
I have found ui-router-extras (http://christopherthielen.github.io/ui-router-extras/#/future), but I don't know how to make it work for my application.
Suppose a controller gets the JSON using $http where the JSON looks like:
{
'name':'preview',
'template':'<h1>Hello</h2>'
}
How to add this state in this controller?
There are some simliar Q & A:
AngularJS - UI-router - How to configure dynamic views - this answer
Start Angular.js route-segment or ui-router after all translations are loaded
Angular - Dynamically Choose Starting State
Which shows, that UI-Router is shipped with a great feature:
$urlRouterProvider.deferIntercept(defer)
Disables (or enables) deferring location change interception.
If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.
There are some working plunkers here or here,
showing that in .config() phase we will stop url router:
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// States, which we know about from beginning
// could be declared "statically"
$stateProvider
...
// here we say STOP
$urlRouterProvider.deferIntercept();
}
])
Later, in .run() phase, we will 1) configure states via $http 2) enable url routing
.run(['$urlRouter', '$timeout', '$state',
function($urlRouter, $timeout, $state) {
$http
.get("modules.json")
.success(function(data) {
// here we can use some JSON to configure $stateProvider
// in example we can use $timeout to simulate that
$timeout(function(){
// here we turn all on again...
$urlRouter.sync();
$urlRouter.listen();
// there could be some decision, driven by $http load
// we just use some state as default target
$state.go("parent.child");
}, 1000)
...
Check it in action here or there
My website is a posting site with posts from different countries. On homepage load i will make a service call and get all the posts using a controller($http) and will be displayed on the homepage.
In the homePage two dropdown and a button are given from which user can choose or filter the posts by country and theme, and results will be in different page.
I want to use the same controller response data without making a new service call to filter the response and show the results.
Please help me on how can i use the same controller or do i need to use a factory and then make the factory as a dependent to my controller??
The best way to do that is to do with a Service. Service is a Singleton, which means that construction will happen only once. In Service constructor you will load posts, and the from any controller you can access your data.
angular.module('myApp').service('myPostService', function($http) {
var Service = {
postList: []
};
// Here load over $http service your posts and then put it into Service.postList.
return Service;
});
Then inject the service and use the posts
angular.module('myApp').controller('HomeCtrl', function(myPostService) {
$scope.postList = Service.postList;
});
And in HTML iterate over it, filter and do whatever you want.
I am attempting to work out what is needed to publish a custom open graph action that includes user generated photos. I have made it through the approval process and am currently testing using the JSSDK. I have the following code which seems to work:
FB.api('/me/cheezburger-app:create', 'post', {
meme:'http://cheezburger.com/6459677184'
}, function(response){
console.log(response);
});
My understanding is, to publish this as user generated photo all I need to do is include an image property containing an array of objects like this:
FB.api('/me/cheezburger-app:create', 'post', {
meme:'http://cheezburger.com/6509097984',
image:[{user_generated:true, url:'https://i.chzbgr.com/completestore/12/8/13/c9Smb0ba2EGTLepkCgEp2g2.jpg'}]
}, function(response){
console.log(response);
});
Sadly, this returns the following error:
{"error":{"message":"(#3503) \"[{\"user_generated\":true,\"url\":\"https://i.chzbgr.com/completestore/12/8/13/c9Smb0ba2EGTLepkCgEp2g2.jpg\"}]\" is an invalid value for property \"image:url\" with type \"URL\"","type":"OAuthException","code":3503}}
I was able to successfully get the action to publish using the graph api explorer, but it is not using a javascript object and jquery. I assume I am doing something wrong with the way I am passing the extra parameter. But I just can't figure out what.
I haven’t tried this yet, but my guess (since it’s not clearly described in the docs) would be that you have to give a string value containing JSON-encoded data like in other similar cases.
image: '[{"user_generated":"true","url":"https:\/\/i.chzbgr.com\/completestore\/12\/8\/13\/c9Smb0ba2EGTLepkCgEp2g2.jpg"}]'