Ionic 入门

原创 2015年10月20日 23:00:25

关于 Ionic

Ionic 是基于 HTML5 与 AngularJs 的一个开发框架。Ionic 更多的是是基于 WebView 的开发模式,因为其本身提供了一系列的前端控件与 JS 控件。更多的详情可以查看:Ionic 官网(相关的教程可以 Google,中文教程还是比较多的,不过其实也不大需要教程,嘿嘿)

与 React Native 的对比

  1. React Native 是基于 Native 实现的,Ionic 依然还是 Hybrid 模式。
  2. React Native 基于 JSX 的,而 Ionic 则基于 AngularJs。
  3. React Native 目前只支持 Mac 的开发环境(傲娇脸),React Native for Android 是9月15号发布的,相对来说,Ionic 对开发环境的支持更加丰富,但是 React Native 的社区更加庞大,所以……我们还是先了解 Ionic 吧。

Ionic 入门

安装 Ionic

  • Ionic 是基于 NodeJS 的,所以要使用的话,需要安装 NodeJs,安装包请从官网下载。
  • 安装完 node 后在控制台执行:npm install -g cordova ionic

安装过程需要从网络下载大量的数据,安装过程可能比较慢,请耐心等候。

如果安装过程中出现错误,可以尝试通过管理员运行来安装。

运行 Ionic

Ionic 支持了 Android 与 iOS 平台的开发。初始化工程需要在控制台执行如下命令:
ionic start myApp tabs

该命令会下载相应的数据,用于初始化工程,生成工程目录:
- myApp 是对应的工程名称,生成目录的根目录名称。
- tabs 是生成工程的类型,根据官网的资料 Ionic 提供了 tabs,blank,sidemenu这三种类型。对应的效果。

blank
Tabs
tabs
blank
sidemenu
sidemenu

以下命令来运行工程。
cd myApp
ionic platform add android // 添加平台相应的数据
ionic build android //创建工程
ionic emulate android //打开模拟器

要创建 Android 工程需要配置环境变量:ANDROID_HOME!!!

开发环境搭建

编辑器

推荐 Github 官方开发的 Atom
- 软件安装与相关插件推荐

API

官网提供了详细的教程供大家学习,请自行访问官网。其实 Ionic 这个方案更多的是对这些控件的使用。而官网的文档还是比较给力的,所以大家通过官网来学习就可以了,因为常用的控件就那几个。
- CSS 控件
- JS 控件

相应知识储备

Ionic 属于新事物,所以学习它你需要了解这些东西。。。

HTML、CSS

Ionic 框架封装比较完整,我们使用的时候,可以像编写 Android 中的 Layout 那样来开发。不过有些地方还是需要了解 HTML 相应的知识。

AngularJS

Ionic 是基于 AngularJS 实现的,所以要使用的话,需要学习 AngularJS。
- 官网
- 中文教程

Thanks For Visit

David Lin

参考资料

版权声明:本文为博主原创文章,未经博主允许不得转载。

Ionic入门开发

Ionicionic是一个用来解决开发跨平台应用的方案。他是建立在Cordova的基础之上的,内部实现跨平台是由Cordova来实现的。相对于Cordova而言,他多了一些东西,例如的他的样式,例如A...
  • qq_27816995
  • qq_27816995
  • 2017年09月28日 16:54
  • 214

IONIC开发入门手册

IONIC开发入门手册大体主要分两步:安装cordova和安装ionic:一、安装cordova ANT安装(cordova工具生成android项目时,需要的编辑工具)ANT安装 到官方主页下载新...
  • yourlin
  • yourlin
  • 2015年08月26日 10:47
  • 7410

ionic——入门

ionic——入门 ionic的简介:ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和Angular...
  • sky_moon_y
  • sky_moon_y
  • 2017年05月16日 21:39
  • 255

ionic入门教程第一课--环境搭建和新建ionic项目

最近由于公司项目需要,自学Ionic。在这里做个备忘,也希望能帮到想自学ionic的其他朋友。 一、首先需要安装node.js环境,对于不了解node.js的同学也没有关系, 因为我们有用到的只是no...
  • onil_chen
  • onil_chen
  • 2016年03月01日 10:32
  • 11394

Ionic开发入门教程_9

Facebook整合  到了本系列的最后一章了,与其说是翻译,不如说是逼着自己从头到尾做一系列的解释和说明。因为这边教程本身就很容易看懂,甚至都没有翻译的必要,但既然要做这个翻译工作了,就善始善终吧~...
  • suqingheangle
  • suqingheangle
  • 2016年11月22日 23:26
  • 757

ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S

这节课的内容,有些前面几节已经说过了。 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic。 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,觉得还是挺适合零基础的朋友学习的。 有些前...
  • onil_chen
  • onil_chen
  • 2016年04月14日 20:24
  • 3242

ionic 开发WebApp入门

在这个技术日新月异的情况下,学习是提高个人技术能录的唯一路径,下面就ionic 的入门做以下小结。私以为还是官网的资料最为准确。       部门学习资料如下:        菜鸟教程-ionic1 ...
  • ABC__D
  • ABC__D
  • 2017年07月05日 14:44
  • 405

ionic入门到精通----css样式

Ionic CSS 介绍ionic 的预定义 CSS 类主要分四个方面: 基本布局类 颜色和图标类 界面组件类 栅格系统类 基本布局类ionic将手机页面的布局模式基本抽象为三块:头、内容、尾。基本布...
  • lzh657083979
  • lzh657083979
  • 2018年01月02日 19:15
  • 365

【Ionic入门】Ionic 列表

看过Ionic官网的,都知道Ionic有成型的CSS文档和JS文档. 对于初学者来说,帮助文档是最好的学习材料....
  • u010542940
  • u010542940
  • 2016年03月31日 22:04
  • 485

【Ionic入门】-Ionic简介

Ionic是一个强大的混合式/hybrid HTML5移动开发框架,特点是使用标准的HTML、CSS和JavaScript,开发跨平台应用.      Ionic是一个轻量的手机UI库,具有速度快,界...
  • u010542940
  • u010542940
  • 2016年03月23日 15:48
  • 1096
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ionic 入门
举报原因:
原因补充:

(最多只允许输入30个字)