Ionic - libsass` bindings not found. Try reinstalling `node-sass

In case, you have node version >= 4. Try following to fix the issue

npm uninstall --save-dev gulp-sass

npm install --save-dev gulp-sass@2

Reference - http://stackoverflow.com/questions/28409100/try-reinstalling-node-sass-on-node-0-12

Ionic app - display tweaks for Android versions between 4 and 4.4

Ionic works great for most of the browsers. We faced some issues while testing on Android 4.1.1 and 4.2 webkit browsers. Following are some of the tweaks in html, css which resolved the issues we were facing. Main issue was how to debug and find out the issues as there is very limited support for browser testing in versions < 4.4. This stackoverflow answer helped me to get old Safari version which works on same webkit version that of jelly bean.
http://safari.en.softonic.com/

 http://stackoverflow.com/questions/31073592/how-to-develop-cordova-apps-for-jelly-bean



HTML changes to make it work on android browsers > 4.0.
1. float:left and float:right does not work on some divs. Remove, if not necessary.  - This will fix display errors.
2. button-bar adds some style due to which icon is not shown. (eg. - add button on rates and payments screens) - remove the button bar displays icon.
3. Add display-block for all drop downs (select element). This will help them to show with 100% width, else it will take only space required in select elements.
4. Placeholder is not shown for input type "number" - solution is onfocus:"this.type='number'" onblur="this.type='text'" or make input-type="tel"

Ionic - add custom icons

I am using ionic to develop my next android app. I wanted to use icons which were not provided by ionicons. Following are the steps, which can help to easily add new font icons to your app.

1. Create .svg file using tool like Adobe illustrator
2. Create fonts file using tool like Icomoon and save those files in the www\fonts folder
3. In the file www\css\styles.css , add
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.custom-order:before {
  display: inline-block;
  font-family:"icomoon"; /* "Ionicons";*/
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.custom-order:before {
  content: "\e900"; }/* e900 is the icon, I need for orders.*/
 
 4. add custom-order in the tabs.html in place of previous icon.

 ion-tab title="Orders" icon-off="custom-order" icon-on="custom-order"

You can use these fonts similarly across the application.

Ionic disable-enable Back Button action

There is one service provided for enabling-disabling the back button, in ionic cordova app.


https://gist.github.com/mircobabini/689955216a036544d594

.service( 'HardwareBackButtonManager', function($ionicPlatform){
  this.deregister = undefined;

  this.disable = function(){
    this.deregister = $ionicPlatform.registerBackButtonAction(function(e){
 e.preventDefault();
 return false;
    }, 101);
  }

  this.enable = function(){
    if( this.deregister !== undefined ){
      this.deregister();
      this.deregister = undefined;
    }
  }
  return this;
})

// usage
.controller( 'YourController', function( 'HardwareBackButtonManager' ){
 HardwareBackButtonManager.disable();
 
 // re-enable it when you want,
 HardwareBackButtonManager.enable();
})

// usage

.controller( 'YourController', function( 'HardwareBackButtonManager' ){
 HardwareBackButtonManager.disable();
 
 // re-enable it when you want,
 HardwareBackButtonManager.enable();
})

Front end designer help - CodePen

I have started working with Ionic and AngularJS for hybrid mobile app development. When searching for examples and tutorials, most of the examples were shared via CodePen. This is online tool where we can put our code, try out few things and immediately see the results.

It is very easy to work with and fast. You can try it at - CodePen.io

Fast prototyping tool - JustInMind (JIM)

I recently had to create quick prototypes from scratch and was looking for some tool. I found out there are many, tools available which can import your images and help you to work with those.

JustInMind is great tool which also provides data masters for prototyping with sample data. It also creates views automatically based on the data structure. It supports web, mobile etc. Overall, I am quite impressed with the initial week with JustInMind.
site url -  justinmind.com


It is free for evaluation for 1 month and thereafter have two versions - Free and other paid. I am currently in evaluation period and will decide about it later on.

Web API controllers with multiple get methods

Add following method after initializing Config with Azure.

 HttpConfiguration config = ServiceConfig.Initialize(new ConfigBuilder(options));

config.Routes.MapHttpRoute( 
   name: "ActionApi", 
   routeTemplate: "api/{controller}/{action}/{id}", 
   defaults: new { id = RouteParameter.Optional } 
);

Now, you can have multiple methods like following in the controller. 

ActionName attribute should be different for each method.

[HttpGet]
        [ActionName("GetVendorCustomerView")]
        public HttpResponseMessage Get(String vendorID,String CustomerID)

 [HttpGet] 

[ActionName("GetVendorCustomerViewDetails")]
public HttpResponseMessage GetDetails(String vendorID, String CustomerID)

Now, these can be accessed using given Action name.