ionic是基于angularjs的前端框架，用于实现移动app。

下面是第一段代码，先贴代码，有时间再整理：

demo1.htm

<!DOCTYPE html>

<html ng-app="app">

<head>

    <meta charset="utf-8">

    <title>ionic-demo1</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>

</head>

<body>

    <ion-nav-bar class="bar-stable"></ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script type="text/javascript">

    var app = angular.module('app',['ionic']);

    app.config(function($stateProvider, $urlRouterProvider) {

      $stateProvider

      .state('dash', {

        url: '/dash',

        templateUrl: 'dash.html',

        controller: 'DashCtrl'

      });

      $urlRouterProvider.otherwise('/dash');

    });

    app.controller('DashCtrl', function($scope) {});

    </script>

</body>

</html>

引入了ionic.bundle.js脚本后，不用引用angular.js就可以使用angular了，我开始百思不得其解，折腾老半天。。。

dash.html

<ion-view view-title="Dashboard">

  <ion-content class="padding">

    <div class="list card">

      <div class="item item-divider">Recent Updates</div>

      <div class="item item-body">

        <div>

          There is a fire in <b>sector 3</b>

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Health</div>

      <div class="item item-body">

        <div>

          You ate an apple today!

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Upcoming</div>

      <div class="item item-body">

        <div>

          You have <b>29</b> meetings on your calendar tomorrow.

        </div>

      </div>

    </div>

  </ion-content>

</ion-view>

整个示例用到了三个ionic的标签：

ion-nav-bar 页面的头部导航bar
ion-nav-view 页面的正文内容
ion-view 页面内容

我的第一段ionic代码的更多相关文章

  1. 我的第一段jQuery代码

    说起 jQuery,很多人可能觉得,不算什么,就是个js类库.而,对于我,下面这几行代码,是一个新的开始. 多年来,我一直在使用MooTools ,他面向对象,写起来结构清晰分明,都是在原生js的基础 ...

  2. 第一段nodejs代码

    步骤一.创建服务器 接下来我们使用 http.createServer() 方法创建服务器,并使用 listen 方法绑定 8888 端口. 函数通过 request, response 参数来接收和 ...

  3. 在第一段ionic示例的基础上增加底部导航

    demo2.html <!DOCTYPE html> <html ng-app="app"> <head> <meta charset=& ...

  4. 用php编写我的第一段代码：hello world

    一.php环境的搭建 在编写php前,先搭建php环境,我选择了一站式安装软件WampServer,WampServer的下载地址:http://www.wampserver.com/ WampSer ...

  5. shell编程学习笔记（一）：编写我的第一段代码

    目前在学习Shell编程,我会把我的学习笔记记录在这里.大神可以直接略过~ 嗯,第一段代码,肯定是要输出Hello World了~ 以下蓝色字体的内容为linux命令,红色字体的内容为输出的内容: # ...

  6. 一段C++代码想到的问题

    今天在学习<Unix环境高级编程>,第七章进程环境给出了一个进程的内存分布示意图,从下往上依次为“正文段->初始化数据->未初始化数据(默认初始化为0)->堆(从低地址到 ...

  7. 五个数据段之代码段、数据段、BSS、栈、堆

    继上文讲完了对内存管理的一些知识,下面笔者再对上篇文章的内容加以拓展,那么我们今天就来说一说5个数据段 五个数据段 进程(执行的程序)会占用一定数量的内存,它或是用来存放磁盘载入的程序代码,或是存放取 ...

  8. 数据段、代码段、堆栈段、BSS段的区别

    进程(执行的程序)会占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用 途 不一而不尽相同,有些内存是事先静态分配和统一回收的 ...

  9. C语言中内存分布及程序运行中(BSS段、数据段、代码段、堆栈）

      BSS段:(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配. 数据段 : ...

随机推荐

  1. Selenium之PhantomJS相关设置

    设置PhantomJS请求头 默认情况下: from selenium import webdriver import time driver = webdriver.PhantomJS() driv ...

  2. 【UOJ #104】【APIO 2014】Split the sequence

    http://uoj.ac/problem/104 此题的重点是答案只与切割的最终形态有关,与切割顺序无关. 设\(f(i,j)\)表示前\(i\)个元素切成\(j\)个能产生的最大贡献. \(f(i ...

  3. BZOJ 2938 [Poi2000]病毒（AC自动机）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2938 [题目大意] 给出一些病毒串,问是否存在不包含任何病毒串的无限长的字符串 [题解 ...

  4. [HDU5492]Find a path

    题目大意: 一个n*m的格子,每个格子上都有一个数. 你可以向下或者向右走,从(1,1)走到(n,m),问方差*(n+m-1)最小的路径是哪个? 思路: 方差*(n+m-1)就相当于给格子里每个数乘上 ...

  5. poj 3744 概率dp+矩阵快速幂

    题意:在一条布满地雷的路上,你现在的起点在1处.在N个点处布有地雷,1<=N<=10.地雷点的坐标范围:[1,100000000]. 每次前进p的概率前进一步,1-p的概率前进1-p步.问 ...

  6. l1和l2正则化的区别 - 面试错题集

    L0:计算非零个数,用于产生稀疏性,但是在实际研究中很少用,因为L0范数很难优化求解,是一个NP-hard问题,因此更多情况下我们是使用L1范数L1:计算绝对值之和,用以产生稀疏性,因为它是L0范式的 ...

  7. 最短路径：我的理解--SPFA算法

    SPFA算法 求单源最短路的SPFA算法的全称是:Shortest Path Faster Algorithm. 最短路径快速算法-SPFA算法是西南交通大学段凡丁于1994年发表的. 适用范围:给定 ...

  8. PHP生成短网地址

    思路: 1)将长网址md5生成32位签名串,分为4段, 每段8个字节; 2)对这四段循环处理, 取8个字节, 将他看成16进制串与0x3fffffff(30位1)与操作, 即超过30位的忽略处理; 3 ...

  9. 集成学习中的 stacking 以及python实现

    集成学习 Ensemble learning 中文名叫做集成学习,它并不是一个单独的机器学习算法,而是将很多的机器学习算法结合在一起,我们把组成集成学习的算法叫做“个体学习器”.在集成学习器当中,个体 ...

  10. 反向代理实现同域名下PHP和Java共存

    1.背景介绍 之前一直从事PHP开发工作,公司内业务均由PHP实现,最近由于公司架构微调,分配了几个Java项目给团队,但是由于团队对Java不熟悉,有几人对Java理解程度也是略懂,这里说的略懂,真 ...