$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.

Param Type Details
transition string

Which style of view transitioning to use.

  • platform: Dynamically choose the correct transition style depending on the platform the app is running from. If the platform is not ios or android then it will default to ios.
  • ios: iOS style transition.
  • android: Android style transition.
  • none: Do not perform animated transitions.
  • 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.

Param Type Details
maxNumber number

Maximum number of views to retain. Default 10.

  • 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.

Param Type Details
value boolean
  • 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'.

Param Type Details
value boolean

Defaults to false as of Ionic 1.2

  • Returns: boolean

backButton.icon(value)

Back button icon.

Param Type Details
value string
  • Returns: string

backButton.text(value)

Back button text.

Param Type Details
value string

Defaults to Back.

  • Returns: string

backButton.previousTitleText(value)

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

Param Type Details
value boolean
  • Returns: boolean

form.checkbox(value)

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

Param Type Details
value string
  • Returns: string

form.toggle(value)

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

Param Type Details
value string
  • Returns: string

spinner.icon(value)

Default spinner icon to use.

Param Type Details
value string

Can be: android, ios, ios-small, bubbles, circles, crescent, dots, lines, ripple, or spiral.

  • Returns: string

tabs.style(value)

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

Param Type Details
value string

Available values include striped and standard.

  • Returns: string

tabs.position(value)

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

Param Type Details
value string

Available values include top and 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.

Param Type Details
value integer

Max number of template to prefetch from the templateUrls defined in $stateProvider.state().

  • Returns: integer

navBar.alignTitle(value)

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

Param Type Details
value string

side of the navBar to align the title.

  • platform: Dynamically choose the correct title style depending on the platform the app is running from. If the platform is ios, it will default to center. If the platform is android, it will default to left. If the platform is not ios or android, it will default to center.

  • left: Left align the title in the navBar

  • center: Center align the title in the navBar
  • right: Right align the title in the navBar.
  • Returns: string value

navBar.positionPrimaryButtons(value)

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

Param Type Details
value string

side of the navBar to align the primary navBar buttons.

  • platform: Dynamically choose the correct title style depending on the platform the app is running from. If the platform is ios, it will default to left. If the platform is android, it will default to right. If the platform is not ios or android, it will default to left.

  • left: Left align the primary navBar buttons in the navBar

  • right: Right align the primary navBar buttons in the navBar.
  • Returns: string value

navBar.positionSecondaryButtons(value)

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

Param Type Details
value string

side of the navBar to align the secondary navBar buttons.

  • platform: Dynamically choose the correct title style depending on the platform the app is running from. If the platform is ios, it will default to right. If the platform is android, it will default to right. If the platform is not ios or android, it will default to right.

  • left: Left align the secondary navBar buttons in the navBar

  • right: Right align the secondary navBar buttons in the navBar.
  • Returns: string value