stepts

npm install -g ionic@beta        

Make sure you have NodeJS installed. Download the installer here or use your favorite package manager. It’s best to get the 5x version of node along with the 3x version of npm. This offers the best in stability and speed for building.

Once that’s done, create your first Ionic app:

 ionic start cutePuppyPics --v2

To run your app, cd into the directory that was created and then run the ionic serve command:

$ cd cutePuppyPics
$ ionic serve

You can play with it right in the browser!

Building to a Device

After you have Ionic installed, you can build your app to a physical device. If you don’t have a physical device on hand, you can still build to a device emulator. Check out the iOS simulator docs if you are on a Mac, or the Genymotion docs if you are looking to emulate an Android device. You will also need Cordova to run your app on a native device. To install Cordova, run:

$ sudo npm install -g cordova

Building for Android

To build for Android, you’ll need to add the Android platform module to Cordova:

$ ionic platform add android

Next, you’ll need to install the Android SDK. The Android SDK allows you to build compile to a target device running Android. Although the Android SDK comes with a stock emulator, Genymotion is recommended, since it’s much faster. Once installed, start an Android image and run:

$ ionic run android

Problems

problem1

As a common cause for Chinese programmers,the existence of GFW will make it hard for us to dowlad gradles

solutions:

  1. dowload specificed version gradle from Internet.
  2. paste it in somewhere likes myApp\platforms\android\gradle\gradle-2.2.1-all.zip
  3. change distributionUrl in myApp/platforms/android/cordova/lib/builders/GradleBuilder.js
from
var distributionUrl = 'distributionUrl=http\\://services.gradle.org/distributions/gradle-2.2.1-all.zip';
to
var distributionUrl = 'distributionUrl=../gradle-2.2.1-all.zip';

references

ionic build android error when download gradle - Stack Overflow

problem2

ionic serve opened a blank page

solutions:

change your browse,firefox or chorme will be fine.

problem3

EveryTime I run ionic run android,the code will go back to the original and don’t change.

solutions:

there are three directory have page htmls

  1. app/
  2. www/
  3. android/

please edit code in app directory and it will work well.

Ionic环境搭建的更多相关文章

  1. ionic环境搭建及新建项目中的各种问题

    具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败 解决方法:修改npm的源,npm config set regis ...

  2. Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...

  3. ionic环境搭建和安装

    1. 安装node环境 nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即可. Node官网: https://nodejs.org/ 安装完成后配置环境变量,计算机->属性 ...

  4. ionic 环境搭建

    1.安装nodejs (8.4.0) 下载地址 https://nodejs.org/zh-cn/ 2.Java jdk  版本号  jdk1.8.0_121 3.安装 cordova npm ins ...

  5. 第三章:ionic环境搭建之windows篇

    下面是在windows操作系统上面安装ionic的步骤,已经在Windows 10/ 7/ XP下面通过验证. 安装JDK 1.1 下载(http://www.oracle.com/technetwo ...

  6. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

  7. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  8. Cordova+ionic 开发hybird App --- 开发环境搭建

    Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...

  9. Ionic 开发环境搭建

    android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...

随机推荐

  1. BZOJ4514——[Sdoi2016]数字配对

    有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci×cj 的 ...

  2. NSLock/NSRecursiveLock/NSConditionLock/@synchronized

    NSLock/NSRecursiveLock/NSConditionLock/@synchronized http://blog.sina.com.cn/s/blog_8c87ba3b0101ok8y ...

  3. c++对象创建带括号与无括号的区别

    class Test{public: Test() {} Test(int a) {}} 1.栈上创建对象 1.1 无括号 Test a; // 调用默认构造函数,栈上分配内存创建对象 1.2 有括号 ...

  4. 37 网络相关函数(五)——live555源码阅读(四)网络

    37 网络相关函数(五)——live555源码阅读(四)网络 37 网络相关函数(五)——live555源码阅读(四)网络 简介 10)MAKE_SOCKADDR_IN构建sockaddr_in结构体 ...

  5. 18 TaskScheduler任务调度器抽象基类——Live555源码阅读(一)任务调度相关类

    这是Live555源码阅读的第二部分,包括了任务调度相关的三个类.任务调度是Live555源码中很重要的部分. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/ol ...

  6. bootstrap框架-----可见 隐藏

    可见框架-像素选择 -block-inline  :块内联元素 -inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和 ...

  7. phpcms图片模型调用组图的问题

    phpcms里面有个图片模型,之前一直没有用过,之前用的轮播图是用文章+缩略图+推荐位实现的 今天看了一下图片模型添加内容的地方,和平常的文章相比多了一个组图的地方:

  8. iOS 8 Auto Layout界面自动布局系列2-使用Xcode的Interface Builder添加布局约束

    http://blog.csdn.net/pucker/article/details/41843511 上一篇文章<iOS 8界面自动布局系列-1>简要介绍了iOS界面布局方式的前世今生 ...

  9. iOS开源App整理

    http://duxinfeng.com/2015/07/14/iOS%E5%BC%80%E6%BA%90App%E6%95%B4%E7%90%86/ http://blog.csdn.net/dux ...

  10. [转载]Python 3.5 协程究竟是个啥

    http://blog.rainy.im/2016/03/10/how-the-heck-does-async-await-work-in-python-3-5/ [译] Python 3.5 协程究 ...