Ionic

领先的HTML5 移动开发框架和 SDK,利用你所熟知的web 技术构建难以置信的移动应用,是AngularJS最好的朋友。

Circle CI

Issues Ready

The best place to start with Ionic is our documentation page.

Ionic currently best supports iOS 7+ and Android 4.1+.

What is Ionic?

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

Ionic GUI

We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.

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. Learn more: Where does the Ionic Framework fit in?

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: (You may need to prefix the command with sudo depending on your OS and setup.)

$ npm install -g ionic

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

$ ionic start myproject

Manual Start

  • Download the latest stable release from:
    • The release folder of this repository
    • Ionic CDN: Latest Release
    • Using bower: bower install ionic
  • Download the bleeding edge just-from-master release from:
    • Ionic CDN: Nightly Build
    • Using bower: bower install driftyco/ionic-bower#master

Once you have a release, use js/ionic.js, js/ionic-angular.js, and css/ionic.css.

For most cases, you'll need AngularJS as well. This is bundled in js/angular/ and js/angular-ui-router/.

Demos

Community

Authors

Originally created by Adam Bradley, Ben Sperry, and Max Lynch, Ionic has seen hundreds of great contributors from around the world, including Ionic Team Members Perry Govier, Mike Hartington, and Tim Lancina.

Development

  • npm install && npm install -g gulp protractor to setup
  • (if you wish to run end-to-end tests): webdriver-manager update --chrome to install the webdriver.
  • gulp or gulp build to build
  • gulp docs to generate docs (read Documentation below for how to test docs locally).
  • gulp build --release to build with minification & strip debugs
  • gulp watch to watch and rebuild on change
  • gulp karma to test one-time
  • gulp karma-watch to test and re-run on source change
  • gulp snapshot to test e2e tests locally (run gulp demos first to generate e2e tests). Be sure to run ./node_modules/.bin/webdriver-manager update --chrome to first install the chrome webdriver dependency.

Documentation

  • Documentation is generated into dist/ionic-site. To test documentation properly, follow these steps:
    1. Clone ionic-site into ./dist/ionic-site
      • git clone git@github.com:driftyco/ionic-site dist/ionic-site
    2. Start jekyll, telling it to rebuild whenever the site changes
      • cd dist/ionic-site && jekyll serve -w
    3. Go back to project root and build the docs
      • gulp docs [--doc-version=(versionName|nightly)]
    4. Open localhost:4000 and see your changes! Re-run gulp docs again whenever you change something, and jekyll will update the site

Demos / Kitchen Sink

  • The demo site is generated into dist/ionic-demo. To test the demos, follow these steps:
    1. Run gulp demos [--demo-version=(versionName|nightly)]
    2. Start an http server from dist/ionic-demo:
      • cd dist/ionic-demo && python -m SimpleHTTPServer
    3. Navigate to http://localhost:8000/{versionName|nightly} and use the demos
    4. Run gulp demos again whenever you change the demos

Commit Conventions

Pushing New Release of Ionic

  • Almost all of the logic for releasing Ionic is done on the Travis server
  • To push a new release:
    1. Update package.json version to new version
    2. Generate changelog with gulp changelog
    3. Go through the changelog, and fix any mistakes or clarify any unclear commit messages
    4. Commit package.json and CHANGELOG.md and push to master
  • Travis will detect that this commit changed the version in package.json and push out all necessary for this new release (tags, release files, site config, ...)

LICENSE

Ionic is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.

Circle CI

Issues Ready

开始学习Ionic 最好的地方就是我们的 文档页面

Ionic 当前支持最好的是 iOS 7+ 和 Android 4.1+。

Ionic是什么?

Ionic 是开源的HTML5移动端框架,用来制作令人惊叹的,跨平台的,由HTML, JavaScript, 和CSS组成的混合模式移动应用。

Ionic GUI

之所以开发Ionic是因为我们想要一个专注于构建混合模式移动应用的框架,而不是一个手机网站。我们希望这个框架在设计和性能上都是严格要求的,并且让这个框架抛弃过去,着眼未来,能够让HTML5像本地应用的体验一样。

