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之快速启程(ionic-creator & ionic-lab)[附下载地址]

前言新手使用ionic最头疼的一共两个问题,一个是如何搭建一套符合程序员美感的产品框架,一个是http请求出现的诸多问题。笔者今天试用了一下ionic creator这款产品,不得不说,除了因为网速问...
  • xuexiiphone
  • xuexiiphone
  • 2016-08-04 17:24:34
  • 7824

Ionic入门

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

Ionic+Cordova开发环境搭建

Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式。其中Ionic是一个前端框架,集成了AngularJs在里面,有很好很漂亮的UI控件。Cordova本身就是...
  • GAMEloft9
  • GAMEloft9
  • 2016-03-20 17:34:17
  • 7867

ionicframework开发入门

  • 2015年07月31日 22:08
  • 429KB
  • 下载

Ionic入门开发

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

基于Ionic+Cordova+Bmob的开源项目实战

之前在Ionic+Cordova开发环境搭建一文中讲述了Ionic+Cordova的跨平台移动开发框架。其中Cordova可以将开发的Web App打包发布到不同手机平台下,并且提供了丰富的插件来使用...
  • GAMEloft9
  • GAMEloft9
  • 2016-04-14 13:52:18
  • 4842

ionic——入门

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

IONIC开发入门手册

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

最全的前端资源教程

综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.c...
  • hcz297799265
  • hcz297799265
  • 2017-11-05 22:38:18
  • 512
收藏助手
不良信息举报
您举报文章:Ionic入门
举报原因:
原因补充:

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