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.

Thoughts

It's easy to change the religion. I just have to stop non-believing one god and start non-believing other one :-)

It's ok if you don't know about law but make sure you understand Justice.

God has created me as an atheist. Can someone help him to correct his mistake ?

Don't make mistake of throwing us in hell, with our smile, we will make it better than heaven.

Add google analytics to Ionic

Main purpose is to add exception handling to ionic mobile app.Once exceptions are cached at global level, we need some service, where we can send exceptions. While exploring some of the options, I found some implementations of google analytics with AngularJS.

Following google analytics plugin is to be used.

https://github.com/danwilson/google-analytics-plugin/

Need to add following code to IONIC ready function,
analytics.startTrackerWithId('UA-XXXX-YY') where UA-XXXX-YY is your Google Analytics Mobile App property.
Note:- You can get Mobile app property by registering for Google analytic services at - https://www.google.co.in/analytics/

$ionicPlatform.ready(function() {

            if(typeof analytics !== undefined) {

                analytics.startTrackerWithId("UA-XXXXXXXX-XX");

            } else {

                console.log("Google Analytics Unavailable");

            }

        });

Once done, as per documentation on github as on 5-Jun-2015, following methods are supported.

To track a Screen (PageView):

window.analytics.trackView('Screen Title')
To track an Event:

window.analytics.trackEvent('Category', 'Action', 'Label', Value) Label and Value are optional, Value is numeric
To track an Exception:

window.analytics.trackException('Description', Fatal) where Fatal is boolean
To track User Timing (App Speed):

window.analytics.trackTiming('Category', IntervalInMilliseconds, 'Variable', 'Label') where IntervalInMilliseconds is numeric
To add a Transaction (Ecommerce)

window.analytics.addTransaction('ID', 'Affiliation', Revenue, Tax, Shipping, 'Currency Code') where Revenue, Tax, and Shipping are numeric
To add a Transaction Item (Ecommerce)

window.analytics.addTransactionItem('ID', 'Name', 'SKU', 'Category', Price, Quantity, 'Currency Code') where Price and Quantity are numeric
To add a Custom Dimension

window.analytics.addCustomDimension('Key', 'Value', success, error)
To set a UserId:

window.analytics.setUserId('my-user-id')
To enable verbose logging:

window.analytics.debugMode()