× {{alert.msg}} Never ask again
Receive New Tutorials

Create a Cross-platform App with Visual Studio

– {{showDate(postTime)}}
Create a Cross-platform App with Visual Studio


Did you know that you can write mobile applications with great user interfaces that are cross-platform — supporting Android, iOS, and Microsoft phones and tablets — with just HTML, JavaScript, and CSS?

That’s right, times are changing and it is easier than ever with Visual Studio Community Edition’s Ionic templates which are free. Believe it or not, Visual Studio is ahead of the game for Ionic development under Windows providing a first-class IDE with excellent stock projects that run on mobile devices out-of-the-box.

This video tutorial demonstrates how to create a simple cross-platform Ionic app in minutes.

Learn more about Ionic in our Intro to Ionic post

Video Tutorial

Code Samples

Below are the complete code samples of the Ionic project files modified in the tutorial.


<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">

    <script src="js/platformOverrides.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  <body ng-app="starter">

      <ion-header-bar class="bar-positive" align-title="center">
        <h1 class="title">First Ionic App</h1>
      <ion-content ng-controller="HomeCtr">

          <br /><br />

          <div class="row">
              <div class="col">
                  <button class="button button-royal icon-left ion-home" ng-click="message='Home clicked!'">Home</button>
              <div class="col">
                  <button class="button button-calm icon-left ion-edit" ng-click="message='Edit clicked!'">Edit</button>

          <div class="row">
              <div class="col">
                  <button class="button button-balanced icon-left ion-ios-copy-outline" ng-click="message='Copy clicked!'">Copy</button>
              <div class="col">
                  <button class="button button-assertive icon-left ion-search" ng-click="message='Search clicked!'">Search</button>

          <br />
          <br />




// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
    if(window.StatusBar) {

}).controller('HomeCtr', function ($scope) {

    $scope.message = "Okay are you going to click a button?";



/* Empty. Add your own CSS if you like */

button {
    width: 100%;


I hope you’ve found this tutorial for developing cross-platform mobile apps helpful. Best wishes for your mobile app development projects.

###Other related tutorials you might be interested in:

I haven't had a dissatisfied client yet
MS in CS with over 12 years of IT experience from IBM to startup founder to freelancing with a lifelong ♥ for coding. I've published two books; so expect excellent communication skills and...
Hire the Author

Questions about this tutorial?  Get Live 1:1 help from Android experts!
John McKean
John McKean
Android Developer & UX/UI Designer
Entrepreneur | Android Developer | UX/UI Designer | Java Instructor I am currently working full time as a freelancer on Android development...
Hire this Expert
Lucian Piros
Lucian Piros
Senior Software Engineer at Panasonic Computer Products Europe
• Passionate about technology
Hire this Expert

Or Become a Codementor!

Live 1:1 help from expert developers

Codementor is your live 1:1 expert mentor helping you in real time.

comments powered by Disqus
Codementor is your live 1:1 expert helping you in real time