Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Parse REST factory variables

I am using an angular factory to perform CRUD on my classes on Parse.com. I have a total of 4 classes and need to perform create, get, put, delete on all 4. Although the URL is different for each one everything else remains the same. Can I pass variables to the factory to change the class name in the api URL?

Here is an example of one factory.

.factory('Programme',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
    return {
        getAll:function(){
            return $http.get('https://api.parse.com/1/classes/Programme',{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION
                }
            });
        },
        get:function(id){
            return $http.get('https://api.parse.com/1/classes/Programme/'+id,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION
                }
            });
        },
        create:function(data){
            return $http.post('https://api.parse.com/1/classes/Programme',data,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        },
        edit:function(id,data){
            return $http.put('https://api.parse.com/1/classes/Programme/'+id,data,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        },
        delete:function(id){
            return $http.delete('https://api.parse.com/1/classes/Programme/'+id,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        }
    }
}])

Obviously this x4 is a mess.

So I need to change the URL from /Programmes to /Users /Prescription

I am calling this like from my controller like this:

Programme.edit($localStorage.programme.id, {exerciseData:exercises}).success(function(data){
});

Secondly how am I able to tag the error handler onto this controller function as per the Javascript SDK?

like image 775
Taylorsuk Avatar asked Apr 17 '15 18:04

Taylorsuk


2 Answers

1) Use an interceptor to clean up your url code: Put the following in your app.js

$httpProvider.interceptors.push(function ($q) {
  return {
    request: function(config) {
      if (config.url.split('/')[0] === 'api'){
        config.url = 'http://yourserverurl:3000/' + config.url.replace('api/', '');
      }
      return config || $q.when(config);
    }
  };
});

2) In your url requests, you can now modify them with a simple call to api/class, and you can provide the classname as a parameter to reuse the same function. Example:

create:function(classname, data){
        return $http.post('api/' + classname, data, {
            headers:{
                'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                'Content-Type':'application/json'
            }
        });
    },

3) For error handling on a promise, just use .error( errFunc ) Example:

Programme.edit($localStorage.programme.id, { exerciseData:exercises }).success(function(data){
}).error(function(response){ ... };

p.s For 1 and 2, make sure you add $httpProvider to your .config in app.js

like image 124
Olivercodes Avatar answered Oct 16 '22 19:10

Olivercodes


Is this what you mean?

.factory('Programme',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
var baseUrl = 'https://api.parse.com/1/classes/';
return {
    provider:function(type) {
        return {
            getAll:function(){
                return $http.get(getUrl(type),getParams());
            },
            get:function(id){
                return $http.get(getUrl(type)+id,getParams());
            },
            create:function(data){
                return $http.post(getUrl(type),data,getParams());
            },
            edit:function(id,data){
                return $http.put(getUrl(type)+id,data,getParams());
            },
            delete:function(id){
                return $http.delete(getUrl(type)+id,getParams());
            }
        }
        function getUrl(type) {
            return baseUrl+type;
        }

        function getParams() {
            return {
                    headers:{
                        'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                        'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                        'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                        'Content-Type':'application/json'
                 }      
            }    
        }

    }
 }
}])

You can then call it like this:

Programme.provider('Prescription/').edit($localStorage.programme.id, {exerciseData:exercises}).success(function(data){
}).error(function(response){ ... };
like image 36
Gabriel Kohen Avatar answered Oct 16 '22 17:10

Gabriel Kohen