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. 所谓编码--泛谈ASCII、Unicode、UTF8、UTF16、UCS-2等编码格式

    最近在看nodejs的源码,看到stream的实现里面满地都是encoding,不由想起以前看过的一篇文章--在前面的随笔里面有提到过--阮一峰老师的<字符编码笔记:ASCII,Unicode和 ...

  2. C++ Primmer 学习笔记

    一.开始 (一)输入输出 1.endl的作用 endl操纵符用于结束当前行,将与设备关联的缓冲区内容刷新到设备中.如果没有这个字符,一旦程序突然崩溃,就可能导致输出还停留在缓冲区里,而不显示到设备. ...

  3. 个人作业3——个人总结（Alpha阶段)

    个人总结 Alpha阶段总结: 起初关于手机app的开发真的一无所知,选了一条较远的路走(使用 Android Studio 来开发 Android 应用更加方便,而我们选用 Eclipse 开发 A ...

  4. Quartz入门指南

    Quartz入门指南 看到官网的教程对于新手来说不够全面和连贯,因此结合自己的使用过程写下这个入门指南,用以解惑.本文基于Quartz2.2.2版本.请注意,本文为了易于上手,省略了许多重要的概念,建 ...

  5. Java学习1——JDK（学前准备）

    一.下载: 可以在http://www.oracle.com/technetwork/java/javase/downloads/index.html下载并安装Java SE(JDK) java大致版 ...

  6. 201521044091《Java程序设计》第7周学习总结

    1. 本周学习总结 ArrayList代码分析 1.1 解释ArrayList的contains源代码 用于判断Collection中是否包含某个元素.List<T>的contains方法 ...

  7. 201521123065《java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.多线程的临界资源:启动多个线程同时运行时,需要同时访问共同的资源,导致结果的不正确性: 2.原子性操作:只进行 ...

  8. 201521123035《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  9. eclipse: eclipse导入工程出现大红叹号

    总结: 问题原因:工程中classpath中指向的包路径错误 解决办法:到BUILDPATH CONFIG````中,liberaies中 出现红色叉号的包为路径错误的包.到classpath中修改相 ...

  10. 微信小程序购物车产品计价

    微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCa ...