I have almost completed the app, it makes a get request, phrases json and shows it in a table, the thing is when i run in emulator it shows everything at once, and it shows the {{variable}} without substituting, any idea what might be wrong? i have added the screen shot so that you can get what my problem looks like
THIS IS HOW IT SHOWS ON ionic serve --lab command
You probably have an error when fecthing your data from your server, what do you see in console when using remote debugging?
What does the --livereload do? when i use the --livereload, it shows proper ui on emulator(which it wasât showing previously), but the data isnât shown on the buttons, i suspect it has something to do with the Cross domain request issue ? When i emulate suing the --livereload switch can see from the server which has the json source that it gets the requests and sends the response to the emulator, but the emulator shows blank tabs (see image)
As written in red, you must define a CSP in your index.html
error No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
I looked it up online, I found i needed to edit the config.xml file, i couldnât find out what meta tags to add in the html, my config.xml looks like this, but still boxes are empty. Can you tell me exactly which meta tag to include in the index.htmlAlso tell me if anything is wrong in the config.xml.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.attrack511840" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<access origin="*"/>
<access origin="*"/>
<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
<allow-navigation href="http://attrack.in/api/*"/>
<name>attrack</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"/>
<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"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>3 times? one is enough.
What to include in your CSP tag in index.html depends on what your application needs, you can get some examples in the whiltelist plugin doc and of course in this forum.
My application just makes one http request to the url http://attrack.in/api/* where * keeps changing.Suggest me the tags fir index.html based on the above stated facts.
Also i had already visited the page https://github.com/apache/cordova-plugin-whitelist#content-security-policy and added the relevant tags in my html, still i get the same error.
i added these two:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' attrack.in">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">@gmarziou this is the last link of completing the app, app shows proper ui only when emulated with the --livereload option, what does --livereload actually do? and i canât seem to fix the problem even after adding meta tags and editing the config.xml file, help 
As far as I know you can have only one CSP tag.
Your first one contradicts second one, remove the first one.
livereload option is well explained in Ionic docs, donât use it for real device testing just use âionic run androidâ without any options.
So to debug your problem, just run âionic run androidâ and use Chrome remote debugging or run âionic run iosâ and use Safari remote debugging.
Your config.xml is not ready for publication, it contains default text refering to ionic or cordova.
<allow-navigation href="http://attrack.in/api/*"/> is useless as you donât navigate to pages hosted on attrack.in, youâre only using a web API, read the doc
I removed the first CSP tag.
Edited the config.xml and removed the default text to my custom one.
removed the
when i run the ionic emulate -l -s -c , i get the app with proper ui, the search box is visible , when i hit the search button it still returns empty tables, i have a deadline and i canât seem to get the app to work on the emulator while it works in the browser. 
what could be the problem? i canât see any yellow and red warnings like the last time.
Since the apps makes one get request , i have added an alert() in the .success block, so that it pops up a message when the get request is successful, in browser it does only when the chrome CORS is enabled. The app is behaving exactly like the browser does when the CORS plugin is in OFF state.
The chrome inspection of the emulator session gave me these errors:
XMLHttpRequest cannot load http://attrack.in/api/Aman%20Aryan. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.56.1:8100' is therefore not allowed access.
Refused to load the script 'http://192.168.56.1:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
Long story short: app is still having trouble making the get request.
This is a CORS issue if im not mistaken. See if this links helps out http://blog.ionic.io/handling-cors-issues-in-ionic/
Thnaks Everyone for the help, the issue was solved by adding
res.header("Access-Control-Allow-Origin", "*");
to my server side express js code.
BUT, I have run into a new problem now, the emulators work fine , but when i generate an apk/ run on a real device i get this error in chrome inspect :
uncaught Error: [$injector:modulerr] Failed to instantiate module App due to:
Error: [$injector:nomod] Module 'App' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Before this error i get error FAILED TO LOAD APP.js , ANY one has any idea why so?
It works as desired in emulator.On real device it creates problem
There is an error in your app.js file or you are missing a dependancy registration causing your app to fail. Take into consideration that your browser sometimes will be more forgiving of Javascript errors than your emulator or device will be with a broken apk. In essence before you build ensure all your code is commit ready.