01 ionic+angular开发webapp笔记

首先就是搭建环境，环境搭建比较费劲，用了三天才成功

第一步，安装java的jdk，然后配置系统环境，就那三条东西加入环境变量

第二部，去下载android studio，里面包含android sdk，打开想整哪个版本下载哪个版本的sdk，下载完一看30多g，吓到我了。

第三部，安装nodejs，简单了，直接略过。

第四部，npm install -g cordova

第五步，npm install -g ionic

完活，环境搭建完成。

然后先创建一个app测试一下

找个文件夹

ionic start mytest

做一个案例

然后

ionic platform add android

然后再

ionic build android

将手机连接电脑，敲入

ionic run android

成功的话，就会在手机上显示，安装app。好幸福

Ios  创建安装运 行
ionic start myproject
cd myproject
ionic platform add ios
ionic build ios
ionic emulate ios
Android  创建安装运 行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器运行)
ionic run android (连接上手机运行

如果每次都用手机打开会很麻烦，所以，可以使用下面的命令，在浏览器中打开

ionic serve

解决android系统导航栏在顶部的问题

找到根目录下的www/js/app.js 从.config开始以后的使用下面代码覆盖，覆盖之前记得备份哦

.config(function($stateProvider, $urlRouterProvider, $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-android-arrow-back');

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

然后从新ionic build android 一下，然后，就真的成功啦，好神奇！！！

最后笔记，使用CrossWalk提高app的运行速度

优点：app运行速度提高，缺点：安装包会变大十几M

使用方法，在项目文件夹内使用以下代码

1．集成 crosswalk
ionic browser add crosswalk
2.卸载 crosswalk
ionic browser revert android 或者 ionic browser remove crosswalk

貌似现在上面的命令不行了，我现在用的下面的

cordova plugin add cordova-plugin-crosswalk-webview

啥都没写，项目竟然就已经达到30M了，感觉确实有点大了。。。。