wonderfan的博客 | Get started with Ionic mobile

中文

杂谈 os包的功能 Amaze UI中的组件 Skeleton CSS的用武之地 SVG Introduction mysql数据库迁移 How agent and message bus work in the CloudStack platform? 剖析cloudstack中虚机的创建过程 AngularJS与LoopBack LoopBack实战 Sails使用手册在NodeJS中使用MySQL数据库在NodeJS中使用Sqlite 实战XLRD类库上下文中给模板中的变量赋值使用Pecan创建restful API 服务使用python语言操作excel文件 Magento性能调优 Celery的世界 Linux下如何快速查找文件和内容 MySQL常用资源为PHP设置服务器(Apache/Nginx)环境变量 MySQL大量数据插入各种方法性能分析与比较 Laravel中使用Redis作为队列系统的工作流程使用Supervisor来管理你的Laravel队列在Laravel中使用自己的类库三种方式用Xdebug和Sublime调试PHP代码用Laravel+Grunt+Bower管理你的应用 PHP Socket的使用 Python脚本--下载合并SAE日志 PHP命名空间及自动加载 SVN 常用资源 Shell 常用资源 Python 常用资源 PHP 常用资源 jQuery 常用资源 JavaScript 常用资源 HTML 常用资源 Git 常用资源 Linux下多个命令连续执行方法基于CSS3实现尖角面包屑部署Ceilometer到已有环境中更新前端框架到Bootstrap3 OpenStack Ceilometer数据存储与API源码解析 OpenStack Ceilometer中的Pipeline机制 OpenStack Ceilometer Compute Agent源码解读学习Python动态扩展包stevedore 学习Python的ABC模块 Python包管理工具setuptools详解 OpenStack Horizon 中文本地化安装MySQL和MongoDB的WEB管理界面给Git或者APT设置goagent代理 WSGI学习在虚拟机单机部署OpenStack Grizzly python包工具之间的关系给OpenStack创建Ubuntu镜像 OpenStack Grizzly Multihost部署文档 HTML中meta标签viewpoint的作用交互式编程-IPython 页面提速之——数据缓存给OpenStack创建Win7镜像 Ceilometer的命令行使用给OpenStack创建Windows XP镜像概念模型、逻辑模型、物理模型的区别 Bootstrap常用资源 OpenStack监控项目Ceilometer的一些术语服务器自动化部署及运维常见工具 Linux下开启Libvirtd的tcp监控 VNC和远程桌面的区别调试和修改OpenStack中的Horizon部分 win7快速打开应用程序或文件 JavaScript变量作用域 git创建远程库 MySQL远程访问 sae下的python开发部署和一个简单例子 OpenStack Nova内部机制【译】 PHP可变变量 JS中防止浏览器屏蔽window.open PHP操作Session的原理及提升安全性时的一个问题

英文

The basic content of D3 library The cmd package in Go language The http package in Go language The net package in Go language The errors package in the Go language The runtime package in Go language The code anatomy of flag package in Go language Python Guide Understand the element object in AngularJS world Spring Overview Get started with Spring Boot A glimpse of PHP Constructor Explain Angular's Directive Dive deeply into Angular JS Get started with Ionic mobile How to use jQuery mobile? How to solve the field dependency in Django Form? Python Data Visualization By pygal Get started with SVG How to use table in the markdown file The design principles and best practise of Flat-UI

读书

Good Python Books OpenStack Swift

中文/英文

一日十句

标签

PHP 12

A glimpse of PHP Constructor 为PHP设置服务器(Apache/Nginx)环境变量使用Supervisor来管理你的Laravel队列在Laravel中使用自己的类库三种方式用Xdebug和Sublime调试PHP代码用Laravel+Grunt+Bower管理你的应用 PHP Socket的使用 PHP命名空间及自动加载 PHP 常用资源页面提速之——数据缓存 PHP可变变量 PHP操作Session的原理及提升安全性时的一个问题

JavaScript 12

The basic content of D3 library Amaze UI中的组件 Understand the element object in AngularJS world Explain Angular's Directive Dive deeply into Angular JS Get started with Ionic mobile How to use jQuery mobile? Get started with SVG JavaScript 常用资源更新前端框架到Bootstrap3 JavaScript变量作用域 JS中防止浏览器屏蔽window.open

