I had a good experience on Cordova and PhoneGap when I decided to test on a real project the Ionic Framework. At the raising of Ionic 1, I’ve already tested this framework but was disappointed by performance issues. Now, I have to migrate from Angular 1 to Angular 2/4 (means rebuild my whole code), and regarding new Ionic versions announcements and others reasons why Ionic 2 is better than Ionic 1, it’s a good moment to re-evaluate the framework.
An all new rendering pipeline shared with Ionic components reduces layout thrashing and repaints, historically a challenging source of perf issues for web developers.
Ionic apps benefiting from a significantly faster Angular 2, giving them an “inherent performance improvement out of the box.”
$ npm install cordova ionic typescript -g ... $ npm ls -g cordova ionic npm typescript --depth 0 /usr/local/lib ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com └── firstname.lastname@example.org
Starting a project with Ionic CLI
The best way to start a new project, for learning or real work, is using a starter. Ionic provides some useful, you can list using ionic cli:
ionic start --list.
We’ll start with the
sidemenu starter. The launch could spend a long time because
ionic start installs all npm dependencies. If you prefer you can skip dependencies install using
$ ionic start hello-world sidemenu
ionic startcreates the app.
hello-worldis the name we gave it.
sidemenutells the Ionic CLI you want to start with the sidemenu template.
You should see something similar to the following output:
$ ionic start hello-world sidemenu ✔ Creating directory ./hello-world- done! [INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz) ✔ Downloading - done! [INFO] Fetching starter template sidemenu (https://github.com/ionic-team/ionic2-starter-sidemenu/archive/master.tar.gz) ✔ Downloading - done! ✔ Updating package.json with app details - done! ✔ Creating configuration file ionic.config.json - done! [INFO] Installing dependencies may take several minutes! ✔ npm install - done! ✔ git init - done! ✔ git add -A - done! ✔ git commit -m "Initial commit" --no-gpg-sign - done! ♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫ Run your app in the browser (great for initial development): ionic serve Run on a device or simulator: ionic cordova run ios Test and share your app on a device with the Ionic View app: http://view.ionic.io Next Steps: Go to your newly created project: cd ./hello-world $
Now, test it on your browser with ionic serve, try the
--lab option to see multiple platforms at once.
$ cd ./hello-world $ ionic serve --lab
You can also choose to download starter provided and rated by the community on market.ionic.io.
Run app on device
At this stage you can already test your App on device. You have two solutions:
- the easiest is using the Ionic View App. You should link your App to Ionic Cloud and download the Ionic View on your device. It works like a nutshell, Ionic View will load your resources, content of www directory, and run it on a native environment.
- you also can plug your device on your computer, via usb and through ionic-cli run
ionic cordova run android --device. In order to work you should have installed on your computer the environment Android and/or iOS. Check Deploying to a Device for more details
Ionic view app
Ionic View App is part of Ionic Cloud Services, to use it you’ll need an Ionic account. Signup for free.
In your project directory, run
ionic link, the prompt should authenticate you and suggest to create a new App on Ionic Cloud Services to link with the current directory.
$ ionic link ... $ ionic upload ...
[WARN] No Cordova platforms listed in config.xml
ionic upload raise log
[WARN] No Cordova platforms listed in config.xml. Nothing to prepare., you can fix it by running:
$ ionic cordova platform add android -r
It will save a platform, android, on config.xml and though prevent error on ionic cordova prepare.
ADB device unauthorized in Android
$ adb devices -l List of devices attached 42001e15fabec200 unauthorized usb:605028352X
Check and uncheck the USB Debugging option in the device. If that doesn’t work unplug and plug in the USB. The device should show a message box to ask you to authorize the computer. Click yes and then the device will be authorized.
Error Could not find an installed version of Gradle either in Android Studio
If you use Mac and have Homebrew installed, just ran this command:
brew install gradle
For more installs check Gradle Build Tool website.
You have not accepted the license agreements of the following SDK components
Open android Manager and check licenses.
Add sidebar menu on blank starter
As good exercise you can create a new App from blank starter and add sidemenu.
Don’t worry, run
ionic docs on cli and reach the official Ionic doc in your browser.
Top Ionic resources
- Paul Halliday
- Josh Morony
- Raja Yogan
- DreamHouse App by Christophe Coenraets
- Full featured App using Ionic3 with REST Service and Google Map integration.
- Jave Bratt
- Building Ionic and Firebase apps.
- Rangle’s Angular Training
- Because Ionic use Angular, this Angular tutorial should be very helpful during your developments.