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制作的更多相关文章

  1. 一个先进的App框架:使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  2. Service系统服务(一)：安装一个KVM服务器、KVM平台构建及简单管理、virsh基本管理操作、xml配置文件的应用、为虚拟机制作快照备份、快建新虚拟机

    一.安装一个KVM服务器 目标: 本例要求准备一台 RHEL7.2 服务器,将其搭建为KVM平台,主要完成下列操作: 1> 关闭本机的SELinux保护.防火墙服务   2> 挂载RHEL ...

  3. C#简单操作app.config文件

    即将操作的app.config文件内容如下 <?xml version="1.0" encoding="utf-8"?> <configura ...

  4. Wijmo 5 + Ionic Framework之：费用跟踪 App

    Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...

  5. Mobile first! Wijmo 5 + Ionic Framework之：费用跟踪 App

    费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...

  6. ionic react-native和native开发移动app那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  7. ionic react-native和native开发移动app到底那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  8. 打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）具体解释

    为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...

  9. 构建你的第一个App

    Building Your First App 原文链接:http://developer.android.com/training/basics/firstapp/index.html 译文链接1: ...

随机推荐

  1. SNS团队第六次站立会议（2017.04.27）

    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 导入相关词库数据  研究如何存取语音.图片文件 龚晓 ...

  2. 第二次项目冲刺（Beta阶段）5.20

    1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况,心得分享以及困难分析. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #42文件分类改 ...

  3. 软件工程HW1-四则运算软件

    题目描述 程序自动生成小学四则运算题目,用户输入每道题的答案之后,将答错的题目标出并计算此次答题的正确率. 项目链接 我的项目 项目运行截图 个人软件过程 此次开发的四个步骤: 1):需求分析 2): ...

  4. Java学习10——package和import

    package和import语句 为了便于管理大型软件系统中数目众多的类,解决类的命名冲突问题,Java引入包(package)机制,提供类的多重类命名空间,使用时,import引入相应package ...

  5. #黑客攻防实战详解#[Chapter 1]

    1.1 ①配置模拟入侵环境 ②配置网络拓扑   

  6. 201521123006 《java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  7. JAVA课程设计-计算器（201521123028 李家俊）

    1.团队课程设计博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模板或任务说明 主要负责计算器图形界面 包括操作按钮,菜单项以及输出 ...

  8. 201521123031 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  9. shell脚本之流程控制

      shell脚本之流程控制 shell脚本之流程控制 条件语句 条件判断 循环语句for,while,until for循环 while循环 until循环 循环控制语句continue 循环控制语 ...

  10. lintcode.177 把排序数组转换为高度最小的二叉搜索树

    把排序数组转换为高度最小的二叉搜索树    描述 笔记 数据 评测 给一个排序数组(从小到大),将其转换为一棵高度最小的排序二叉树. 注意事项 There may exist multiple val ...