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开发入门教程_3

创建Ionic应用今天继续来翻译一篇,平时时间不多,只能零碎着来~原文链接:http://ccoenraets.github.io/ionic-tutorial/create-ionic-applic...

ionic入门教程第十八课-初识自定义指令directive oni-bar(tab-bar)

经过这么长时间的学习,我想大家都有了一定的基础了。 这节课尝试着给大家讲点更加深入的东西,能理解的就好好学学,还理解不来的朋友也没有可以当做扩展阅读看看就好。 学习切忌过于急躁。 到目前为止,我教程里...

ionic入门教程第十四课-详细说明slide-tabs的实现和优化

不少朋友对我在第十课中提到的slide-tabs比较感兴趣, http://blog.csdn.net/onil_chen/article/details/51191827第十课 问的人,要Demo...

ionic入门教程第十二课-通用模块的分离$ionicModal

本来好几个朋友跟我说,让我帮忙写防已上线APP的Demo,我正在考虑,可能后续才会开始。 我觉得我还是应该先把这些比较基础的东西讲清楚了。 十几年前的软件危机,现在依旧存在。 13年的问题16年了还是...

Ionic开发入门教程_7

实现路由  写顺手了,继续吧~   原文链接:http://ccoenraets.github.io/ionic-tutorial/angular-ui-router.html    ...

Ionic开发入门教程_2

启动Node服务继续上篇的翻译,这是一次认真翻译技术型文章,感觉还是很好的~ 原文链接:http://ccoenraets.github.io/ionic-tutorial/start-node-s...

ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合

继上节课,我已经介绍了使用$q和callback的方式,从service服务获取数据。 但是在真是的项目中,一般是用户使用控制器从服务向服务端发起数据请求,有获取的数据传递给模型,再由模型更新视图展示...

ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse

好久没有更新博客了,刚好最近对http这个服务有深入的研究,所以今天抽空给大家讲讲这个东西 ionic与服务器的交互主要有两种一种是$http,另一种是$resourse。$resourse没研究,所...

Ionic入门

ionic环境搭建 安装nodejs 在命令行,安装angular.js 安装ionic 安装ant 编译:如果出错那么采用:cordova build android – –ant。 这个网址介绍...

ionic入门之多组件开发模式

在实战中建议是用多组件开发模式,高耦合低内聚。 文件名和组件名遵循风格指南中的标准方式。 组件的类名应该是大驼峰形式,并且以Component结尾。 因此英雄详情组件的类名是HeroDetailCo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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