Ionic Add Start Page – Start page is added using the service $urlRouterProvider which is imported before using it. Here in this tutorial we are going to explain how you can add default page i.e. start page.

Ionic Add Start Page

You can add start page as below-

Javascript Part :

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'MainCtrl'
        }
      }
    })
	.state('profile', {
      url: "/profile",      
      templateUrl: "templates/profile.html"
      
    })
	.state('contact', {
      url: "/contact",      
      templateUrl: "templates/contact.html"
      
    }); 
   $urlRouterProvider.otherwise("/tab/home");

})

In the above example $urlRouterProvider.otherwise(“/tab/home”); is used to define the default home page ie. tab/home. If you run the above example it will open the default template home.

Html Part –

The template for the above example are –

Hide back button in ionic AngularJs : Sometimes we need to hide the back button on some pages. We can use $ionicNavBarDelegate service and showBackButton() function to show and hide the back button.

Hide back button in ionic AngularJs

You disable the back button in ionic as below –

.controller('MainCtrl', function($scope, $location, $ionicNavBarDelegate) {
   var path = $location.path();
   if (path.indexOf('edit') != -1){
     $ionicNavBarDelegate.showBackButton(false);
	 }
   else{
     $ionicNavBarDelegate.showBackButton(true);
	 }
})

The above example will hide the back button where the page index of ‘edit’ is not equal to -1 ie it will hide the back button except the edit page. So you can add other condition to show and hide the back button.

• $ionicNavBarDelegate.showBackButton(false) – This will hide the back button.
• $ionicNavBarDelegate.showBackButton(false) – This will show the back button.

Reload Ionic View : In ionic views are cached to provide the good performance to the users. Sometimes we need to reload the views. Here in this tutorial we are going to explain how you can reload the views in ionic framework.

Reload Ionic View

You can avoid the view cache using the followings ways –

• Disable ion-view cache using the following method –

  This will disable view cache.

• If you want to refresh the view use ion-refresher – http://tutorialsplane.com/ionic-ion-refresher/

The above method will help you in disabling view cache and reloading it for updated content.

Ionic Change Background Color of List Item : We sometimes need to customize the ionic list item’s style such as background color, text color etc. You can add your own css to add the new style or you can override the default style. Here in this tutorial we are going to explain how to add styles in ionic list items with example and demo.

Ionic Change Background Color of List Item

You can add the background color of list Item using the following methods –

Ionic Change Background Color : Using Default Colors

    
Item 1
   
Item 2
   
Item 3
   
Item 4

If you run the above example it will produce the following output-

Ionic Change list item Background Color : Using Custom Styles

If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –

    
Item 1
   
Item 2
   
Item 3
   
Item 4

Ionic List Change Background Color on Hover

    
Item 1
   
Item 2
   
Item 3
   
Item 4

Ionic Change font Color

If you want to add your own custom style rather than using the default background colors you can create custom class and add the background color. Here is an example –

    
Item 1
   
Item 2
   
Item 3
   
Item 4

The above example will change the font color of the list items in the ionic.

AngularJS ng-click to go to another page in Ionic framework : We sometimes need ng-click to load another page in ionic framework. Here in this tutorial we are going to create a simple function which will accept the path of the page and will load the page. For this we need the controller service $location. In this this tutorial we will exlplain this with example and online demo.

AngularJS ng-click to go to another page in Ionic framework

You can create the controller function simply as –

Controller part : Js

If you will run the above example it will produce the output like this -

Ionic run a controller function on view open/shown : We sometimes need to call a controller when the view is loded or open/shown. You can load the controller on the ion-nav-view load and it’s function. Here in this tutorial we are going to explain how to load and call a different controller function whenever the view is loaded ie. open/shown.

Ionic run a controller function on view open/shown

Here are the steps to run a controller function on ion view open-

ion-nav-view Part

Add the controller name you want to load and call it’s function as below

Now let us define the controller and it’s function as below-

Controller Part

.controller('myController', function($scope) {
  $scope.testFunction = function() {    
	 //Your Code Goes Here
  };
  
});

The above controller will be loaded and function testFunction will be called.

Ionic clear view cache on close : afterLeave –

$scope.$on("$ionicView.afterLeave", function () {
     $ionicHistory.clearCache();
}); 

The above example will clear ionic view cache each time it is closed.

Ionic change ion-view header color : Sometimes you need to change the default ion-view header color in ionic framework. You can use ion-nav-bar in each view and add the ionic inbuilt color css or add you custom css to change the ion-view header color. Here in this tutorial we are going to explain how to change the ion-view color in ionic framework with example and demo.

Ionic change ion-view header color

Add the ion-nav-bar to each ion-view and add the color css in this. Here is an example for this –

  
    
  
  
    Dummy Content..
  

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Add Custom Color

If you want to add your custom color add a class and add the css for this –

  
    
  
  
    Dummy Content..
  

The above example will change the default ion-view header color.

If you will run the above example it will produce the following output-

Customize font size in Ionic Framework : Sometimes we need to customize the font size, font style in ionic framework. You can add font css in style.css to override the default font size as per your requirement. Here in this tutorial we are going to explain the font customization in ionic.

Customize font size in Ionic Framework

Go to project/www/css open style.css and add the following css.

body{font-size:25px !important;}

The above css will override the default css for font size and set it to 25px. You can add font size as per your need.

If you run the above example it will produce the following output-

Ionic place tabs at the bottom of the screen : In ionic framework we some time face problem in the position of the tabs. In this tutorial we are going to explain how to place the tabs at the bottom of screen in ionic framework.

Ionic place tabs at the bottom of the screen

Suppose we have tabs something like in this example –

    
     
     Tab 1
     

     
      Tab 2
     

     
      Tab 3
     
    

To place the above tabs at the bottom of the screen add the following code in app.js just after the angular.module.

 angular.module('myApp', ['ionic'])

.config(function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom');

})

If you will run the above demo it will produce the output like this -