What will we do in this series?
- Create an application from the Visual Studio Cordova Template
- Pack an application scaffolded by Ionic tooling into it
- Refactor it a little bit and use Typescript to add an Angular Service
Technical titles sometimes tend to get clumsy. When combining different technologies and approaches, one needs to fit a lot of words into the headline to let the reader know what one is talking about.
My alternative title was “Magic bullet combination for hybrid mobile application development” but that one’s only 12 characters short the current title and no one would have a clue what this is all about. Still, I believe the alternative title would have its justification. Let me briefly outline why.
2) Visual Studio Cordova Template
Together with Visual Studio tooling for cordova applications, this feels like a huge push compared to Phonegap/Cordova development a year ago.
It is also complementary to Ionic in terms of tooling: It removes some setup headaches and even brings debugging to the table.
Combining the above might seem pretty adventurous already. Why would someone like to bring Typescript into this mixture?
To be honest, I was curious. And Microsoft is supporting Typescript for their Cordova Template. And there is really not much to lose, as Typescript will go out of your way if needed. On the contrary, I will show how painless it is and what some of the benefits are.
If you want to hear about Typescript from someone a little bit (just a little) more destined to do so, listen to Anders Hejlsberg on the bottom of the Typescript homepage.
1-2-3 Magic bullet
The idea is to use Ionic (with Angular, needless to say) but use Visual Studio Cordova tooling support instead of Ionic’s own tooling.
To do so, we will use a standard Ionic application as scaffolded by
$ ionic start myApp sidemenu
Then we will put that into the Visual Studio Cordova template and let it run. All of this will happen in this article.
In the next installment, we will make some changes to the business logic inside that application and convert some of it to Typescript.
Install the tools
Before we’re installing Ionic, we should actually install Visual Studio Tooling Support for Apache Cordova a.k.a. Multi-Device Hybrid Apps. Why, you ask? Because it’s installing a lot of stuff (like Java JDK 7 and Ant as well as Ripple Emulator ) that you would have to install manually to get Ionic up and running.
This might take a few minutes to install. Take your time.
Or better yet, continue reading. Because now you are being confronted with two options:
As we’re only using Ionic to scaffold the application and the library and CSS (alright, everything Ionic offers EXCEPT their tooling) you might as well go with option 2. Anyway, I am going to describe option 2. If you really want to go with option 1, make sure you check your setup against the more detailed setup instructions. Just sayin’.
Create an empty Apache Cordova Application with Typescript. Though we’re starting without Typescript, we will need it later
You can then press F5 to run the application in Ripple Emulator. Your browser window should look something like that
This corresponds to commit Blank Cordova App with Typescript on Github.
There is nothing happening with AngularJS here. And this also has nothing to do with Ionic yet. Let’s change that in part 2.
Hope that helps