Rest services using $resource do not work on emulators

ionic-v1
1

Hi, I finally reached the final steps of my app (11bc2ed5), everything works great on browser view but when I made a build the app do not show any resources hat should be retrieved by the ngResource.

A quick look to my resources.js:

angular.module(‘starter.services’, [])

.factory('Resources', ['$resource',
    function($resource){
      return {
              Produits: $resource('http://example.com/getproduits/',{}, {
                          'query': { method:'GET', isArray:true, responseType:'json' }
                        }),
              Recettes: $resource('http:/example.com/getrecette/v100/',{}, {
                          'query': { method:'GET', isArray:true, responseType:'json' }

                        }),
              Recette:  $resource('http://example.com/getrecette/v100/:id',{id: '@id'}, {
                          'get': { method:'GET', isArray:false, responseType:'json' }
                        })
            }
      
    }]
  )

My model (app.js)

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngResource'])

The scripts from index.html:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-resource.min.js"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

The Ionic.project:

    {
  "name": "CeliaLib",
  "app_id": "11bc2ed5",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

And the Package.json:

   {
  "name": "CeliaLib",
  "version": "1.0.0",
  "description": "CeliaLibrary: An application that help people with celiac disease to in knowing whether a specific product is authorised for consuming or not. The Application has a library of special recipes for people with celiac disease.",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^1.3.3",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "com.ionic.keyboard"
  ],
  "cordovaPlatforms": [
    "android"
  ]
}

I think it might be dependeny problem with the angular-resource but I can’t figure-out.Can anyone help me please.

2

What do you see in console?
If you haven’t done it yet, I recommend that you debug your app on real device connected via USB and using Chrome remote debugging.
You might have a problem of CORS error when accessing your server, search the forum it’s very common.

Regarding your REST resources, your URLs are not very REST:

  • don’t put ‘get’ in the URL as it should represent a resource on which you can use GET, POST, DELETE, …
  • be consistent either you use always plural or you don’t (produits versus recette)

You could rewrite them as this (I don’t know what means v100):

http://example.com/produits/
http://example.com/recettes/
http://example.com/recettes/:id

Create a service per resource don’t group several ones in one service.
For instance, you could write a Recette service defined this way:

.factory('Recette', function ($resource) {
    return $resource('http://example.com/recettes/:id', {}, {
        'query': { method: 'GET', isArray: true},
        'get': {
            method: 'GET',
            transformResponse: function (data) {
                data = angular.fromJson(data);
                // do something with your data
                return data;
            }
        },
        'update': { method:'PUT' }
    });
});
2 Likes
3

Thank you gmarziou,
I edited my resources now I have this:

angular.module('starter.services', [])

.factory('Recette', function($resource){
      return $resource('http://example.com/recettes/:id',{id: '@id'}, {
                          'query': { method:'GET', isArray:true, responseType:'json' },
                           'get': { method:'GET', isArray:false, responseType:'json' }
                        });
    })

.factory('Produit', function($resource){
      return $resource('http://example.com/celialib/web/produits/',{}, {
                          'query': { method:'GET', isArray:true, responseType:'json'}
        });
    });

Sadly, I use S3 (android 4.1) which doesn’t support the remote debugging.
Concerning the CORS, I am using a real website with subfolder that has an htaccess configuration which allows Access-Control-Allow-Origin

<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This configuration work’s with browser testing.

4

I so you have deployed a Cordova Whitelist plugin.

Have you used a correct HEADER meta tag?

Default one is this one:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Unfortunately, I found it’s not working in every case, so I modified it to look like this:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Next question, it may sound stupid, but is your smartphone even connected to the internet?

And did you used appropriate permissions in AndroindManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

You don’t need to believe me but it funny how many people forget to do just that.

2 Likes
5

If you can try to root it and upgrade it, it would really help.

1 Like
6

Sorry, but You need to go really slowly with me hh.
I have deployed the whitelist by following this tutorial:
There is no notation about header meta tag so I just added it right now.

This is my config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.celialib382105" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>CeliaLib</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <allow-navigation href="*" />
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

The permissions seem to be fine, but during the build operation it outputs this notation:“some input files use or override a deprecated API”
Thank you a lot! it seems that I left a lot of tasks.

Hi gmarziou, unfortunately, it can’t be upgraded furthermore. is it possible to run the tests on emulated devices?

Update
The build works on 4.4.4 (api19) emulators but not on previous ones like the api17

I can upload the files for you. If you want to take look at the source.

7

Have you installed older Android runtimes using Android SDK Manager?

1 Like
8

Do you mean the Android Support library/Repository ?

9

http://developer.android.com/tools/help/sdk-manager.html

10

image
3.jpg700×357 113 KB

I will download all of the previous SDK Platforms.Thank’s again!

1 Like
11

No problem m8, you only need to ask if you need more help :smile:

1 Like
12

I download all of the SDK platforms, unfortunately, the app is still not retrieving the services.
would you mind if you take a look at my source code for testing? You will do a great favor for me.

13

Can you create a GitHub repository of this code?

14

Right away.


Many thanks

15

I have the same problem running from the android emulator could you solve it?