This is my very quick start guide to ionic development, it contains my notes to quickly became up to speed with an app ready to start coding and basic ionic commands and issues for reference.
Install Android development Environment:
Install ionic & cordova:
npm install ionic -gnpm install cordova -g
Create Ionic Project and set platform:
-
ionic start ${appName} ${ionic_template}- ionic templates: blank, tabs or sidemenu
-
cordova platform add android
Useful command to check connected devices, in my current environment some times the device is not recognized: adb devices - it should show a device id if your device is connected via USB with your development machine. If the device id does not show the aforementioned ionic command (ie - ionic run) will not work properly.
Usefull ionic commands:
run in browser: ionic serve run in device: ionic run android -lc -i ${ionic_server_port}
When running your app in device for development if you find the error message: "There was a network error ${address}"
- Make sure the server and port you're running hte ionic command is accessible from the device, common mistakes are that you're not
- connected in the same internal network or the ip where you're running the dev. environment hence the ip of your development
- machine not accessible in some cases can also be due to a firewall, so check the connectivity from device to your development environment.
- Make sure you have installed the cordova whitelist plugin. In more recent versions it's required or you won't be able to
- access the server.
cordova plugin add cordova-plugin-whitelist --save
When running on device use chrome inspector:
in google chrome address bar type: chrome://inspect
you'll see the connected device link.
Install cordova plugins:
cordova plugin add cordova-plugin-filecordova plugin add cordova-plugin-file-transfer
In order to use sql lite storage (not html 5 local storage) install the following plugins:
- cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
- Add the $cordovaSQLite reference to Controller.
Nice reference on how to use it.
Official reference on ngCordova site.
Note: If storing images to file system and trying to reference it during development when running the app with livereload it will give an error about permission to load the image and the image will not show. The error shows in browser when using chrome://inspect: with the message 'Not allowed to load local resource...
file:///data ...' This is due to the fact that running livereload will actually point to the filesystem on your computer and not in the device. So in this case run the application without livereload i.e -ionic run androidand it should then work properly.
If you have problems runing the app in the device check for connected devices using adb adb devices if your connected device is not on the list it will not work, then try to toggle development mode on and off on the device and check until device shows on the list or ionic run will not deploy the app to your device.