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. YYHS-NOIP2017SummerTraining0914-问题 A: 组合数问题

    题目描述 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1, 2, 3)三个物品中选择两个物品可以有(1, 2),(1, 3),(2, 3)这三种选择方法.根据组合数的定义 ...

  2. 【★】Web精彩实战之<智能迷宫>

    JS精彩实战之<智能迷宫>      ---宝贵编程经验分享会--- hello大家好,这里是Web云课堂,之前的一年里我们经历了Html和CSS的系统攻城,此时的你们已经是做静态(动静结 ...

  3. Jquery的同步和异步请求

    1 异步请求:    1.1 $.ajax       $.ajax({                url : 'your url',                data:{name:valu ...

  4. C语言程序设计课程设计自查表格

    课程设计自查表格 序号 项目 完成与否(完成打勾) 1 格式是否符合标准(缩进是否规范) 2 是否模块化设计(使用函数分解系统功能) 3 函数名否易懂(不得使用f1(int a1,int a2)这样的 ...

  5. 201521123001《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. 网络配置之基本网络配置（cenos6）

    目录: 关于IP的管理 Linux网卡的卸载与装载 配置网络接口 网络IP配置文件路由管理 路由管理命令 配置动态路由(简介) route的配置文件netstat命令IP命令 ip link 查看网络 ...

  7. java.lang.IllegalArgumentException: Result Maps collection already contains value for

    如果在SSM整合的时候出现以下的错误: 留意一下是不是既在Mybatis配置文件中加载了映射文件,又在Spring配置文件中使用扫描式去加载映射文件了.两者是不能够重合使用的! Caused by: ...

  8. Django中的信号及其用法

    Django中提供了"信号调度",用于在框架执行操作时解耦. 一些动作发生的时候,系统会根据信号定义的函数执行相应的操作 Django中内置的signal Model_signal ...

  9. [js学习笔记] 原型链理解

    js中只有对象,包括对象,函数,常量等. prototype 只有函数里有这个属性. 对象里可以设置这个属性,但是没这个属性的意义 prototype指向一个对象,可以添加想要的方法. 该对象里有一个 ...

  10. Java http请求和调用

    关于http get和post请求调用代码以及示例. 参考:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html http请求 ...