一，下载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. Windows 系统里面的 hosts 文件

    一.什么是hosts文件? hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DNS不同的 ...

  2. Unicode 字符串排序规则（二）：如何比较字符串

    一.UCA 简介 Unicode Collation Algorithm (UCA) 是 Unicode 规定的如何比较两个字符串大小的算法,也是事实上的标准.我们先来看下它的几个特征. 1.1 Mu ...

  3. C语言中全局结构体指针隐含的错误

    前天在嵌入式系统上,调试一个数组的全局变量时,发现该变量一直会动态变化.深入分析, 才发现该全局结构体没有申请内存,而是用了一个指针.这种情况编译器是检查不出来的,在linux 上运行会挂掉,但是在裸 ...

  4. Rip配置

    Rip配置 首先建立如图拓扑图 分别配置两台电脑的ip地址和子网掩码和网关.如图所示. 在router0上配置两个端口的IP以及子网掩码 在路由器router0上配置rip2协议.里面的no auto ...

  5. DDD实战进阶第一波(三)：开发一般业务的大健康行业直销系统（搭建支持DDD的轻量级框架二）

    了解了DDD的好处与基本的核心组件后,我们先不急着进入支持DDD思想的轻量级框架开发,也不急于直销系统需求分析和具体代码实现,我们还少一块, 那就是经典DDD的架构,只有了解了经典DDD的架构,你才能 ...

  6. php 对中文字符串的处理- 随机取出指定个数的汉字

    mb_internal_encoding("UTF-8"); $str="们以我到他会作时要动国产的一是工就年阶义发成部民可出能方进在岭骗休借了不和有大这主中人上为来分生 ...

  7. 【Java基本功】一文读懂final关键字的用法

    本文主要介绍了final关键字的基本使用方法及原理 final关键字可以修饰类.方法和引用. 修饰类,该类不能被继承.并且这个类的对象在堆中分配内存后地址不可变. 修饰方法,方法不能被子类重写. 修饰 ...

  8. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. PostgreSQL 数据类型

    数值类型 数值类型由两个字节,4字节和8字节的整数,4字节和8字节的浮点数和可选精度的小数.下表列出了可用的类型. www.yiibai.com Name Storage Size Descripti ...

  10. An Exploration of ARM TrustZone Technology

    墙外通道:https://genode.org/documentation/articles/trustzone ARM TrustZone technology has been around fo ...