ionic, angularjs with VS2013


This walk through will show you how to combine the features of Visual Studio 2013 with the Apache Cordova CTP 3.1, AngularJS, Ionic, and Adobe PhoneGap to create, build, and deploy a hybrid mobile app.

While Microsoft is hard at work putting the final touches on Visual Studio 2015 support for web based mobile apps, you can get started today if you know how to put the right pieces together.  This primer is intended to get you up and running building a hybrid mobile app using tools available today including Visual Studio 2013, Apache Cordova, AngularJS, the Ionic Framework, and Adobe Phone Build.

Visit – http://www.wintellect.com/devcenter/paulballard/build-your-first-hybrid-mobile-app-with-visual-studio-2013-angularjs-ionic-and-adobe-phonegap#

Happy Coding 🙂

ionic-content overlaps/hide behind ion-header-bar/ion-nav-bar.


Recently I am working on Ionic Framework with AngularJS. I noticed that my <ion-content> was overlapping or hidden behind <ion-nav-bar> or in some cases you may have <ion-header-bar> as well..

       <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Settings</h1>
      <button class="button button-clear" ng-click="closeSettings()">Close</button>
    </ion-header-bar>
    <ion-content>
      <div class="padding">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Units</span>

            <ion-radio-buttons ng-model="settings.tempUnits">
              <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
              <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
            </ion-radio-buttons>
          </label>
        </div>
      </div>
    </ion-content>

Solution: 

Assign a class=”has-header” to ion-content.

<ion-content class="has-header">
</ion-content>

Hope this helps –

Happy Android/ionic/angular Coding 🙂

ionic/angular: Use The Android And iOS Camera With Ionic Framework


Source:

https://blog.nraboy.com/2014/09/use-android-ios-camera-ionic-framework/

Most smart phones on the market have at least one camera if not two.  You may want to leverage these cameras to make the next Instagram or SnapChat type application.  Lucky for us, the native Android and iOS camera can be easily accessed using Ionic Framework and the AngularJS extension set, ngCordova.

Thanks for Nick Raboy for wonderful article.

Happy Hybrid App Development…

ionic/angular: Implement A Barcode Scanner Using Ionic Framework


Source:

https://blog.nraboy.com/2014/09/implement-barcode-scanner-using-ionic-framework/

More specifically I needed to scan quick response (QR) codes.  After doing some searching I found that ngCordova had an extension for the Apache Cordova plugin BarcodeScanner which has the ability to scan barcodes in the following formats:

  • QR Code
  • Data Matrix
  • UPC E
  • UPC A
  • EAN 8
  • EAN 13
  • Code 128
  • Code 39
  • ITF

Pretty much all the formats anyone would ever need.  The plugin itself makes use of the very popular ZXing library.

Thanks to Nick Raboy for wonderful article.

Happy Android Development 🙂

ionic/angular: Create, Delete, And Search Contacts In Ionic Framework


Source:

https://blog.nraboy.com/2014/11/create-delete-search-contacts-ionic-framework/

When you make an app or service, you may find your self wanting to strengthen the user experience by connecting with friends in some fashion.  Applications like Facebook and Twitter allow you to search your contact book for friends that are already using their service.  If your friend isn’t using the service, you have the option to invite them.

Using native Android and iOS code could make this process very painful for the developer as it is lengthy and difficult.  Lucky for us, we are using Apache Cordova with Ionic Framework and there is a plugin for us that takes all the pain away.

The following steps will show you how to create, delete, and find all device contacts in your Ionic Framework project.
Thanks to Nick Raboy for wonderful article.
Happy Android Development 🙂

ionic/angular: Syncing Data With Dropbox Using Ionic Framework


Source:

https://blog.nraboy.com/2014/10/syncing-data-dropbox-using-ionicframework/

Storing or syncing data remotely is often a need in modern apps.  This generation is all about the cloud and how to be a part of it.  IonicFramework is a great way to make hybrid cross platform mobile Android and iOS applications, but how about sharing data between them?  Dropbox is one of a few cloud storage services that happens to have great APIs and documentation.

The following won’t necessarily show you the best way for syncing data in IonicFramework using Dropbox’s Datastore API, but it will show you how I did it with success.

Thanks to Nick Raboy.

Happy Android Hybrid App Development 🙂