$ionicConfigProvider

Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom. For example, iOS will move forward by transitioning the entering view from right to center and the leaving view from center to left. However, Android will transition with the entering view going from bottom to center, covering the previous view, which remains stationary. It should be noted that when a platform is not iOS or Android, then it’ll default to iOS. So if you are developing on a desktop browser, it’s going to take on iOS default configs.

These configs can be changed using the $ionicConfigProvider during the configuration phase of your app. Additionally, $ionicConfig can also set and get config values during the run phase and within the app itself.

By default, all base config variables are set to 'platform', which means it’ll take on the default config of the platform on which it’s running. Config variables can be set at this level so all platforms follow the same setting, rather than its platform config. The following code would set the same config variable for all platforms:

$ionicConfigProvider.views.maxCache(10);

Additionally, each platform can have it’s own config within the $ionicConfigProvider.platform property. The config below would only apply to Android devices.

$ionicConfigProvider.platform.android.views.maxCache(5);

Usage

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(5);

  // note that you can also chain configs
  $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});

Methods

views.transition(transition)

Animation style when transitioning between views. Default platform.

• Returns: string value

views.maxCache(maxNumber)

Maximum number of view elements to cache in the DOM. When the max number is exceeded, the view with the longest time period since it was accessed is removed. Views that stay in the DOM cache the view’s scope, current state, and scroll position. The scope is disconnected from the $watch cycle when it is cached and reconnected when it enters again. When the maximum cache is 0, the leaving view’s element will be removed from the DOM after each view transition, and the next time the same view is shown, it will have to re-compile, attach to the DOM, and link the element again. This disables caching, in effect.

• Returns: number How many views Ionic will hold onto until the a view is removed.

views.forwardCache(value)

By default, when navigating, views that were recently visited are cached, and the same instance data and DOM elements are referenced when navigating back. However, when navigating back in the history, the “forward” views are removed from the cache. If you navigate forward to the same view again, it’ll create a new DOM element and controller instance. Basically, any forward views are reset each time. Set this config to true to have forward views cached and not reset on each load.

• Returns: boolean

scrolling.jsScrolling(value)

Whether to use JS or Native scrolling. Defaults to native scrolling. Setting this to true has the same effect as setting each ion-content to have overflow-scroll='false'.

• Returns: boolean

backButton.icon(value)

Back button icon.

• Returns: string

backButton.text(value)

Back button text.

• Returns: string

backButton.previousTitleText(value)

If the previous title text should become the back button text. This is the default for iOS.

• Returns: boolean

form.checkbox(value)

Checkbox style. Android defaults to square and iOS defaults to circle.

• Returns: string

form.toggle(value)

Toggle item style. Android defaults to small and iOS defaults to large.

• Returns: string

spinner.icon(value)

Default spinner icon to use.

• Returns: string

tabs.style(value)

Tab style. Android defaults to striped and iOS defaults to standard.

• Returns: string

tabs.position(value)

Tab position. Android defaults to top and iOS defaults to bottom.

• Returns: string

templates.maxPrefetch(value)

Sets the maximum number of templates to prefetch from the templateUrls defined in $stateProvider.state. If set to 0, the user will have to wait for a template to be fetched the first time when navigating to a new page. Default 30.

• Returns: integer

navBar.alignTitle(value)

Which side of the navBar to align the title. Default center.

• Returns: string value

navBar.positionPrimaryButtons(value)

Which side of the navBar to align the primary navBar buttons. Default left.

• Returns: string value

navBar.positionSecondaryButtons(value)

Which side of the navBar to align the secondary navBar buttons. Default right.

• Returns: string value