用 HTML、CSS 和 JavaScript 做移动应用，Ionic 是一个强大的工具。本教程将以完成一个实际的完整移动应用的过程为例，讲授 ionic 的主要特性。最终，你将很好地掌握 ionic，从而构建漂亮而功能丰富的APP。
Ionic 是基于 Angular 框架的，本教程针对熟悉 Angular 并且有一定 Web 应用开发基础的人员。如果你需要了解Angular相关知识，推荐你阅读Todd Motto的文章 《AngularJS Tutorial: A Comprehensive 10,000 Word Guide》，该文章假设读者已有NodeJS的相关知识。
在本教程中你将会学习如何构建一个股票报价应用。你可以在 这里预览完整地应用，并且可以在 gnomeontherun/ionic-definitive-guide 看到整个项目的源码。你可以通过改变浏览器的大小或者使用 Chrome 浏览器的 模拟设备特性 提前看看这个应用在移动设备上的表现。
Ionic，期盼已久的混合应用开发SDK
Ionic 是用来构建使用 HTML、CSS 和 JavaScript 开发的 混合应用 的，而不是原生语言（安卓使用Java语言，iOS可用Swift语言）。开发原生应用的时候，可以 使用带有界面组件的 SDK，比如 标签页 和 复合列表。这些都是使用移动应用熟悉的界面控件，而 Ionic 正提供了一整套控件去构建混合移动应用。
然而，Ionic绝不仅仅只是一些界面组件。它还：
- 提供强大的命令行工具去管理项目。
- 通过使用 SASS 技术，便捷地定制化用户界面。
- 由专业团队发起和维护，有强大的社区支持。
- 集成了灵活的“ ions ”结构（额外的组件和功能）。
- 包含一整套图标。
另外，Ionic 有一整个完整的服务平台来支持移动应用的开发，比如 Creator 提供了可视化拖拽/拖放设计模式，View可以发布APP预览/测试版本给大众，Push 可以十分简便的添加推送消息通知。最近，Ionic增加了 Deploy 和Analytics，目前还在内部测试阶段。你完全可以认为 Ionic 一个能够提供给 APP 开发人员完整服务功能的平台。
安装 Ionic
首先，我们需要安装 Ionic。在本教程中，我们将会在浏览器里预览，而不是在移动设备上（不过你可以根据 Ionic 开发文档 上的详细步骤，在移动设备上运行程序）。在安装Ionic之前，你的系统需要安装 Node。（注意：io.js 可能运行不正确）。在命令行终端运行以下命令：
|
1 |
$ npm install -g ionic |
这里，Node 包管理器（ NPM ）会下载并安装 Ionic 命令行工具。它是构建 Ionic 应用的基础，并且我们后面还会用来创建、预览、构建应用。现在，我们来浏览Ionic的几个主要特性。
Ionic components & services
在构建我们自己的APP之前，我们将会快速浏览Ionic的主要特性。Inoic 提供了两个主要特性：components 和 services。
Ionic Components
Components 是使用标签和 CSS 类标识的用户界面元素，比如标签页、标题栏、幻灯片、侧滑菜单等等。这些组件要么是 CSS 类（比如 CSS 框架 Bootstrap ），要么使用 Angular 指令实现。一些 CSS 组件（input、card、button）没有提供额外的功能，但是 Ionic 提供了更好的样式展现使其能在移动设备上表现的更好。指令组件（sidemenu、list、slidebox）是可以像 HTML 标签一样使用的。
|
1 2 3 4 5 6 7 8 9 10 |
<-- Card: CSS Component Example --> <div> <div>Basic card!</div> </div> <!-- SlideBox: Directive Component Example --> <ion-slide-box slide-interval="10000" does-continue="true"> <ion-slide>Slide 1</ion-slide> <ion-slide>Slide 2</ion-slide> </ion-slide-box> |
在上面的两个例子中，第一个是现在在很多 google 应用中可以看到的卡片效果。仅仅是用 CSS 类就可以将样式做出效果。第二个是一个滑动框，用指令和 HTML 标签配合实现。在侧滑框的例子中还包括了一些属性，比如slide-interval 指定了滑动框的配置（在这个例子中指定了每个滑动框展示的时间间隔）。
Services 是在 JavaScript 中声明来操作用户界面元素的，通过了 Angular 的 Service 结构来提供。通常用在控制器中，提供有显示时间限制的界面元素（比如弹出窗口、弹出对话框、进度条）。就和 Angular 的 services 一样，Ionic 的 services 全部以 $ 开头，而且在下面的例子中，你可以看到 services 都是根据功能来准确地命名。
|
1 2 3 4 5 6 7 8 |
function Controller($scope, $ionicSlideBoxDelegate) { $scope.next = function() { $ionicSlideBoxDelegate.next(); } $scope.previous = function() { $ionicSlideBoxDelegate.previous(); } } |
在这个控制器中，作用域下有两个方法使用 service 来控制滑动框（任何管理组件的 services 都叫做代理 services ）。这样开发人员就可以让任意的按钮去更改滑动框中的内容，比如下面两个按钮。
|
1 2 |
<button ng-click="next()">Next</button> <button ng-click="previous()">Previous</button> |
其他的 services 可以用来创建一个新的可视化的内容，比如加载提示框。这将在当前视图中注入需要添加的内容以创建所需的效果，在这个例子中我们添加了一个覆盖整个屏幕的加载提示信息，并在2秒钟之后自动隐藏。
|
1 2 3 4 5 6 7 8 |
function Controller($timeout, $ionicLoading) { $ionicLoading.show({ template: 'Loading' }); $timeout(function() { $ionicLoading.hide(); }, 2000); } |
现在，我们就来创建一个工程，然后动手实践这些内容。如果任何时候你想查看工程源码，都可以去 GitHub 上查看gnomeontherun/ionic-definitive-guide。
新建一个Ionic工程
Let the fun begin! The first thing is to generate a new project. The Ionic CLI we installed before will help us do this.
让我们愉快地开始吧！第一件事就是新建一个工程。我们之前安装的 Ionic 命令行工具就可以派上用场了。
|
1 2 3 |
$ ionic start stocks https://github.com/ionic-in-action/starter $ cd stocks $ ionic serve |
这个命令可以创建一个空白的叫做 stocks 的 APP 工程，基于我在我的书 《动手学习Ionic》 中创建的 starter APP 工程。这个空白的 starter APP 对于新建工程是个理想的选择。ionic serve 命令可以在浏览器中打开刚刚新建的 app，但它仅仅是一个空白的页面。不要担心，我们现在就来把它补充完整。
安装 Sass 做样式
Ionic 一个十分有用的特性就是可以使用 Sass 定制化默认组件和预制颜色。官方推荐你以同样地方式利用 Ionic 提供的变量和自动生成器写你自己的样式表。
新工程不会默认支持 Sass。运行一以下命令，可以让工程支持 Sass。
-team/">翻译组。