Ionic入门

原创 2017年01月03日 18:03:04

ionic环境搭建

  1. 安装nodejs
  2. 在命令行,安装angular.js
  3. 安装ionic
  4. 安装ant
  5. 编译:如果出错那么采用:cordova build android – –ant。
    这个网址介绍的比较详细,它没有提到。http://www.runoob.com/ionic/ionic-install.html,如果出现环境问题,那么99.9999%的情况下都可以通过谷歌解决。

常用命令

早些时候,官方出了一个图形化IDE—Ionic Lab,但是因为种种原因,官方不再支持。个人认为不好用,总是出现反应不够快的bug,而且大部分的命令行其实非常简单,尤其是Ionic Creator兴起后,IDE更显得鸡肋。

ionic start myApp blank(空项目)
ionic start myApp tabs(带导航条)
ionic start myApp sidemenu(带侧滑菜单)

ionic platform add android(添加android平台)
ionic build android(编译项目apk)
ionic emulate android(运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行)
ionic run android (相当于build + emulate)
ionic serve (开启服务调试)

ionic serve –lab(在浏览器中查看ios和android应用)

Demo

由于Ionic的语法是封装的angular,其自然而然也集成了angular的MVC。

项目结构

将项目导入想要的编辑器,我这里用的sublime,在“项目”栏,点击“将文件夹添加到”,添加项目即可。项目结构如下,源代码都存储在www文件夹内,其他的文件均为系统自动生成,可以不用管。
这里写图片描述

这里写图片描述
查看www文件夹,可以看到这是一个标准的web程序结构,其中:index是入口函数,相当于android中的MaincActivity和iOS中inial launcher;css:控制样式;js:控制着逻辑;templates:则是详细的页面内容。

界面

在书写界面时有两种选择:
1.按照ionic项目的结构,在h5页面中写ionic控件
2.在Ionic Creator中用可视化的方式,构造布局,然后再导出,导出的目录是一个www的文件夹,替换项目的相应文件夹即可。

逻辑

主要由控制器控制,相信熟悉angular项目的人都不会觉得陌生。
这里写图片描述

调试

输入ionic serve,将可以实时看到代码的变动的效果,调试起来相当方便。
这里写图片描述

输入ionic serve –lab,将可以整体的效果。
这里写图片描述
这里写图片描述

测试

当你需要在真机上进行测试的时候,你可以运行ionic run android(各个平台的命令不一样,自行脑补)。然后在刚才的源代码根目录下会多出一个platform文件夹,里面分别有android和ios的安装包,拖入模拟机或者真机即可,如果没找到相应的apk或者ipa,那么多找几次。

未完待续。

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

相关文章推荐

轻松学习Ionic (一) 搭建开发环境,并创建工程(2015-10-26更新)

准备工作
  • zapzqc
  • zapzqc
  • 2014-12-08 14:09
  • 132835

20 个对开发者非常有用的 Google APIs

Google 网站有各种各样的功能,多数功能都对外提供了 API 供访问,我们可以利用这些 API 来丰富自己的网站功能,比如 Google 地图 API 可为你的网站增加了地图功能,翻译 API 可...

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

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

Ionic 入门

关于 IonicIonic 是基于 HTML5 与 AngularJs 的一个开发框架。Ionic 更多的是是基于 WebView 的开发模式,因为其本身提供了一系列的前端控件与 JS 控件。更多的详...

IONIC安装部署入门教程

这周笨小葱接收到了一个项目任务,用ionic+angularJS写一个hybrid应用程序(也就是native+html混合移动应用)。初次接触andriod还是大三时候的事了吧,当时用google的...

IONIC开发入门手册

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

各工具版本问题---node+ionic+angularjs开发webApp

node安装ionic 1、node版本无关紧要 2、主要是ionic版本(目前我测试了,ionic版本为2.2.1),用命令  ionic  start  项目名称 创建项目的话,项目是默认ioni...

04 ionic+angular开发webapp笔记(修改应用的图标和载入图片和app的名字)

修改应用的基础信息很简单,在应用的根目录找到config.xml文件 这里修改app名字 这里是app描述 这里填写作者和邮箱的...

滴滴:WebApp实践经验总结

本文为滴滴公共FE团队在WebApp方向的一些实践经验总结,主要内容包括:WebApp首页技术架构、前端工程化在WebApp的实践、通用地图JS库的设计和实践、 统一登录SDK的设计、通用客户端JSB...
  • hj7jay
  • hj7jay
  • 2016-08-19 14:41
  • 1723

ionic 开发WebApp入门

在这个技术日新月异的情况下,学习是提高个人技术能录的唯一路径,下面就ionic 的入门做以下小结。私以为还是官网的资料最为准确。       部门学习资料如下:        菜鸟教程-ionic1 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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