w3free: ionic

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.

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('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?";

});

Conclusion

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

w3free

Saturday, January 14

Create a Cross-platform App with Visual Studio

Introduction

Code Samples

Conclusion

10 Best Chatting Apps In India