需要强调的是 Ionic 并非是移动web应用开发框架的替代品。有很多构建web app的解决方案,比如 jQuery Mobile

在你需要支持上一代的浏览器的场景下,Ionic同样是不适用的。我们最低的兼容是 iOS 6 和Android 4.1,永远不会支持这个之前的版本,Ionic是为未来创造的框架。阅读更多: Where does the Ionic Framework fit in?

快速入门

开始使用 ionic 有两个选择:复制构建好的 JS 和 CSS 文件,或者使用 ionic 工具 (ionic-cli),可以用 npm 安装:(也许你需要在你的命令前面加上 sudo 前缀,这取决于你的系统和安装安装方式)

$ npm install -g ionic

然后你就可以运行如下命令来开始一个新的 ionic 项目:

$ ionic start myproject

手动启动

  • 使用下面的方式下载最新的 稳定 的发布版本:
    • 库的 release 文件夹
    • Ionic CDN: 最新发布版本
    • 使用 bower: bower install ionic
  • 使用下面的方式下载 bleeding edge just-from-master release
    • Ionic CDN: Nightly Build
    • 使用 bower: bower install driftyco/ionic-bower#master

一旦你下载好了一个版本,要用到 js/ionic.js, js/ionic-angular.js, 和 css/ionic.css

大多数情况下,你还需要 AngularJS ,被捆绑在 js/angular/js/angular-ui-router/ 下。

演示

社区

作者

Ionic 最先是由 Adam Bradley , Ben Sperry, 和 Max Lynch 创建的。Ionic 见证了成百上千的伟大的 贡献者 ,分布在世界各地,包括我们的团队成员 Perry Govier, Mike Hartington, 和 Tim Lancina

开发

  • npm install && npm install -g gulp protractor to setup
  • (if you wish to run end-to-end tests): webdriver-manager update --chrome to install the webdriver.
  • gulp or gulp build to build
  • gulp docs to generate docs (read Documentation below for how to test docs locally).
  • gulp build --release to build with minification & strip debugs
  • gulp watch to watch and rebuild on change
  • gulp karma to test one-time
  • gulp karma-watch to test and re-run on source change
  • gulp snapshot to test e2e tests locally (run gulp demos first to generate e2e tests). Be sure to run ./node_modules/.bin/webdriver-manager update --chrome to first install the chrome webdriver dependency.

文档

  • 文档已经生成到了 dist/ionic-site 文件夹下。想要正确测试文档,需要遵循下面的步骤:
    1. 将 ionic-site 克隆到 ./dist/ionic-site
      • git clone git@github.com:driftyco/ionic-site dist/ionic-site
    2. 启动 jekyll,告诉它只要站点改变了就重新生成。
      • cd dist/ionic-site && jekyll serve -w
    3. 回到项目的根目录,生成文档
      • gulp docs [--doc-version=(versionName|nightly)]
    4. 打开 localhost:4000 看看你的变化! 只要改变了什么就重新运行 gulp docs , jekyll 就会更新站点。

演示 / Kitchen Sink

  • The demo site is generated into dist/ionic-demo. To test the demos, follow these steps:
    1. Run gulp demos [--demo-version=(versionName|nightly)]
    2. Start an http server from dist/ionic-demo:
      • cd dist/ionic-demo && python -m SimpleHTTPServer
    3. Navigate to http://localhost:8000/{versionName|nightly} and use the demos
    4. Run gulp demos again whenever you change the demos

Commit Conventions

Pushing New Release of Ionic

  • Almost all of the logic for releasing Ionic is done on the Travis server
  • To push a new release:
    1. Update package.json version to new version
    2. Generate changelog with gulp changelog
    3. Go through the changelog, and fix any mistakes or clarify any unclear commit messages
    4. Commit package.json and CHANGELOG.md and push to master
  • Travis will detect that this commit changed the version in package.json and push out all necessary for this new release (tags, release files, site config, ...)

许可

Ionic 是在 MIT 的开放源码许可下进行授权的,详情请查看库中的 LICENSE 文件。

讨论区