一，下载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. Learning WCF：Life Cycle of Service instance

    示例代码下载地址:WCFDemo1Day 概述 客户端向WCF服务发出请求后,服务端会实例化一个Service对象(实现了契约接口的对象)用来处理请求,实例化Service对象以及维护其生命周期的方式 ...

  2. Linux Ubuntu部署web环境及项目tomcat+jdk+mysql

    1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上传到服务器 或者直接通过linux命令 下在wget文件的下载地址 例如: wg ...

  3. idea集成tomcat

    1 Tomcat的使用 * Tomcat:web服务器软件 1. 下载:http://tomcat.apache.org/ 2. 安装:解压压缩包即可. * 注意:安装目录建议不要有中文和空格 3. ...

  4. react中使用vw + antd-mobile进行移动端布局

    首先create-react-app react-vw一顿简单操作生成个demo 1.cnpm run eject 暴露config文件,再cnpm run start报错 (报错...  Canno ...

  5. Mac 安装微软雅黑字体

    https://www.jianshu.com/p/d8c34fff3483 1.找一台Windows电脑,打开字体文件夹C:\Windows\Fonts. 2.搜索"Calibri.微软雅 ...

  6. 详解Android中的四大组件之一：Activity详解

    activity的生命周期 activity的四种状态 running:正在运行,处于活动状态,用户可以点击屏幕,是将activity处于栈顶的状态. paused:暂停,处于失去焦点的时候,处于pa ...

  7. kaili Linux学习推荐网站

    kaili学习推荐网站 kail中文网:http://www.kali.org.cn/forum.php?gid=67 Kali官方教材:https://kali.training/ Kali Lin ...

  8. druid的关键参数+数据库连接池运行原理

      minEvictableIdleTimeMillis :连接保持空闲而不被驱逐的最长存活时间.(默认30分钟) Destory线程中如果检测到当前连接的最后活跃时间和当前时间的差值大于minEvi ...

  9. null、undefined、typeof、instanceof

    目录 概述 null undefined typeof instanceof 概述 JavaScript(ECMAScript标准)里共有5种基本类型: undefined, null, Boolea ...

  10. [每天解决一问题系列 - 0005] WiX Burn 如何校验chained package的合法性

    问题描述: 项目中使用Wix burn打包,内部包含了多个MSI.有时候会遇到如下错误 Error 0x80091007: Failed to verify hash of payload: Setu ...