OpenStack 14

部署Ceilometer到已有环境中 OpenStack Ceilometer数据存储与API源码解析 OpenStack Ceilometer中的Pipeline机制 OpenStack Ceilometer Compute Agent源码解读 OpenStack Horizon 中文本地化在虚拟机单机部署OpenStack Grizzly 给OpenStack创建Ubuntu镜像 OpenStack Grizzly Multihost部署文档给OpenStack创建Win7镜像 Ceilometer的命令行使用给OpenStack创建Windows XP镜像 OpenStack监控项目Ceilometer的一些术语调试和修改OpenStack中的Horizon部分 OpenStack Nova内部机制【译】

Python 18

Python Guide mysql数据库迁移 How agent and message bus work in the CloudStack platform? Python Data Visualization By pygal 实战XLRD类库上下文中给模板中的变量赋值使用Pecan创建restful API 服务使用python语言操作excel文件 Celery的世界 Python脚本--下载合并SAE日志 Python 常用资源学习Python动态扩展包stevedore 学习Python的ABC模块 Python包管理工具setuptools详解 WSGI学习 python包工具之间的关系交互式编程-IPython sae下的python开发部署和一个简单例子

MySQL 4

MySQL常用资源 MySQL大量数据插入各种方法性能分析与比较安装MySQL和MongoDB的WEB管理界面 MySQL远程访问

Git 3

Git 常用资源给Git或者APT设置goagent代理 git创建远程库

Windows 1

win7快速打开应用程序或文件

Virtualization 1

VNC和远程桌面的区别

Linux 5

Linux下如何快速查找文件和内容 Linux下多个命令连续执行方法安装MySQL和MongoDB的WEB管理界面服务器自动化部署及运维常见工具 Linux下开启Libvirtd的tcp监控

Bootstrap 1

Bootstrap常用资源

Concept 1

概念模型、逻辑模型、物理模型的区别

HTML 5

SVG Introduction Get started with SVG How to use table in the markdown file HTML 常用资源 HTML中meta标签viewpoint的作用

MongoDB 1

安装MySQL和MongoDB的WEB管理界面

CSS 3

Skeleton CSS的用武之地 Get started with SVG 基于CSS3实现尖角面包屑

jQuery 1

jQuery 常用资源

Shell 1

Shell 常用资源

SVN 1

SVN 常用资源

UI 1

The design principles and best practise of Flat-UI

Laravel 4

Laravel中使用Redis作为队列系统的工作流程使用Supervisor来管理你的Laravel队列在Laravel中使用自己的类库三种方式用Laravel+Grunt+Bower管理你的应用

Nginx 1

为PHP设置服务器(Apache/Nginx)环境变量

Apache 1

为PHP设置服务器(Apache/Nginx)环境变量

Magento 1

Magento性能调优

Django 1

How to solve the field dependency in Django Form?

Java 2

Spring Overview Get started with Spring Boot

NodeJS 5

AngularJS与LoopBack LoopBack实战 Sails使用手册在NodeJS中使用MySQL数据库在NodeJS中使用Sqlite

Sails 1

Sails使用手册

CloudStack 1

剖析cloudstack中虚机的创建过程

Anatomy 2

os包的功能 The code anatomy of flag package in Go language

Go 5

The cmd package in Go language The http package in Go language The net package in Go language The errors package in the Go language The runtime package in Go language

Book 1

一日十句

分享 1

杂谈

Get started with Ionic mobile

2015年04月08日

[目录]

What is Ionic?

Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps with HTML, JavaScript, and CSS.

It’s important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.

Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future.

Quick Start

To start using ionic, you have two options: copy over the built JS and CSS files, or use the ionic tool (ionic-cli) which can be installed through npm

$ npm install -g ionic

Then, you can start a new ionic project by running:

$ ionic start myproject

Code Show

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Mobile</title>

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

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <!-- cordova script -->
    <script src="cordova.js"></script>
    
    <!-- your app's js -->
    <script src="js/config.js"></script>
    <script src="js/push.js"></script>
    <script src="js/app.js"></script>

  </head>

  <body ng-app="wonderfan">
    <ion-nav-view></ion-nav-view>
  </body>