ionic构建APP--简单操作实现APP制作
ionic--基于AngularJS的app框架
1安装ionic
.HBuilder创建APP项目,导入ionic的css,js(fonts)文件。
.导入ionic.css和ionic.bundle.js文件。
2使用ionic框架提供的样式进行APP制作
1.HTML代码
<body ng-app="todo"> <ion-side-menus> <!-- 中心内容 --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Ionic</h1> </ion-header-bar> <ion-content> <div class="list card"> <div class="item item-avatar"> <img src="../img/222.jpg"/> <h2>Ionic Demo</h2> <p>LJY</p> </div> <div class="item item-image"> <img src="../img/2852185939109769629.jpg"> </div> <a class="item assertive" href="#"> Try Ionic </a> </div> </ion-content> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> <div class="list"> <div class="item item-divider"> 这是左侧菜单 </div> <a class="item" href="#"> This is page1 </a> <a class="item" href="#"> This is page2 </a> <a class="item" href="#"> This is page3 </a> </div> </ion-side-menu> </ion-side-menus> <script type="text/javascript" src="../js/app.js"></script> </body>
2.js
angular.module('todo', ['ionic'])
这样就实现了简单的主页和侧边菜单的制作,更多具体ionic样式可以参考帮助文档。
ionic构建APP--简单操作实现APP制作的更多相关文章
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- Service系统服务(一):安装一个KVM服务器、KVM平台构建及简单管理、virsh基本管理操作、xml配置文件的应用、为虚拟机制作快照备份、快建新虚拟机
一.安装一个KVM服务器 目标: 本例要求准备一台 RHEL7.2 服务器,将其搭建为KVM平台,主要完成下列操作: 1> 关闭本机的SELinux保护.防火墙服务 2> 挂载RHEL ...
- C#简单操作app.config文件
即将操作的app.config文件内容如下 <?xml version="1.0" encoding="utf-8"?> <configura ...
- Wijmo 5 + Ionic Framework之:费用跟踪 App
Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...
- Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...
- ionic react-native和native开发移动app那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- ionic react-native和native开发移动app到底那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- 打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释
为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...
- 构建你的第一个App
Building Your First App 原文链接:http://developer.android.com/training/basics/firstapp/index.html 译文链接1: ...
随机推荐
- web切图的几个快捷键及总结
自由的控制视图系列 自由的浏览图片:按住空格后,鼠标拖动 自由的缩放图片:按住alt+滚轮 切换到实际像素(100%):Ctrl + 1 工作区类型切换:Tab 控制内容系列 通过画面上点选一个图 ...
- 201521123013 《Java程序设计》第5周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关多态和接口的知识点. 1.2可选 使用常规方法总结其他上课内容. 接口:不是类,不能使用new实例化,可用instanceof判断是否实现某接口.接 ...
- 201521123044 《Java程序设计》第2周作业-Java基本语法与类库
1. 本章学习总结 ·1.浮点型的不精确,不能简单的像C语言一样用float或者double来定义.在java中有更精确的BigDecimal类. 举例:BigDecimal bd1= new Big ...
- 201521123016《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 1 ...
- Java: server/client 心跳机制实现 示例
心跳机制 心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制. 大部分CS的应用需要心跳机制.心跳机制一般在Server和Client都要实现,两者实现原理 ...
- php memcache 扩展 php -m 与 phpinfo() 不同
事情起因,因要升级 openssl(openssl升级这里不表) ,所以在升级后对 php 也进行了从新编译,编译成功. 发现没有安装,memcache 扩展,从新编译安装了一下,显示的安装成功,但是 ...
- cnpack热键
CnPack的热键为ALt+space,当不自动补齐时按下Alt+space则会补齐
- mount挂载和交换分区swap
目录 mount挂载 挂载方法 选项 查看设备 卸载命令 文件挂载配置文件fstab 交换文件与分区 swap优先级 三个工具free,df,du 扩展 移动介质 使用光盘 挂载USB设备 mount ...
- Jquery一些常用的方法
整理以前的笔记,在学习JavaScript时候,经常会用到一些方法,但是有时忘掉了具体用法,因此记下.方便以后查阅. 这篇博文先说明这些方法的用途: removeClass().remove().cs ...
- java 对象的序列化与反序列化
一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...