Consuming restful symfony2 with angularJs Client - angularjs

I want create an application using symfony2 in server side and angularJs in client side.
I create a restful api with friendsofsymfony but I still doesn't know how can I consume the Json data generated by the api with angular. I found in some tutorials that I can split the two part of the project and so I should now create a simple HTML project with AngularJS. But I still have no idea how can I do this!
Can someone help me please with some instructions or examples?

It's not so difficult. Two files backend and frontend.
Backend: you should install symfony, setup it, create controller.
In controller setup route with request method(for youe wish get, post, put delete).
Frontend: (if you know little bit angularjs) create main mod, create controller and by $http send request to your symfomy's controller and get your data.
P.s. And don't forget read about serializer. It's so much important!!!
More detail you can read here.

Related

(Access-Control-Allow-Origin - CORS issue when fetching data from 2 URL for promises

So I have promises in AngularJS which fetch data from 2 URLs.
promises.push(loadingJson('example.com/1.json'));
promises.push(loadingJson('example.com/2.json'));
$q.all(promises).then(function(resultList){
}, function(errList){
});
After running the page (using Promises) in web server, it gives error "Origin 'www.abc' not allowed by Access-Control-Allow-Origin." and "XMLHttpRequest cannot load '1.json' and '2.json' due to access control checks".
For Jquery GET method I can use JSONP to solve the error.
But is there a way that can solve it in angularJS promises?
AngularJS is client sided. You can solve your problem server sided here and leave your AngularJS code untouched. You can use cors.
It depends on your web server. For example if you are using express try this package
https://www.npmjs.com/package/cors
and then set it correctly and it will work. (Perhaps you are trying to run server and client on the same host? it is quite a common scenario)

Why same API used in WebApp takes way more time than Normal Rest Client or browser (GET Request)?

I am so much confused after looking at response time of Same API Used in WebApp (Written in AngularJS) takes way more time (~15s) then normal rest client like postman (~4s).
Here's the api:
http://api.airpollution.online/all/public/devices
It's getting used in open airpollution project (under IndiaOpenData Association) webapp :
http://openenvironment.indiaopendata.com
WebApp is using AngularJS's $http to make http call to server.
Can anyone please help me with this?
Thanks in advance.

angular js how to gat data from using $http

in angular js how to gat data from data base using $HTTP
how to solution my problem give me dital and program dital spat by spat examination and program
You cannot get data from database using $http. You have to make web services in php, django,node etc then you have to call web service using $http.post or $http.get based on method which is created by you.
Web service frameworks are...
http://www.slimframework.com/
http://www.django-rest-framework.org/
using $http service, you can only make http request to http server.In this service you can only mention the path/url of file or api(in case of REST API) from where you have to make ajax call.You can't use sql query from remote database.If you want to get data from database using $http then you can call an API which resides in server.That API will take your request and pass it to Stored procedures(PL/SQL) and stored procedures interact with database with SQL queries to get desired data and provide to API and then API make response with data to you which you can get in success callback.

Appending Param to AngularJS REST Queries

I'm using AngularJS with UI-Router and am attempting to attach a query parameter to a url on all http requests across my site.
I have an OAuth system on the backend and was previously applying Authorization headers to all requests, however to preserve backwards compatibility - have discovered I will have to instead apply a url parameter with the user identification to the backend.
My issue is that, I cannot use $httpInterceptor in the config portion of the app, because at that point in the app I don't have the current User, and can't inject $http to resolve the current user because that creates a circular dependency.
I was trying to use $http.defaults.transformRequest in the run portion of the app, but that didn't seem to be able to append a parameter to the url.
Is there a way to do this short of hand writing it on every REST request across the app?
I had similar problem in my current project.
To solve the problem I manually request current user info before app bootstapping & store it in localStorage.
Then bootstrap the app & in the config section you will have accesss to current user info.
TIP: to get user info before app bootstrap you can still use $http service by manually injecting it:
angular.injector(['ng']).get('$http');

How to secure Resource or controller route in Laravel and Backbone

I am integrating laravel and backbone. I have routes like
Route::resource('tasks', 'TaskController'); and backbone model uses this route for get, post and put requests. and this route simply displays raw data. I want to hide/secure this link/url so that users can't see raw data.How can I achieve this??
Short answer : you can't.
If your Backbone application can access to something, a user can access to. For your server, backbone requests are exactly like a user requests. In fact, the browser make this requests for both.
You could put a password in your Backbone code to protect the access... but it's useless because the Backbone code is public (it is client side).
The only thing you can do is to put restrictions on what Backbone (or a user) can see. For example, authenticate the user and verify that he is allowed to access data before to send it.
If your Backbone app can access data there is no reason to hide them to your users. It's like if you want to hide the raw html code in a web site, that's senseless !

Resources