一，下载ionic v1.0.1版本，下载地址为：ionic-v1.0.1.zip。

ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。

下载完如下图所示：

二，桌面上新建立文件夹，如下图所示：

三，在webApp里面新建立index.html,ionic，同时把ionic-v1文件夹中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件拖入到ionic中。如下图所示：

四，用Sublime打开webApp,同时在index.html中加入代码：

<html ng-app="ionicApp">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>菜鸟教程(runoob.com)</title>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

    <script type="text/javascript">

    angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope) {

    });

    </script>

    <style>

    body {

    cursor: url('http://www.runoob.com/static/img/finger.png'), auto;

    }

    </style>

</head>

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">

    <h1 class="title">Hello World!</h1>

    </ion-header-bar>

    <ion-content>

                <p>我的第一个 ionic 应用。</p>

    </ion-content>

    </body>

</html>

五，sublime的最终效果图，如下图所示：

六，运行代码，效果图如下图所示：

七，第一个应用程序运行成功啦。

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-安装及第一个app的更多相关文章

  1. vue.js+web storm安装及第一个vue.js

    小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...

  2. Web框架本质及第一个Django实例 Web框架

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...

  3. Conda安装及第一个py程序

    Conda安装及第一个py程序 安装Conda 下载安装 在Anaconda官网下载Anaconda 打开Conda安装程序 设置好安装目录(这个一定要记好,后边要用),比如我的目录就是 D:\Pro ...

  4. [视频解说]Java(JDK的下载安装及第一个程序执行)

    (JDK的下载安装及第一个程序执行) 内容:Java JDK 的安装以及HelloWorld 程序的执行 欢迎童鞋们前往围观 http://v.youku.com/v_show/id_XODA3Mzk ...

  5. cesium安装及第一个示例

    cesium安装及第一个示例 一.环境要求 二.浏览器要求 三.安装node.js 四.下载cesium包(地址为https://cesiumjs.org) 包括了 五.在你的项目里引入相关js与cs ...

  6. flask安装及第一个程序

    1.flask是一个轻量级的python web框架 ·1.Flask 依赖两个外部库: Jinja2 模板引擎和 Werkzeug WSGI 套件 ·2.安装: # easy_install fla ...

  7. Web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  8. Django之Web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  9. Python初学者第一天 Python安装及第一个Python程序

    Python基础: 1day: 1.Python基础: A.编程语言介绍:     a. 计算机只能理解0和1.编程即写一段按照一定规则写代码,让计算机帮你干活:     b.机器语言:最底层的语言, ...

随机推荐

  1. 项目Alpha冲刺（团队4/10）

    项目Alpha冲刺(团队4/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. Laravel在进行表单验证时，错误信息未返回

    马上要毕业了,找了现在的这家公司,压力不大,自己也比较喜欢,唯一的遗憾就是手机号莫得换了(找不到换的借口). 进入正题: 之前自己的博客(http://lxiaoke.cn)是用ThinkPHP开发的 ...

  3. 数据结构（一）： 键值对 Map

    Map基本介绍 Map 也称为:映射表/关联数组,基本思想就是键值对的关联,可以用键来查找值. Java标准的类库包含了Map的几种基本的实现,包括:HashMap,TreeMap,LinkedHas ...

  4. kubernetes集群搭建（6）：kubernetes基本使用演示

    以简单部署访问来演示kubernetes的基本使用 流程: 用户访问client应用,client应用中调用server应用,由于部署了多节点,client在访问server时应该配置server 暴 ...

  5. 谈谈我们对userAgent的看法，为什么爬虫中需要userAgent？

    首先打开浏览器,按 F12 进入控制台(Console),然后输入:navigator.userAgent,即可看到 UA.例如: 1 2 Mozilla/5.0 (Windows NT 10.0; ...

  6. 机器学习基石笔记：08 Noise and Error

    噪声:误标.对同一数据点的标注不一致.数据点信息不准确...... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f------>p(y|x),f是p的 ...

  7. UML类图中的六种关系(物理设计阶段)

    UML类图中经常会用到各种箭头和线条来表示不同类或者接口之间的关系,因此非常好的理解各个图标的含义是很有必要的. 在物理设计阶段可以通过EA工具将类图搭建好,然后直接生成物理类,这样也可以减少物理设计 ...

  8. TCP/IP 笔记 - 地址解析协议

    地址解析协议(ARP)提供了一种在IPv4地址和各种网络技术使用的硬件地址之间的映射.ARP仅用于IPv4,IPv6使用邻居发现协议,它被合并入ICMPv6.地址解析是发现两个地址之间的映射关系的过程 ...

  9. iOS开发（3）：tips提示 | 如何提示一行文字或一个图片

    我有一个需求:在点击或长按某个按钮时,显示提示,包括简单的文字提示,还有复杂一点的图片甚至是动态图的提示(可能还要加上文字),怎么实现呢? (1)文字tips 使用之前介绍的qmuikit里面的QMU ...

  10. Spring Framework简介

    作者关于此主题早期文章 Spring框架快速入门 起源 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层 ...