Ionic:Hybrid Mobile App Development
上QQ阅读APP看书,第一时间看更新

Miscellaneous components

There are some extra utility and miscellaneous components available in Ionic Framework. The components can be in the form of directives or services.

$ionicPosition

It is a utility service used to retrieve the position of DOM elements. This can be used to position elements absolutely over the screen. It has two methods available, position and offset, which fetch the position relative to its parent or relative to the document respectively. The methods return an object containing the properties top, left, width, and height.

$ionicConfigProvider

Ionic has a lot of default configurations and styles for different platforms. For example, in iOS, the tab bar is shown below by default, and in Android, the tab bar is shown on top. The Ionic platform exposes a provider to manage these configurations, which is called $ionicConfigProvider. This provider can be used during the config phase of your Angular app. The configuration is, by default, set for the specific platform.

The following is the usage of this variable:

var myApp = angular.module('MyApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(5);
  $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});

A list of different configurations that can be set using this provider are as follows:

  • views.transition(transition): Animation style while viewing transitions
  • scrolling.jsScrolling(booleanValue): Setting usage for native JS scrolling or not
  • backButton.icon(value): Setting the back button icon
  • backButton.text(value): Setting the text for back button
  • tabs.position(value): Setting the position of tabs out of top or bottom
  • navBar.alignTitle(value): Setting the alignment side for the navbar's title
  • spinner.icon(value): Setting the default icon for the spinner