一，下载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 10 (89) - 文件系统: 读写文本数据, 读写二进制数据, 读写流数据

    [源码下载] 背水一战 Windows 10 (89) - 文件系统: 读写文本数据, 读写二进制数据, 读写流数据 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 读写文本数 ...

  2. MyBatis 源码分析 - 缓存原理

    1.简介 在 Web 应用中,缓存是必不可少的组件.通常我们都会用 Redis 或 memcached 等缓存中间件,拦截大量奔向数据库的请求,减轻数据库压力.作为一个重要的组件,MyBatis 自然 ...

  3. vue高级组件之provide / inject

    转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...

  4. 从零开始的程序逆向之路 第一章——认识OD(Ollydbg)以及常用汇编扫盲

    作者:Crazyman_Army 原文来自:https://bbs.ichunqiu.com/thread-43041-1-1.html 0×00 序言: 1.自从上次笔者调戏完盗取文件密码大黑客后, ...

  5. Android 框架式编程 —— 起篇

    一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...

  6. Oracle 的分页查询 SQL 语句

    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. 分页查询格式: SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM T ...

  7. struts2框架学习笔记4：获取参数

    第一种参数获取方式: 编写一个前端页面,提交表单,做示例: <form action="${pageContext.request.contextPath}/Demo1Action&q ...

  8. Redis最新面试题26题（初级、中级Redis面试题）

    Redis 1级(入门基础) 1.Redis有哪些数据类型? string,list,set,sorted set(Zset),hash 2.集合和列表有什么区别? 列表是可以从两端推入.推出数据的队 ...

  9. 对于python setup.py install安装的包如何卸载

    easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...

  10. [转]KMP算法理解及java实现

    这大概是我看的最好懂的KMP算法讲解了,不过我还只弄懂了大概思想,算法实现我到时候用java实现一遍 出处:知乎 https://www.zhihu.com/question/21923021/ans ...