热爱web前端
技术分享平台

ionic项目搭建-创建你的第一个ionic项目

提示:为了搭建过程中减少错误,建议先配置各种需要的环境.

1.首先安装nodejs,下载地址,nodejs下载地址,按照提示安装即可,具体可查看nodejs安装教程.安装完毕打开cmd输入 node -v 如下图所示即为安装成功.

node -v 
v4.5.0

2.去官网下载最新的java_jdk,并配置系统环境变量,如图所示
ionic1
那么环境变量就是jdk的安装路径
ionic2
然后添加到path变量中.
3.下载android_sdk,也添加到环境变量中,跟前者一样的配置.
4.下载apache ant也添加到环境变量中.最后的环境变量如图:
ionic3
5.按照以上的步骤安装配置完成之后,可在cmd中检测是否配置完成.
ionic4
如果配置没问题,就会出现相应的版本号,到这里没有问题就可以进行下一步了

6.安装ionic

npm install -g cordova
npm install -g ionic
/*安装全局cordova及其ionic*/
/*安装成功也可以检测*/
coedova -v
ionic -v
/*出现版本号则成功*/
/*接下来就可以创建ionic项目了*/
/*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  /*(连接上手机运行) */
 

7.安装完成之后除了模拟器及其连接手机运行之外,还可以输入命令

ionic serve

会自动在浏览器中打开.
8.解决安装项目添加tabs模板完成之后导航在顶部的情况

.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('standard');

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

        $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');

});

打开项目www/js/app.js

.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('left');

        $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');

然后就可以看到效果了~
安卓sdk下载被墙,比较全面的sdk版本在文章最下方可以下载(如果你有需要)
如果有什么问题可在评论里提出~


未经允许不得转载:前端网(w3cvip) » ionic项目搭建-创建你的第一个ionic项目

分享到:更多 ()

评论 抢沙发