ionic 项目的创建的一些常用配置（不断更新中）

1.将tabs选项卡在底部显示的配置代码：
在app.js加入下面代码即可：

  /**
   * 修改导航样式和禁止页面跳转动画
   */
  .config(['$ionicConfigProvider',function ($ionicConfigProvider) {

    // $ionicConfigProvider.platform.ios.tabs.style('standard');
    // $ionicConfigProvider.platform.ios.tabs.position('bottom');
    $ionicConfigProvider.platform.android.tabs.style('standard');
    $ionicConfigProvider.platform.android.tabs.position('bottom');

    // $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
    $ionicConfigProvider.platform.android.navBar.alignTitle('center');

    // $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
    $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-chevron-left');

    // $ionicConfigProvider.platform.ios.views.transition('ios');
    $ionicConfigProvider.platform.android.views.transition('android');
  }])

2.隐藏底部选项卡的配置：
<1>在app.js中创建自定义指令代码：

  /**
   * 隐藏底部导航栏
   */
  .directive('hideTabs', function ($rootScope) {
    return {
      restrict: 'A',
      link: function (scope, element, attributes) {
        scope.$on('$ionicView.beforeEnter', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = value;
          });
        });

        scope.$on('$ionicView.beforeLeave', function () {
          $rootScope.hideTabs = false;
        });
      }
    };
  })

2.在需要隐藏的界面的导航栏中使用以上的自定义指令，示例：

<ion-view view-title="隐藏底部选项卡" hide-tabs="true">
  <ion-content>
  </ion-content>
</ion-view>

3.有些时候你觉得使用ionic1版本开发时，界面跳转会很卡顿，这时候你可以选择禁用页面的跳转动画，只需要在app.js中的.config中加入下面的代码即可：

 //禁止页面跳转动画
 $ionicConfigProvider.views.transition('no');

4.当需要双击点击退出系统时只需要在app.js的.run中加入以下代码：

 /**
     * 双击退出
     */
    $ionicPlatform.registerBackButtonAction(function (e) {
      //判断处于哪个页面时双击退出
      if ($location.path() == '/login' || $location.path() == '/tab/map') {
        if ($rootScope.backButtonPressedOnceToExit) {
          ionic.Platform.exitApp();
          // cordova.plugins.backgroundMode.moveToBackground();
        } else {
          $rootScope.backButtonPressedOnceToExit = true;
          WGQToast.showShortBottom('再按一次退出系统');

          setTimeout(function () {
            $rootScope.backButtonPressedOnceToExit = false;
          }, 2000);
        }
      } else if ($ionicHistory.backView()) {
        $ionicHistory.goBack();
      } else {
        $rootScope.backButtonPressedOnceToExit = true;
        WGQToast.showShortBottom('再按一次退出系统');

        setTimeout(function () {
          $rootScope.backButtonPressedOnceToExit = false;
        }, 2000);
      }
      e.preventDefault();
      return false;
    }, 101);

1. 本地存储、更改、获取，在service.js中添加以下代码，即可使用：

/**
 * 本地存储、更改、获取
 */
  .factory('localStorageService', [function () {
    var storage = localStorage;
    return {
      //取
      get: function localStorageServiceGet(key, defaultValue) {
        var stored = storage.getItem(key);
        try {
          stored = angular.fromJson(stored);
        } catch (error) {
          stored = null;
        }
        if (defaultValue && stored === null) {
          stored = defaultValue;
        }
        return stored;
      },

      //更新
      update: function localStorageServiceUpdate(key, value) {
        if (value) {
          storage.setItem(key, angular.toJson(value));
        }
      },

      //清空
      clear: function localStorageServiceClear(key) {
        storage.removeItem(key);
      }
    };
  }])

6.ionic界面复用时

• 通过$ionicTabsDelegate.selectedIndex()来获取根tabs的索引
• 通过$state.current.name来获取当前页面的url

7 .禁止页面跳转动画

 $ionicConfigProvider.views.transition('no');

8 . 隐藏掉返回按钮的前标题

$ionicConfigProvider.backButton.previousTitleText(false);

9 . 设置ionic工程内的所有headbar中的ion-title居中

 $ionicConfigProvider.platform.android.navBar.alignTitle('center');

10.如果应用实现了透明状态栏后，footbar以及原来flex布局实现软键盘遮挡覆盖全部失效，所以开发者为了处理这个问题，我们可以通过自定义指令来实现，在app.js中实现以下代码：

.directive('keyboardshow', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attributes) {
      window.addEventListener('native.keyboardshow', function (e) {
        console.log(e.keyboardHeight);
        angular.element(element).css({
          'bottom': e.keyboardHeight + 'px'
        });
      });

      window.addEventListener('native.keyboardhide', function (e) {
        angular.element(element).css({
          'bottom': 0
        });
      });
    }
  };
})

在需要的控件上写入即可：

<ion-content id="cgpwcontent" style="background-color:#f7f7f7;" keyboardshow>
</ion-content>

作者：ZQH24