Create a Cross-platform App with Visual Studio
Introduction
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.
Video Tutorial
Code Samples
Below are the complete code samples of the Ionic project files modified in the tutorial.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">First Ionic App</h1>
</ion-header-bar>
<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>
<div class="col">
<button class="button button-calm icon-left ion-edit" ng-click="message='Edit clicked!'">Edit</button>
</div>
</div>
<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>
<div class="col">
<button class="button button-assertive icon-left ion-search" ng-click="message='Search clicked!'">Search</button>
</div>
</div>
<br />
<br />
<h2>{{message}}</h2>
</ion-content>
</ion-pane>
</body>
</html>
app.js
// 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)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// 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.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}).controller('HomeCtr', function ($scope) {
$scope.message = "Okay are you going to click a button?";
});
style.css
/* Empty. Add your own CSS if you like */
button {
width: 100%;
}
Conclusion
I hope you've found this tutorial for developing cross-platform mobile apps helpful. Best wishes for your mobile app development projects.
