Ionic and angular have a steep learning curve. I am working on a new cordova project that I decided to use the fore mentioned toolkit. This will be my running blog on ionic/angular gotcha’s and I hope it helps people..
Creating an ionic project.
It’s painful, but I am here to help
This is assuming you have nodejs installed of course.
(if your not root, make sure you type sudo in front of the command I.E. sudo npm -g install cordova)
npm -g install cordova npm -g install ionic |
I am going to create a program calledRandom chat, that will do literally that anyone in the app will be able to randomly chat with people. So yes, this is client/server
ionic start randomChat sidemenu |
I LOVE the sidemenu, it gives you more working room and gets out of the way.
Stuff is going to download at this point. The you will be handed the prompt back.
The one thing I HATE about ionic is how it messes with your reverse domain.. It drives me crazy!
Lets fix it (assuming Mac or Linux here, Windows, you’re on your own <-- I think that's a Walken comma) 
cd randomChat nano config.xml |
It will look like this
<?xml version='1.0' encoding='utf-8'?> <widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloCordova</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="*" /> <preference name="webviewbounce" value="false" /> <preference name="UIWebViewBounce" value="false" /> <preference name="DisallowOverscroll" value="true" /> <preference name="BackupWebStorage" value="none" /> <feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true" /> </feature> </widget> |
That’s not quite right!!
Change:
id="com.ionicframework.starter" |
to
id="com.yourdomain.randomChat" |
Change:
<name>HelloCordova</name> |
to
<name>randomChat</name> |
You will probably want to update description and author.
Here is my final config.xml
<?xml version='1.0' encoding='utf-8'?> <widget id="com.nuwex.randomChat" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>randomChat</name> <description> An Application that will let you chat randomly with people. </description> <author email="spamme@thebugshop.net" href="http://twoappguys.com/"> Two App Guys </author> <content src="index.html" /> <access origin="*" /> <preference name="webviewbounce" value="false" /> <preference name="UIWebViewBounce" value="false" /> <preference name="DisallowOverscroll" value="true" /> <preference name="BackupWebStorage" value="none" /> <feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true" /> </feature> </widget> |
Boo yah, good there now.
Now since I am on a mac I am going to add iOS, since the emulator is awesome (and not even an emulator at all)
ionic platform add ios |
Now we build it.
ionic build ios |
Oh looking good, hopefully you have Xcode and all that installed, if not install it, you need it.
You should get a prompt back
Install ios-sim (don’t forget about sudo)
npm -g install ios-sim |
ok good to here. No errors right? Of course not!
you should be able to see your app in action.
ionic emulate ios |
Did you get a phone to pop up? I did!
That’s it you have started your first Ionic project! Exciting huh? I decided to split this into parts since it seems daunting to look at a wall of text.
All for now.
Check out Part 2
John “Don’t Taze Me Bro” Hass