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. 团队作业8——Beta 阶段冲刺5th day

    一.当天站立式会议 二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 支付功能测试 (2)今天计划完成的工作(具体如下) 完善订单功能 (3)工作中遇到的困难(在表格中) 成员 昨天已完成的工 ...

  2. 团队作业10——beta阶段项目复审

    小组的名字和链接 优点 缺点(bug报告) 最终名次 拖鞋大队 基本功能都实现了,符合用户的需求:每次都能按时完成博客,满足题目要求,所以作业完成的也比较优秀.较alpha版本新增了查重自定义的功能, ...

  3. java201521123118《java程序设计》第3周总结

    1. 本周学习 总结初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...

  4. MinHook测试与分析(x86下 E8,E9,EB,CALL指令测试，且逆推测试微软热补丁)

    依稀记得第一次接触Hook的概念是在周伟民先生的书中-><<多任务下的数据结构与算法>>,当时觉得Hook的本质就是拦截,就算到现在也是如此认为. 本篇文章是在x86下测 ...

  5. 03_Ext_Viewport_Window_Dialog

    Viewport Viewport 代表整个浏览器窗口,直接渲染到document.body节点,取代页面中的所有内容.一般作为应用程序主界面. 随着浏览器显示区域的大小自动改变,一个页面中只能有一个 ...

  6. java 使用redis 数据库

    [TOC] java 使用redis 数据库 连接redis package com.wsc.redis.Test1; import java.util.List; import java.util. ...

  7. input type="hidden" js获取不到值（document.getelementbyid OR $(#).val()）

    <head> <input type="hidden" name="aplStatus" id="aplStatus" v ...

  8. 框架应用：Spring framework (三) - JDBC支持

    Spring框架是一个一站式的框架,也就是对很多技术和框架做了封装,使其应用更加简便. JDBC的代码过程 /STEP 1. Import required packages import java. ...

  9. 关于IOS的屏幕适配（iPhone）——Auto Layout和Size Classes

    Auto Layout和Size Classes搭配使用极大的方便了开发者,具体如何使用Auto Layout和Size Classes大家可以参考其他文章或者书籍,这里只提一点,在我们设置Size ...

  10. call()和apply()的作用

    call( )和apply( )都是为了改变某个函数运行时的上下文而存在的.换句话说是改变函数体内部this的指向 他们的区别就是call()方法接受的是若干个参数的列表,而apply()方法接受的是 ...