Ionic 快速指南

---

---

Ionic - 概述

Ionic 是一个基于 AngularJS 和 Cordova 构建的前端 HTML 框架。根据其官方文档，Ionic 开源框架的定义如下：

Ionic 是一个HTML5 移动应用开发框架，目标是构建混合移动应用。可以将 Ionic 视为处理应用所需的所有外观和感觉以及 UI 交互的前端 UI 框架。有点像“原生的 Bootstrap”，但支持广泛的常用原生移动组件、流畅的动画和精美的设计。

Ionic 框架特性

以下是 Ionic 最重要的特性：

• AngularJS - Ionic 使用 AngularJS MVC 架构构建针对移动设备优化的丰富的单页应用。

• CSS 组件 - 这些组件具有原生外观和感觉，提供了移动应用所需的大多数元素。可以轻松覆盖组件的默认样式以适应您自己的设计。

• JavaScript 组件 - 这些组件使用 JavaScript 功能扩展 CSS 组件，以涵盖仅使用 HTML 和 CSS 无法实现的所有移动元素。

• Cordova 插件 - Apache Cordova 插件提供了使用 JavaScript 代码调用原生设备功能所需的 API。

• Ionic CLI - 这是一个由 NodeJS 提供支持的实用程序，包含用于启动、构建、运行和模拟 Ionic 应用的命令。

• Ionic View - 一个非常有用的平台，用于将您的应用上传、共享并在原生设备上进行测试。

• 许可证 - Ionic 在 MIT 许可证下发布。

Ionic 框架优势

以下是 Ionic 框架的一些最常见的优势：

• Ionic 用于混合应用开发。这意味着您可以为 IOS、Android、Windows Phone 和 Firefox OS 打包您的应用，这可以节省大量工作时间。

• 由于 Ionic 提供了具有简单布局的预生成应用设置，因此启动应用非常容易。

• 应用以非常简洁和模块化的方式构建，因此易于维护和更新。

• Ionic 开发者团队与 Google 开发者团队保持着良好的合作关系，他们正在共同努力改进框架。更新定期发布，Ionic 支持团队随时准备在需要时提供帮助。

Ionic 框架局限性

以下是 Ionic 框架的一些最重要的局限性：

• 测试可能很棘手，因为浏览器并不总是能提供有关手机环境的正确信息。设备和平台种类繁多，通常需要涵盖大多数设备和平台。

• 组合不同的原生功能可能很困难。在许多情况下，您会遇到插件兼容性问题，这会导致难以调试的构建错误。

• 混合应用往往比原生应用慢。但是，由于移动技术发展迅速，这在将来将不再是一个问题。

在下一章中，我们将了解 Ionic 开源框架的环境设置。

Ionic - 环境设置

本章将向您展示如何开始使用 Ionic 框架。下表包含开始使用 Ionic 所需的组件列表。

安装 Cordova 和 Ionic

在本教程中，我们将使用 Windows 命令提示符。相同的步骤可以应用于 OSX 终端。打开您的命令窗口以安装 Cordova 和 Ionic：

C:\Users\Username> npm install -g cordova ionic

创建应用

在 Ionic 中创建应用时，您可以从以下三个选项中选择一个开始：

• 标签应用
• 空白应用
• 侧边菜单应用

在您的命令窗口中，打开您要创建应用的文件夹，然后尝试以下选项之一。

标签应用

如果您想使用 Ionic 标签模板，则应用将使用标签菜单、页眉和一些有用的屏幕和功能构建。这是默认的 Ionic 模板。打开您的命令窗口并选择您要创建应用的位置。

C:\Users\Username> cd Desktop

此命令将更改工作目录。应用将创建在桌面上。

C:\Users\Username\Desktop> ionic start myApp tabs

Ionic Start 命令将创建一个名为 myApp 的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

现在，我们要访问刚刚创建的 myApp 文件夹。这是我们的根文件夹。

现在让我们为 Android 平台添加 Cordova 项目并安装基本的 Cordova 插件。以下代码允许我们在 Android 模拟器或设备上运行应用。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是构建应用。如果您在运行以下命令后遇到构建错误，则可能没有安装 Android SDK 及其依赖项。

C:\Users\Username\Desktop\myApp> ionic build android

安装过程的最后一步是运行您的应用，这将启动连接的移动设备，或者启动默认的模拟器（如果未连接设备）。Android 默认模拟器速度很慢，因此我建议您安装 Genymotion 或其他流行的 Android 模拟器。

C:\Users\Username\Desktop\myApp> ionic run android

这将生成以下结果，这是一个 Ionic 标签应用。

空白应用

如果您想从头开始，可以安装 Ionic 空白模板。我们将使用上面解释的相同步骤，但使用 ionic start myApp blank 而不是 ionic start myApp tabs，如下所示。

C:\Users\Username\Desktop> ionic start myApp blank

Ionic Start 命令将创建一个名为 myApp 的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

让我们像上面解释的那样为 Android 平台添加 Cordova 项目并安装基本的 Cordova 插件。

C:\Users\Username\Desktop\myApp>ionic platform add android

下一步是构建我们的应用：

C:\Users\Username\Desktop\myApp> ionic build android

最后，我们将使用以下代码启动应用：

C:\Users\Username\Desktop\myApp> ionic run android

这将生成以下结果，这是一个 Ionic 空白应用。

侧边菜单应用

您可以使用的第三个模板是侧边菜单模板。步骤与前两个模板相同；我们只需在启动应用时添加 sidemenu，如下面的代码所示。

C:\Users\Username\Desktop> ionic start myApp sidemenu

Ionic Start 命令将创建一个名为 myApp 的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

让我们使用以下代码为 Android 平台添加 Cordova 项目并安装基本的 Cordova 插件。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是使用以下代码构建我们的应用。

C:\Users\Username\Desktop\myApp> ionic build android

最后，我们将使用以下代码启动应用。

C:\Users\Username\Desktop\myApp> ionic run android

这将生成以下结果，这是一个 Ionic 侧边菜单应用。

在浏览器中测试应用

由于我们使用的是 JavaScript，因此您可以在任何 Web 浏览器中提供您的应用。这将加快您的构建过程，但您应始终在原生模拟器和设备上测试您的应用。键入以下代码以在 Web 浏览器中提供您的应用。

C:\Users\Username\Desktop\myApp> ionic serve

上述命令将在 Web 浏览器中打开您的应用。Google Chrome 提供了用于移动开发测试的设备模式功能。按 F12 访问开发者控制台。

控制台窗口左上角单击具有“切换设备模式”图标。下一步将是单击右上角的“停靠到右侧”图标。刷新页面后，您应该准备好在 Web 浏览器中进行测试。

项目文件夹结构

Ionic 为所有类型的应用创建以下目录结构。对于任何 Ionic 开发人员来说，了解每个目录和下面提到的文件的用途非常重要：

让我们快速了解上图所示的项目文件夹结构中所有可用的文件夹和文件。

• Hooks - Hooks 是可以在构建过程中触发的脚本。它们通常用于 Cordova 命令自定义和构建自动化流程。在本教程中，我们不会使用此文件夹。

• Platforms - 这是创建 Android 和 IOS 项目的文件夹。在开发过程中，您可能会遇到一些平台特定问题，这将需要这些文件，但您应始终保持这些文件完整。

• Plugins - 此文件夹包含 Cordova 插件。当您最初创建 Ionic 应用时，将安装一些插件。我们将在后续章节中向您展示如何安装 Cordova 插件。

• Resources - 此文件夹用于向您的项目添加资源，例如图标和启动画面。

• Scss − 由于Ionic核心是用Sass构建的，因此这是您的Sass文件所在的文件夹。为了简化流程，本教程将不使用Sass。我们的样式将使用CSS完成。

• www − www是Ionic开发人员的主要工作文件夹。他们大部分时间都在这里工作。Ionic为我们在'www'内部提供了默认的文件夹结构，但开发人员始终可以更改它以适应自己的需求。打开此文件夹后，您将找到以下子文件夹：

  • css文件夹，您将在其中编写CSS样式。

  • img文件夹，用于存储图像。

  • js文件夹，其中包含应用程序的主配置文件（app.js）和AngularJS组件（控制器、服务、指令）。所有JavaScript代码都将位于这些文件夹中。

  • libs文件夹，您的库将放置在此处。

  • templates文件夹，用于您的HTML文件。

  • Index.html作为应用程序的起点。

• 其他文件 − 由于这是一个初学者教程，我们只会提及一些其他重要文件及其用途。

  • .bowerrc是bower配置文件。

  • .editorconfig是编辑器配置文件。

  • .gitignore用于指示在将应用程序推送到Git存储库时应忽略应用程序的哪一部分。

  • bower.json将包含bower组件和依赖项（如果您选择使用bower包管理器）。

  • gulpfile.js用于使用gulp任务管理器创建自动化任务。

  • config.xml是Cordova配置文件。

  • package.json包含有关应用程序、其依赖项以及使用NPM包管理器安装的插件的信息。

在下一章中，我们将讨论Ionic开源框架中可用的不同颜色。

Ionic - 颜色

在我们开始使用Ionic框架中可用的实际元素之前，让我们先了解一下Ionic如何使用颜色来表示不同的元素。

Ionic颜色类

Ionic框架为我们提供了一组九种预定义的颜色类。您可以使用这些颜色，也可以用您自己的样式覆盖它们。

下表显示了Ionic提供的九种默认颜色集。在本教程中，我们将使用这些颜色为不同的Ionic元素设置样式。目前，您可以检查如下所示的所有颜色：

Ionic颜色用法

Ionic为每个元素使用不同的类。例如，标题元素将具有bar类，按钮将具有button类。为了简化用法，我们通过在颜色名称前添加元素类来使用不同的颜色。

例如，要创建蓝色标题，我们将使用bar-calm，如下所示：

<div class = "bar bar-header bar-calm">
   ...
</div>

类似地，要创建灰色按钮，我们将使用button-stable类，如下所示。

<div class = "button button-stable">
   ...
</div>

您还可以像任何其他CSS类一样使用Ionic颜色类。现在，我们将使用balanced（绿色）和energized（黄色）颜色为两个段落设置样式。

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

以上代码将生成以下屏幕：

在后续章节中，当我们使用不同的类创建不同的元素时，我们将详细讨论。

使用CSS自定义颜色

如果要使用CSS更改某些Ionic默认颜色，可以通过编辑lib/css/ionic.css文件来实现。在某些情况下，这种方法效率不高，因为每个元素（标题、按钮、页脚等）都使用自己的类进行样式设置。

因此，如果要将“light”类的颜色更改为橙色，则需要搜索使用此类的所有元素并进行更改。这在您想要更改单个元素的颜色时很有用，但对于更改所有元素的颜色来说并不实用，因为它会花费太多时间。

使用SASS自定义颜色

SASS（它是– Syntactically Awesome Style Sheet的缩写）提供了一种更简单的方法来一次更改所有元素的颜色。如果要使用SASS，请在命令窗口中打开您的项目并键入：

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

这将为您的项目设置SASS。现在，您可以通过打开scss/ionic.app.scss文件，然后在以下行之前键入以下代码来更改默认颜色– @import "www/lib/ionic/scss/ionic";

我们将balanced颜色更改为深蓝色，energized颜色更改为橙色。我们上面使用的两个段落现在是深蓝色和橙色。

$balanced: #000066 !default;
$energized: #FFA500 !default;

现在，如果您使用以下示例：

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

以上代码将生成以下屏幕：

所有使用这些类的Ionic元素都将更改为深蓝色和橙色。请注意，您不需要使用Ionic默认颜色类。您可以随时按照您想要的方式设置元素样式。

重要说明

安装SASS后，将从index.html的头部删除www/css/style.css文件。如果仍要使用它，则需要手动链接它。打开index.html，然后在头部添加以下代码。

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

Ionic - 内容

几乎每个移动应用程序都包含一些基本元素。通常，这些元素包括一个标题和一个页脚，它们将覆盖屏幕的顶部和底部。所有其他元素都将放置在这两者之间。Ionic提供ion-content元素作为容器，它将包装我们想要创建的所有其他元素。

此容器具有一些独特的特性，但由于这是一个基于JavaScript的组件，我们将在本教程的后面部分介绍它。

<div class = "bar bar-header"> 
   <h1 class = "title">Header</h1> 
</div>
 
<div class = "list"> 
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 1" /> 
   </label>
   
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 2" /> 
   </label> 
</div>

<div class = "bar bar-footer"> 
   <h1 class = "title">Footer</h1> 
</div>

Ionic - 页眉

Ionic标题栏位于屏幕顶部。它可以在顶部包含标题、图标、按钮或其他一些元素。有一些您可以使用的预定义标题类。您可以在本教程中查看所有内容。

添加标题

您可能在应用程序中使用的所有栏的主要类是bar。此类将始终应用于应用程序中的所有栏。所有bar子类都将使用前缀– bar。

如果要创建标题，则需要在主bar类之后添加bar-header。打开您的www/index.html文件，并在body标签内添加标题类。我们将标题添加到index.html body中，因为我们希望它在应用程序的每个屏幕上都可用。

由于bar-header类应用了默认（白色）样式，因此我们将在其顶部添加标题，以便您可以将其与屏幕的其余部分区分开来。

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

以上代码将生成以下屏幕：

标题颜色

如果要设置标题的样式，只需向其添加相应的颜色类即可。设置元素样式时，需要将主元素类作为前缀添加到颜色类中。由于我们正在设置标题栏的样式，因此前缀类将是bar，在本例中我们想要使用的颜色类是positive（蓝色）。

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

以上代码将生成以下屏幕：

您可以使用以下九个类中的任何一个来为应用程序标题提供您选择的颜色：

标题元素

我们可以在标题内添加其他元素。以下代码是示例，用于在标题内添加菜单按钮和主页按钮。我们还将在标题按钮的顶部添加图标。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

以上代码将生成以下屏幕：

子标题

您可以创建一个子标题，它将位于标题栏的正下方。以下示例将显示如何向您的应用程序添加标题和子标题。在这里，我们已使用“assertive”（红色）颜色类为子标题设置了样式。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

以上代码将生成以下屏幕：

当您的路由更改为应用程序屏幕中的任何一个时，您会注意到标题和子标题覆盖了一些内容，如下面的屏幕截图所示。

要解决此问题，您需要向屏幕的ion-content标签添加‘has-header’或‘has-subheader’类。打开www/templates中的一个HTML文件，并将has-subheader类添加到ion-content中。如果您的应用程序中只使用标题，则需要添加has-header类。

<ion-content class = "padding has-subheader">

以上代码将生成以下屏幕：

Ionic - 页脚

Ionic页脚位于应用程序屏幕的底部。使用页脚几乎与使用标题相同。

添加页脚

Ionic页脚的主要类是bar（与标题相同）。当您想要向屏幕添加页脚时，需要在主bar类之后向元素添加bar-footer类。由于我们希望在应用程序的每个屏幕上都使用页脚，因此我们将将其添加到index.html文件的body中。我们还将为页脚添加标题。

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

以上代码将生成以下屏幕：

页脚颜色

如果要设置页脚的样式，只需向其添加相应的颜色类即可。设置元素样式时，需要将主元素类作为前缀添加到颜色类中。由于我们正在设置页脚栏的样式，因此前缀类将是bar，在本例中我们想要使用的颜色类是assertive（红色）。

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

以上代码将生成以下屏幕：

您可以使用以下九个类中的任何一个来为应用程序页脚提供您选择的颜色：

页脚元素

页脚可以在其中包含元素。大多数时候，您需要在页脚内添加带图标的按钮。

添加的第一个按钮将始终位于左角。最后一个将放置在右侧。中间的按钮将与左侧第一个按钮相邻分组到页脚的左侧。在以下示例中，您还可以注意到我们使用icon类在按钮顶部添加图标。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

以上代码将生成以下屏幕：

如果要将按钮移到右侧，可以添加pull-right类。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

以上代码将生成以下屏幕：

Ionic - 按钮

Ionic框架中有几种类型的按钮，这些按钮具有微妙的动画效果，这在使用应用程序时进一步增强了用户体验。所有按钮类型的主要类是button。此类将始终应用于我们的按钮，并且在使用子类时我们将将其用作前缀。

块按钮

块按钮始终具有其父容器的100%宽度。它们还将应用一个小填充。您将使用button-block类添加块按钮。如果要删除填充但保留完整宽度，可以使用button-full类。

下面是一个展示这两个类用法的例子 -

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

以上代码将生成以下屏幕：

按钮大小

有两个 Ionic 类可以改变按钮的大小 -

• button-small 和

• button-large.

下面是一个展示它们用法的例子 -

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

以上代码将生成以下屏幕：

按钮颜色

如果你想为你的按钮设置样式，你只需要添加相应的颜色类即可。当你为元素设置样式时，你需要添加你的主要元素类作为颜色类的前缀。由于我们正在为页脚栏设置样式，所以前缀类将是bar，我们在这个例子中想要使用的颜色类是assertive（红色）。

<button class = "button button-assertive">
   button-assertive
</button>

以上代码将生成以下屏幕：

你可以使用以下九个类中的任意一个，为你的应用按钮提供你选择的颜色 -

按钮轮廓

如果你希望你的按钮透明，你可以应用button-outline类。使用此类的按钮将具有轮廓边框和透明背景。

要移除按钮的边框，可以使用button-clear类。下面的例子展示了如何使用这两个类。

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

以上代码将生成以下屏幕：

添加图标

当你想要向按钮添加图标时，最好的方法是使用icon类。你可以使用icon-left或icon-right将图标放置在按钮的一侧。当你有一些文本在按钮顶部时，你通常会希望将图标移动到一侧，如下所述。

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

以上代码将生成以下屏幕：

按钮栏

如果你想将几个按钮组合在一起，可以使用button-bar类。默认情况下，按钮将具有相同的大小。

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div> 

以上代码将生成以下屏幕：

Ionic - 列表

列表是任何 Web 或移动应用程序中最流行的元素之一。它们通常用于显示各种信息。它们可以与其他 HTML 元素结合使用，以创建不同的菜单、选项卡或打破纯文本文件的单调性。Ionic 框架提供了不同的列表类型，以使其使用更加方便。

创建 Ionic 列表

每个列表都是用两个元素创建的。当你想要创建一个基本列表时，你的<ul>标签需要分配list类，而你的<li>标签将使用item类。另一个有趣的事情是，你甚至不需要使用<ul>、<ol>和<li>标签来创建列表。你可以使用任何其他元素，但重要的是要适当地添加list和item类。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

以上代码将生成以下屏幕：

内嵌列表

当你需要一个列表来填充你自己的容器时，可以在你的list类之后添加list-insets。这将为它添加一些边距，并将列表大小调整为你的容器。

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

以上代码将生成以下屏幕：

项目分隔符

分隔符用于将一些元素组织成逻辑组。Ionic 为我们提供了item-divider类。同样，与所有其他 Ionic 元素一样，我们只需要在item类之后添加item-divider类即可。项目分隔符可以用作列表标题，因为默认情况下它们比其他列表项具有更强的样式。

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

以上代码将生成以下屏幕：

添加图标

我们已经向你展示了如何在按钮中添加图标。当向列表项添加图标时，你需要选择要放置它们的哪一侧。为此，有item-icon-left和item-icon-right类。如果你想在两侧都有图标，你也可以组合这两个类。最后，还有item-note类，用于向你的项目添加文本注释。

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>
   
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

以上代码将生成以下屏幕：

添加头像和缩略图

头像和缩略图是类似的。主要区别在于头像比缩略图小。这些缩略图覆盖了列表项的大部分高度，而头像则是中等大小的圆形图像。使用的类是item-avatar和item-thumbnail。你还可以选择要放置头像和缩略图的哪一侧，如下面的缩略图代码示例所示。

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

以上代码将生成以下屏幕：

Ionic - 卡片

由于移动设备的屏幕尺寸较小，卡片是在用户友好体验下显示信息的最佳元素之一。在上一章中，我们讨论了如何内嵌列表。卡片与内嵌列表非常相似，但它们提供了一些额外的阴影，可能会影响大型列表的性能。

添加卡片

可以通过向你的元素添加card类来创建一个默认卡片。卡片通常以具有item类的列表形式构成。其中一个最有用的类是item-text-wrap。当你有太多文本时，这将有所帮助，因此你希望将其包装在你的卡片内。以下示例中的第一个卡片没有分配item-text-wrap类，但第二个卡片正在使用它。

<div class = "card">
   <div class = "item">
      This is a Ionic card without item-text-wrap class.
   </div>
   
   <div class = "item item-text-wrap">
      This is a Ionic card with item-text-wrap class.
   </div>
</div>

以上代码将生成以下屏幕：

卡片标题和页脚

在上一章中，我们已经讨论了如何使用item-divider类来对列表进行分组。在使用卡片创建卡片标题时，此类非常有用。与以下代码所示相同，此类可用于页脚 -

<div class = "card list">
   <div class = "item item-divider">
      Card header
   </div>
   
   <div class = "item item-text-wrap">
      Card text...
   </div>
   
   <div class = "item item-divider">
      Card Footer
   </div>
</div>

以上代码将生成以下屏幕：

完整卡片

你可以在卡片顶部添加任何元素。在下面的示例中，我们将向你展示如何将full-image类与item-body一起使用，以在你的卡片中获得美观的窗口化图像。

<div class = "card">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h2>Card Name</h2>
   </div>

   <div class = "item item-body">
      <img class = "full-image" src = "my-image.png">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget 
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. 
      Nam tristique elit massa, quis faucibus augue finibus ac.
   </div>
</div>

以上代码将生成以下屏幕：

Ionic - 表单

Ionic 表单主要用于与用户交互和收集所需信息。本章将介绍各种文本输入表单，在我们后续的章节中，我们将解释如何使用 Ionic 框架使用其他表单元素。

使用输入表单

使用表单的最佳方法是使用list和item作为你的主要类。你的应用程序通常包含多个表单元素，因此将其组织为列表是有意义的。在下面的示例中，你可以注意到 item 元素是一个label标签。

你可以使用任何其他元素，但标签将提供点击元素的任何部分以聚焦你的文本输入的功能。你可以设置一个placeholder，它看起来与输入文本不同，并且一旦你开始输入就会隐藏。你可以在下面的示例中看到这一点。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

以上代码将生成以下屏幕：

Ionic 标签

Ionic 为你的标签提供了一些其他选项。如果你希望在输入文本时你的占位符位于左侧，可以使用input-label类。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

以上代码将生成以下屏幕：

堆叠标签

堆叠标签是另一个选项，它允许将你的标签移动到输入的顶部或底部。为了实现这一点，我们将向我们的标签元素添加item-stacked-label类，并且我们需要创建一个新元素并向其分配input-label类。如果我们希望它位于顶部，我们只需要在input标签之前添加此元素即可。这在下面的示例中显示。

请注意，span标签位于input标签之前。如果我们交换它们的位置，它将出现在屏幕上的下方。

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

以上代码将生成以下屏幕：

浮动标签

浮动标签是我们可使用的第三个选项。这些标签在我们开始输入之前将隐藏。一旦开始输入，它们将以漂亮的浮动动画出现在元素的顶部。我们可以像使用堆叠标签一样使用浮动标签。唯一的区别是这次我们将使用item-floating-label类。

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

以上代码将生成以下屏幕：

内嵌输入

在上一章中，我们讨论了如何内嵌 Ionic 元素。你还可以通过向你的 item 添加item-input-inset类以及向你的 label 添加item-input-wrapper类来内嵌输入。包装器将为你的标签添加额外的样式。

如果你在标签旁边添加了一些其他元素，标签大小将调整以适应新元素。你也可以在标签内添加元素（通常是图标）。

下面的例子展示了两个内嵌输入。第一个在标签旁边有一个按钮，第二个在标签内有一个图标。我们使用了placeholder-icon类来使图标与占位符文本具有相同的颜色。如果没有它，图标将使用标签的颜色。

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">		
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

以上代码将生成以下屏幕：

Ionic - 切换

有时用户有两个选项可用。处理这种情况的最有效方法是通过切换表单。Ionic 为我们提供了切换元素的类，这些类是动画化的并且易于实现。

使用切换

切换可以使用两个 Ionic 类来实现。首先，我们需要创建一个label，原因与我们在上一章中解释的相同，并向其分配一个toggle类。

在我们的标签内将创建。你将在下面的示例中注意到使用了另外两个 Ionic 类。track类将向我们的复选框添加背景样式，并在点击切换时添加颜色动画。handle类用于向其添加一个圆形按钮。

下面的例子展示了两个切换表单。第一个被选中，第二个没有被选中。

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

<br>

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

以上代码将生成以下屏幕：

多个切换

大多数时候，当你想在 Ionic 中添加多个相同类型的元素时，最好的方法是使用列表项。用于多个切换的类是item-toggle。下一个示例展示了如何为切换创建列表。第一个和第二个被选中。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle 1
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 2
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 3
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 4
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

以上代码将生成以下屏幕：

设置切换样式

所有 Ionic 颜色类都可以应用于切换元素。前缀将是toggle。我们将将其应用于label元素。下面的示例展示了所有应用的颜色。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle Light
      <label class = "toggle  toggle-light">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Stable
      <label class = "toggle toggle-stable">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Positive
      <label class = "toggle toggle-positive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Calm
      <label class = "toggle toggle-calm">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Balanced
      <label class = "toggle toggle-balanced">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Energized
      <label class = "toggle toggle-energized">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Assertive
      <label class = "toggle toggle-assertive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Royal
      <label class = "toggle  toggle-royal">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Dark
      <label class = "toggle toggle-dark">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

以上代码将生成以下屏幕：

Ionic - 复选框

Ionic 复选框几乎与切换相同。这两个的样式不同，但用于相同目的。

添加复选框

在创建复选框表单时，你需要向 label 和 input 元素添加checkbox类名。下面的示例展示了两个简单的复选框，一个被选中，另一个没有被选中。

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

以上代码将生成以下屏幕：

多个复选框

正如我们已经展示的那样，列表将用于多个元素。现在我们将为每个列表项使用item-checkbox类。

<ul class = "list">
   <li class = "item item-checkbox">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

以上代码将生成以下屏幕：

设置复选框样式

当你想要设置复选框的样式时，你需要应用任何具有checkbox前缀的 Ionic 颜色类。查看以下示例以了解其外观。我们将为此示例使用复选框列表。

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

以上代码将生成以下屏幕：

Ionic - 单选按钮

单选按钮是另一种表单元素，我们将在本章中介绍。单选按钮与切换和复选框表单的区别在于，使用前者时，你只能从列表中选择一个单选按钮。而后者允许你选择多个。

添加单选按钮

由于始终有多个单选按钮可供选择，所以最好的方法是创建一个列表。每当我们想要多个元素时，我们都会这样做。列表项类将是item-radio。同样，我们将为此使用label，就像我们对所有其他表单所做的那样。Input 将具有name属性。此属性将对所有你想要用作可能选择的按钮进行分组。item-content类用于清晰地显示选项。最后，我们将使用radio-icon类来添加复选标记图标，该图标将用于标记用户选择的选项。

在下面的示例中，有四个单选按钮，第二个被选中。

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

以上代码将生成以下屏幕：

多个单选按钮组

有时你想要创建多个组。这就是name属性的用途；以下示例将前两个和后两个按钮分别作为两个选项组进行分组。

我们将使用item-divider类来分隔两个组。请注意，第一组的name属性等于group1，而第二个组使用group2。

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

以上代码将生成以下屏幕：

Ionic - 范围

Ionic范围用于选择和显示某事物的级别。它将表示与最大值和最小值相关的实际值。Ionic提供了一种简单的使用范围的方法。

使用范围

范围用作内部项目元素。使用的类是range。我们将把这个类放在item类之后。这将准备一个放置范围的容器。创建容器后，我们需要添加input并将range类型分配给它以及name属性。

<div class = "item range">
   <input type = "range" name = "range1">
</div>

以上代码将生成以下屏幕：

添加图标

范围通常需要图标才能清晰地显示数据。我们只需要在范围输入前后添加图标，即可将它们放置在范围元素的两侧。

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

以上代码将生成以下屏幕：

样式范围

我们的下一个示例将向您展示如何使用Ionic颜色为范围设置样式。颜色类将使用range前缀。我们将创建一个包含九个范围的列表，并以不同的方式对其进行样式设置。

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

以上代码将生成以下屏幕：

Ionic - 选择

Ionic Select将为用户创建一个带有选择选项的简单菜单供其选择。此选择菜单在不同平台上的外观将有所不同，因为其样式由浏览器处理。

使用选择

首先，我们将创建一个label并添加item-input和item-select类。第二个类将向选择表单添加其他样式，然后我们将在其中添加input-label类，该类将用于向我们的选择元素添加名称。我们还将添加select并在其内部添加option。这是常规的HTML5选择元素。以下示例显示了具有三个选项的Ionic Select。

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>
	
   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

以上代码将生成以下屏幕：

样式选择

以下示例将向您展示如何将样式应用于选择。我们正在使用Ionic颜色创建一个包含九个样式不同的选择元素的列表。由于我们使用的是带项目的列表，因此item将是颜色类的前缀。

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

以上代码将生成以下屏幕：

Ionic - 标签

Ionic选项卡通常用于移动导航。样式针对不同的平台进行了优化。这意味着在Android设备上，选项卡将放置在屏幕顶部，而在IOS上则放置在底部。创建选项卡的方法有很多种。在本章中，我们将详细了解如何创建选项卡。

简单选项卡

可以使用tabs类创建简单的选项卡菜单。对于使用此类的内部元素，我们需要添加tab-item元素。由于选项卡通常用于导航，因此我们将对选项卡项目使用<a>标签。以下示例显示了一个包含四个选项卡的菜单。

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

以上代码将生成以下屏幕：

添加图标

Ionic提供用于向选项卡添加图标的类。如果希望选项卡仅具有图标而没有任何文本，则应在tabs类之后添加tabs-icon-only类。当然，您需要添加要显示的图标。

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

以上代码将生成以下屏幕：

您还可以将图标和文本一起添加。tabs-icon-top和tabs-icon-left是分别将图标放置在顶部或左侧的类。实现方式与上面给出的示例相同，我们只需添加一个新类和我们要使用的文本即可。以下示例显示了放置在文本上方的图标。

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

以上代码将生成以下屏幕：

条纹选项卡

可以通过在我们的选项卡周围添加一个带有tabs-striped类的容器来创建条纹选项卡。此类允许使用tabs-background和tabs-color前缀将一些Ionic颜色添加到选项卡菜单中。

在以下示例中，我们将使用tabs-background-positive（蓝色）类来设置菜单背景的样式，并使用tabs-color-light（白色）类来设置选项卡图标的样式。请注意活动第二个选项卡与其他两个非活动选项卡之间的区别。

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

以上代码将生成以下屏幕：

Ionic - 网格

使用Ionic网格系统非常简单。有两个主要类——row用于处理行，col用于处理列。

您可以选择任意数量的列或行。它们都将调整其大小以适应可用空间，尽管您可以更改此行为以满足您的需求。

注意 - 本教程中的所有示例都将对我们的网格应用边框，以便能够以易于理解的方式显示它。

简单网格

以下示例显示了如何使用col和row类。我们将创建两行。第一行将有五列，第二行将只有三列。请注意第一行和第二行中列的宽度如何不同。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

以上代码将生成以下屏幕：

列大小

有时您不想让列大小自动分配。如果是这种情况，您可以选择col前缀后跟一个数字，该数字将表示row宽度的百分比。这将仅应用于应用了特定大小的列。其他列将调整到剩余的可用空间。

在以下示例中，第一列将使用完整宽度的50%，其他列将相应调整。

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

以上代码将生成以下屏幕 -

下表显示了Ionic网格系统提供的可用百分比选项 -

列百分比类名

水平和垂直定位

列可以从左侧偏移。它对列的特定大小也适用。这次前缀将是col-offset，然后我们将使用上表中显示的相同百分比数字。以下示例显示了我们如何将两行第二列偏移25%。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

以上代码将生成以下屏幕：

您还可以垂直对齐行内的列。可以使用三个类，即 - top、center和bottom类与col前缀一起使用。以下代码显示了如何垂直放置两行前三列。

注意 - 在下面的示例中，我们在CSS中添加了“.col {height: 120px}”以向您展示列的垂直放置。

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

以上代码将生成以下屏幕：

响应式网格

Ionic网格也可用于响应式布局。有三个类可用。responsive-sm类将在视口小于横向手机时将列折叠成单行。responsive-md类将在视口小于纵向平板电脑时应用。responsive-lg类将在视口小于横向平板电脑时应用。

以下示例后的第一个图像显示了responsive-sm类在移动设备上的外观，第二个图像显示了相同的响应式网格在平板电脑上的不同外观。

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

移动网格视图

平板电脑网格视图

Ionic - 图标

Ionic提供了超过700个高级图标。还为Android和IOS提供了不同的图标集。您几乎可以找到您需要的所有内容，但如果您不想使用它们，则不必使用它们。您可以使用自己的自定义图标或任何其他图标集。您可以在这里查看所有Ionic图标。

如何使用图标？

如果要使用Ionic图标，请在页面上找到所需的图标（https://ionicons.com/）。添加Ionic元素时，始终先添加主类，然后添加所需的子类。所有图标的主类都是icon。子类是您想要的图标的名称。我们将在下面的示例中添加六个图标 -

<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>

以上代码将生成以下屏幕：

这些图标的大小可以通过Ionic CSS文件中的font-size属性更改。

.icon {
   font-size: 50px;
}

设置图标大小后，相同的代码将生成以下屏幕截图作为输出 -

默认图标

iOS 风格图标

Android风格图标

社交图标

Ionic - 内边距

Ionic 提供了一种简单的方法来为元素添加内边距。可以使用几个类，它们都会在元素的边框与其内容之间添加 **10px** 的间距。下表显示了所有可用的内边距类。

内边距类

使用内边距

当您想要为元素应用一些内边距时，您只需要分配上面表格中的一个类即可。以下示例显示了两个块按钮。第一个使用 **padding** 类，第二个没有。您会注意到第一个按钮更大，因为它应用了 **10px** 的内边距。

<div class = "button button-block padding">Padding</div>
<div class = "button button-block">No padding</div>

以上代码将生成以下屏幕：

Ionic - Javascript 动作表单

**动作表单** 是一个 Ionic 服务，它将在屏幕底部触发一个向上滑动的面板，您可以将其用于各种目的。

使用动作表单

在以下示例中，我们将向您展示如何使用 Ionic 动作表单。首先，我们将 **$ionicActionSheet** 服务注入为我们控制器的依赖项，然后我们将创建 **$scope.showActionSheet()** 函数，最后，我们将在 HTML 模板中创建一个按钮来调用我们创建的函数。

控制器代码

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
      // Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],
			
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
			
         cancel: function() {
            // add cancel code...
         },
			
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            }
				
            if(index === 1) {
               // add edit 2 code
            }
         },
			
         destructiveButtonClicked: function() {
            // add delete code..
         }
      });
   };
})

HTML 代码

<button class = "button">Action Sheet Button</button>

代码说明

当我们点击按钮时，它将触发 **$ionicActionSheet.show** 函数，并且将出现动作表单。您可以创建自己的函数，这些函数将在点击其中一个选项时被调用。**cancel** 函数将关闭面板，但您可以添加一些其他行为，这些行为将在点击取消选项之前关闭面板时被调用。

**buttonClicked** 函数是您可以编写代码以在点击其中一个编辑选项时调用的位置。我们可以使用 **index** 参数跟踪多个按钮。**destructiveButtonCLicked** 是一个函数，当点击删除选项时将触发该函数。此选项 **默认情况下为红色**。

**$ionicActionSheet.show()** 方法还有一些其他有用的参数。您可以在下表中查看所有这些参数。

显示方法选项

Ionic - Javascript 背景

当应用Ionic Backdrop时，它会覆盖屏幕的内容。它将显示在其他覆盖层（弹出窗口、加载等）下方。有两种方法可以用于管理Backdrop服务。$ionicBackdrop.retain()将在组件上应用Backdrop，而$ionicBackdrop.release()将将其移除。

使用Backdrop

以下示例展示了如何使用Backdrop。我们将$ionicBackdrop作为依赖项添加到控制器中，然后创建$scope.showBackdrop()函数，该函数将立即调用retain方法。然后，三秒后，它将调用release方法。我们使用$timeout来调用release方法，因此也需要将其作为控制器依赖项添加。

.controller('myCtrl', function($scope, $ionicBackdrop, $timeout) {
   $scope.showBackdrop = function() {
      $ionicBackdrop.retain();
		
      $timeout(function() {
         $ionicBackdrop.release();
      }, 3000);
   };
})

您会注意到在下面的图像中屏幕颜色变暗，因为应用了Backdrop。

Ionic - JavaScript 内容

几乎每个移动应用程序都包含一些基本元素。通常这些元素包括页眉和页脚，它们将覆盖屏幕的顶部和底部。所有其他元素都将放置在这两者之间。Ionic 提供了 ion-content 元素作为容器，它将包装我们想要创建的所有其他元素。

让我们考虑以下示例 -

<div class = "bar bar-header"> 
   <h1 class = "title">Header</h1> 
</div>

<div class = "list"> 
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 1" /> 
   </label>
   
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 2" /> 
   </label> 
</div>

<div class = "bar bar-footer"> 
   <h1 class = "title">Footer</h1> 
</div>

Ionic - JavaScript 表单

在本章中，我们将了解 JavaScript 表单是什么，并将学习 JavaScript 复选框、单选按钮和切换按钮是什么。

使用 ion-checkbox

让我们看看如何使用 Ionic JavaScript 复选框。首先，我们需要在 HTML 文件中创建一个ion-checkbox元素。在其中，我们将分配一个ng-model属性，该属性将连接到 Angular 的$scope。您会注意到，即使没有它也可以工作，但我们在定义模型值时使用了点。这将使我们能够始终保持子作用域和父作用域之间的链接。

这非常重要，因为它有助于避免将来可能发生的一些问题。创建元素后，我们将使用 Angular 表达式绑定其值。

<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>
<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>

<p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p>
<p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p>

接下来，我们需要在控制器内部为我们的模型分配值。我们将使用的值为false，因为我们希望从未选中复选框开始。

$scope.checkboxModel = {
   value1 : false,
   value2 : false
};

以上代码将生成以下屏幕：

现在，当我们点击复选框元素时，它将自动将其模型值更改为“true”，如下面的屏幕截图所示。

使用 ion-radio

首先，我们应该在 HTML 中创建三个ion-radio元素，并为其分配ng-model和ng-value。之后，我们将使用 Angular 表达式显示选定的值。我们将从取消选中所有三个单选元素开始，因此该值不会分配到我们的屏幕上。

<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>

<p>Radio value is: <b>{{radioModel.value}}</b></p>

以上代码将生成以下屏幕：

当我们点击第二个复选框元素时，该值将相应更改。

使用 ion-toggle

您会注意到切换按钮类似于复选框。我们将遵循与复选框相同的步骤。在 HTML 文件中，首先我们将创建ion-toggle元素，然后分配ng-model值，然后将表达式的值绑定到我们的视图。

<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>
<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>
<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>

<p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p>
<p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p>
<p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p>

接下来，我们将为控制器中的$scope.toggleModel分配值。由于切换按钮使用布尔值，因此我们将为第一个元素分配true，为其他两个元素分配false。

$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false
};

以上代码将生成以下屏幕：

现在，我们将点击第二个和第三个切换按钮，向您展示值如何从 false 更改为 true。

Ionic - JavaScript 事件

各种 Ionic 事件可用于增加与用户的交互性。下表解释了所有 Ionic 事件。

使用事件

由于所有 Ionic 事件的使用方式相同，因此我们将向您展示如何使用on-touch事件，您可以将相同的原理应用于其他事件。首先，我们将创建一个按钮并分配一个on-touch事件，该事件将调用onTouchFunction()。

<button on-touch = "onTouchFunction()" class="button">Test</button>

然后，我们将在控制器作用域中创建该函数。

$scope.onTouchFunction = function() {
   // Do something...
}

现在，当发生触摸事件时，将调用onTouchFunction()。

Ionic - JavaScript 页眉

这是 Ionic 指令，它将添加页眉栏。

使用 JavaScript 页眉

要创建 JavaScript 页眉栏，我们需要在 HTML 文件中应用ion-header-bar指令。由于默认页眉为白色，因此我们将添加title，以便它显示在白色背景上。我们将其添加到index.html文件中。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

以上代码将生成以下屏幕：

样式化页眉

就像 CSS 页眉栏一样，JavaScript 对等项也可以以类似的方式进行样式化。要应用颜色，我们需要添加一个以bar为前缀的颜色类。因此，如果我们想使用蓝色页眉，我们将添加一个bar-positive类。我们还可以通过添加align-title属性将标题移动到屏幕的一侧。此属性的值可以是center、left或right。

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

以上代码将生成以下屏幕：

添加元素

您通常希望向页眉添加一些元素。以下示例展示了如何在左侧放置一个按钮，并在ion-header-bar的右侧放置一个图标。您还可以向页眉添加其他元素。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

以上代码将生成以下屏幕：

添加子页眉

当向ion-header-bar添加bar-subheader类时，将创建子页眉。我们将添加一个bar-assertive类以将红色应用于我们的子页眉。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

以上代码将生成以下屏幕：

Ionic - JavaScript 页脚

此指令将在屏幕底部添加一个页脚栏。

使用页脚

可以通过应用ion-footer-bar类来添加 Ionic 页脚。使用它的方法与使用页眉相同。我们可以添加标题并使用align-title属性将其放置在屏幕的左侧、中央或右侧。使用前缀bar，我们可以使用 Ionic 颜色。让我们创建一个红色页脚，标题位于中央。

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

以上代码将生成以下屏幕：

添加元素

我们可以向ion-footer-bar添加按钮、图标或其他元素，并将应用其样式。让我们向页脚添加一个按钮和一个图标。

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

以上代码将生成以下屏幕 -

添加子页脚

我们向您展示了如何使用子页眉。同样，可以创建子页脚。它将位于页脚栏上方。我们只需要向ion-footer-bar元素添加一个bar-subfooter类即可。

在以下示例中，我们将添加一个子页脚到我们之前创建的页脚栏上方。

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

以上代码将生成以下屏幕：

Ionic - JavaScript 键盘

键盘是 Ionic 中的自动化功能之一。这意味着 Ionic 可以识别何时需要打开键盘。

使用键盘

开发人员在使用 Ionic 键盘时可以调整一些功能。当您希望在键盘打开时隐藏某些元素时，可以使用hide-on-keyboard-open类。为了向您展示其工作原理，我们创建了在键盘打开时需要隐藏的输入和按钮。

<label class = "item item-input">
   <input type = "text" placeholder = "Input 1">
</label>

<button class = "button button-block hide-on-keyboard-open">
   button
</button>

以上代码将生成以下屏幕：

现在，当我们点击输入字段时，键盘将自动打开，按钮将隐藏。

Ionic 的一个不错的功能是它将调整屏幕上的元素，以便在键盘打开时始终可见焦点元素。下面的图像显示了十个输入表单，最后一个为蓝色。

当我们点击蓝色表单时，Ionic 将调整我们的屏幕，以便始终可见蓝色表单。

注意 - 这仅在屏幕位于具有滚动视图的指令内时才有效。如果您从 Ionic 模板之一开始，您会注意到所有模板都使用ion-content指令作为其他屏幕元素的容器，因此始终应用滚动视图。

Ionic - JavaScript 列表

我们已经在前面的章节中讨论了 Ionic CSS 列表元素。在本章中，我们将向您展示 JavaScript 列表。它们允许我们使用一些新功能，例如滑动、拖动和删除。

使用列表

用于显示列表和项目的指令为ion-list和ion-item，如下所示。

<ion-list>
   <ion-item>
      Item 1 
   </ion-item>
	
   <ion-item>
      Item 2 
   </ion-item>
	
   <ion-item>
      Item 3  
   </ion-item>
</ion-list>

以上代码将生成以下屏幕：

删除按钮

可以通过使用ion-delete-button指令添加此按钮。您可以使用任何所需的图标类。由于我们并不总是希望显示删除按钮，因为用户可能会意外点击它并触发删除过程，因此我们可以向ion-list添加show-delete属性并将其连接到ng-model。

在以下示例中，我们将使用ion-toggle作为模型。当切换按钮打开删除时，删除按钮将出现在我们的列表项上。

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>
	
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

以上代码将生成以下屏幕：

重新排序按钮

Ionic 指令的重新排序按钮为ion-reorder-button。我们创建的元素具有一个on-reorder属性，每当用户拖动此元素时，该属性将触发控制器中的函数。

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon" 
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

以上代码将生成以下屏幕：

当我们点击右侧的图标时，我们可以拖动元素并将其移动到列表中的其他位置。

选项按钮

选项按钮是使用ion-option-button指令创建的。当列表项向左滑动时，将显示这些按钮，我们可以通过将项目元素向右滑动再次隐藏它。

您可以在以下示例中看到有两个隐藏的按钮。

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

以上代码将生成以下屏幕：

当我们将项目元素向左滑动时，文本将向左移动，按钮将出现在右侧。

其他函数

collection-repeat函数是AngularJS ng-repeat指令的更新版本。它只会在屏幕上渲染可见元素，其余元素将在您滚动时更新。当您使用大型列表时，这是一个重要的性能改进。此指令可以与item-width和item-height属性结合使用，以进一步优化列表项。

还有一些其他有用的属性可用于处理列表内的图像。item-render-buffer函数表示在可见项目之后加载的项目数。此值越高，预加载的项目就越多。force-refresh-images函数将在滚动时修复图像源的问题。这两个类都会对性能产生负面影响。

Ionic - JavaScript 加载

Ionic 加载指示器显示时会禁用用户与任何交互，并在需要时再次启用。

使用加载指示器

加载指示器在控制器内部触发。首先，我们需要将$ionicLoading注入到我们的控制器中作为依赖项。然后，我们需要调用$ionicLoading.show()方法，加载指示器就会出现。要禁用它，可以使用$ionicLoading.hide()方法。

控制器

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTML 代码

<button class = "button button-block" ng-click = "showLoading()"></button>

当用户点击按钮时，加载指示器将出现。通常，您希望在一些耗时操作完成后隐藏加载指示器。

在使用加载指示器时，还可以使用一些其他可选参数。下表显示了这些参数的说明。

加载指示器选项参数

加载指示器配置

Ionic 配置用于配置您希望在整个应用程序中的所有$ionicLoading服务中使用的选项。

可以通过使用$ionicLoadingConfig来实现。由于常量应该添加到主应用程序模块中，因此打开您的app.js文件并在模块声明后添加您的常量。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

以上代码将生成以下屏幕：

Ionic - Javascript 模态框

当 Ionic 模态框被激活时，内容窗格将显示在常规内容的顶部。模态框基本上是一个功能更强大的弹出窗口。默认情况下，模态框会覆盖整个屏幕，但您可以根据需要对其进行优化。

使用模态框

在 Ionic 中实现模态框有两种方法。一种方法是添加单独的模板，另一种方法是在常规 HTML 文件的script标签内添加它。首先，我们需要使用 Angular 依赖项注入将我们的模态框连接到我们的控制器。然后，我们需要创建一个模态框。我们将传递作用域并为我们的模态框添加动画。

之后，我们将创建用于打开、关闭和销毁模态框的函数。最后两个函数放置在可以编写代码的位置，这些代码将在模态框隐藏或移除时触发。如果您不想在模态框移除或隐藏时触发任何功能，您可以删除最后两个函数。

控制器代码

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 代码

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

我们在上一个示例中展示的方法是在某个现有的 HTML 文件中使用script标签作为模态框的容器。

第二种方法是在templates文件夹内创建一个新的模板文件。我们将使用与上一个示例相同的代码，但我们将移除script标签，并且还需要更改控制器中的fromTemplateUrl以将模态框与新创建的模板连接。

控制器代码

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 代码

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

使用 Ionic 模态框的第三种方法是内联插入 HTML。我们将使用fromTemplate函数而不是fromTemplateUrl。

控制器代码

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

所有三个示例都将具有相同的效果。我们将创建一个按钮来触发$ionicModal.show()以打开模态框。

HTML 代码

<button class = "button" ng-click = "openModal()"></button>

当我们打开模态框时，它将包含一个用于关闭它的按钮。我们在 HTML 模板中创建了这个按钮。

模态框优化还有其他选项。我们已经展示了如何使用scope和animation。下表显示了其他选项。

Ionic - Javascript 导航

导航是每个应用程序的核心组件之一。Ionic 使用AngularJS UI Router来处理导航。

使用导航

导航可以在app.js文件中配置。如果您使用的是 Ionic 模板之一，您会注意到$stateProvider服务被注入到应用程序的config中。在以下示例中展示了创建应用程序状态的最简单方法。

$stateProvider服务将扫描 URL，找到相应的 state 并加载我们在app.config中定义的文件。

app.js 代码

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

该 state 将加载到ion-nav-view元素中，该元素可以放置在index.html的 body 中。

index.html 代码

<ion-nav-view></ion-nav-view>

当我们在上述示例中创建 state 时，我们使用了templateUrl，因此当 state 加载时，它将搜索匹配的模板文件。现在，我们将打开templates文件夹并创建一个新的文件state1.html，当应用程序 URL 更改为/state1时，该文件将被加载。

state1.html 代码

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

创建导航菜单

您可以通过在index.html的 body 中添加“ion-nav-bar”元素来向您的应用程序添加导航栏。在导航栏内，我们将添加带有图标的ion-nav-back-button。这将用于返回到上一个 state。当 state 更改时，该按钮将自动出现。我们将分配goBack()函数，该函数将使用$ionicHistory服务来处理此功能。因此，当用户离开 home state 并转到state1时，后退按钮将出现，如果用户想要返回到 home state，则可以点击它。

index.html 代码

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

控制器代码

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}  

添加导航元素

可以使用ion-nav-buttons向导航栏添加按钮。此元素应放置在ion-nav-bar或ion-view内。我们可以使用四个选项值分配side属性。primary和secondary值将根据使用的平台放置按钮。有时您希望按钮位于一侧，无论它是 iOS 还是 Android。如果是这种情况，您可以使用left或right属性代替。

我们还可以将ion-nav-title添加到导航栏。所有代码都将放置在index.html的 body 中，因此它可以在任何地方使用。

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
	
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

它将生成以下屏幕 -

其他导航属性

下表显示了一些其他功能，这些功能可以与 Ionic 导航一起使用。

导航属性

缓存

Ionic 能够缓存多达十个视图以提高性能。它还提供了一种手动处理缓存的方法。由于只有向后的视图被缓存，而向前的视图在用户每次访问时都会加载，因此我们可以通过使用以下代码轻松地设置缓存向前的视图。

$ionicCinfigProvider.views.forwardCache(true);

我们还可以设置应缓存多少个 state。如果我们希望缓存三个视图，我们可以使用以下代码。

$ionicConfigProvider.views.maxCache(3);

可以在$stateProvider内或通过设置ion-view的属性来禁用缓存。这两个示例如下所示。

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

控制导航栏

我们可以使用$ionicNavBarDelegate服务来控制导航栏的行为。此服务需要注入到我们的控制器中。

HTML 代码

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

控制器代码

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

$ionicNavBarDelegate服务还有其他有用的方法。以下表格列出了一些这些方法。

用于 $ionicNavBarDelegate 的方法

跟踪历史记录

您可以使用$ionicHistory服务跟踪上一个、当前和下一个视图的历史记录。下表显示了此服务的所有方法。

用于 $ionicHistory 的方法

nextViewOptions()方法有以下三个选项可用。

• disableAnimate用于禁用下一个视图更改的动画。

• disableBack将把后退视图设置为 null。

• historyRoot将把下一个视图设置为根视图。

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});

Ionic - Javascript 弹出框

这是一种显示在常规视图上方的视图。

使用弹出框

可以使用ion-popover-view元素创建弹出框。此元素应添加到 HTML 模板中，并且$ionicPopover服务需要注入到控制器中。

添加弹出框有三种方法。第一种是fromTemplate方法，它允许使用内联模板。第二种和第三种添加弹出框的方法是使用fromTemplateUrl方法。

让我们了解一下fromtemplate方法，如下所述。

Fromtemplate 方法的控制器代码

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

如上所述，添加弹出框的第二种和第三种方法是使用fromTemplateUrl方法。除了fromTemplateUrl的值之外，这两种方法的控制器代码将相同。

如果 HTML 添加到现有的模板中，则 URL 将为popover.html。如果我们想将 HTML 放置到 templates 文件夹中，则 URL 将更改为templates/popover.html。

以下解释了这两个示例。

用于 fromTemplateUrl 的控制器代码

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popover.html', {
      scope: $scope
   }).then(function(popover) {
      $scope.popover = popover;
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

现在，我们将带有模板的script添加到我们用于调用弹出框函数的 HTML 文件中。

来自现有 HTML 文件的 HTML 代码

<script id = "popover.html" type = "text/ng-template">
   <ion-popover-view>
	
      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>
		
      <ion-content>
         Popover Content!
      </ion-content>
		
   </ion-popover-view>
</script>

如果我们想创建一个 HTML 作为单独的文件，我们可以在templates文件夹中创建一个新的 HTML 文件，并使用与上述示例中相同的代码，但不包括script标签。

新创建的 HTML 文件如下所示。

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

最后，我们需要创建一个按钮，点击该按钮以显示弹出框。

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

无论我们选择上述示例中的哪种方法，输出始终相同。

下表显示了可以使用的$ionicPopover方法。

Ionic - JavaScript 弹出框

此服务用于在常规视图之上创建弹出窗口，用于与用户交互。弹出框有四种类型：show、confirm、alert 和 prompt。

使用 Show 弹出框

此弹出框是最复杂的。要触发弹出框，我们需要将 $ionicPopup 服务注入到我们的控制器中，然后添加一个方法来触发我们想要使用的弹出框，在本例中为 $ionicPopup.show()。onTap(e) 函数可用于添加 e.preventDefault() 方法，如果输入内容没有更改，则此方法将使弹出框保持打开状态。关闭弹出框时，将解析 Promise 对象。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}
    
      // Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,
			
         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {
						
                  if (!$scope.data.model) {
                     //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });    
   };
})

HTML 代码

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

您可能在上述示例中注意到使用了一些新的选项。下表将解释所有这些选项及其用例。

Show 弹出框选项

使用 Confirm 弹出框

Confirm 弹出框是 Ionic 弹出框的简化版本。它包含“取消”和“确定”按钮，用户可以按下这些按钮来触发相应的函数。它返回一个 Promise 对象，当按下其中一个按钮时解析该对象。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
	   var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
	};
})

HTML 代码

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

下表解释了可用于此弹出框的选项。

Confirm 弹出框选项

使用 Alert 弹出框

Alert 是一个简单的弹出框，用于向用户显示警报信息。它只有一个按钮，用于关闭弹出框并解析弹出框的 Promise 对象。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };
})

HTML 代码

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

它将生成以下屏幕 -

下表显示了可用于 Alert 弹出框的选项。

Alert 弹出框选项

使用 Prompt 弹出框

可以使用 Ionic 创建的最后一个 Ionic 弹出框是 prompt。它有一个“确定”按钮，该按钮使用输入框中的值解析 Promise，还有一个“取消”按钮，该按钮使用 undefined 值解析 Promise。

控制器代码

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });
        
      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTML 代码

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

它将生成以下屏幕 -

下表显示了可用于 Prompt 弹出框的选项。

Prompt 弹出框选项

Ionic - JavaScript 滚动

用于在 Ionic 应用中进行滚动操作的元素称为 ion-scroll。

使用滚动

以下代码片段将创建可滚动容器并调整滚动模式。首先，我们将创建 HTML 元素并向其添加属性。我们将添加 → direction = "xy" 以允许向各个方向滚动。我们还将设置滚动元素的宽度和高度。

HTML 代码

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

接下来，我们将世界地图的图像添加到我们创建的 ion-scroll 内部的 div 元素中，并设置其宽度和高度。

CSS 代码

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

运行应用后，我们可以向各个方向滚动地图。以下示例显示了地图的北美部分。

我们可以将此地图滚动到任何我们想要的部分。让我们滚动它以显示亚洲。

还有其他属性可以应用于 ion-scroll。您可以在下表中查看它们。

滚动属性

无限滚动

无限滚动用于在滚动超过页面底部时触发某些行为。以下示例显示了它是如何工作的。在我们的控制器中，我们创建了一个函数来向列表中添加项目。当滚动超过加载的最后一个元素的 10% 时，将添加这些项目。这将持续到我们加载 30 个元素为止。每次加载完成后，on-infinite 将广播 scroll.infiniteScrollComplete 事件。

HTML 代码

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

控制器代码

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }
   
      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

其他属性也可以与 ion-infinite-scroll 一起使用。其中一些列在下表中。

滚动属性

滚动代理

Ionic 提供代理来完全控制滚动元素。可以通过将 $ionicScrollDelegate 服务注入到控制器中，然后使用它提供的函数来使用它。

以下示例显示了一个包含 20 个对象的滚动列表。

HTML 代码

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

控制器代码

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {
      $ionicScrollDelegate.scrollTop();
   };
})   

以上代码将生成以下屏幕：

当我们点击按钮时，滚动将移动到顶部。

现在，我们将介绍所有 $ionicScrollDelegate 函数。

代理函数

Ionic - JavaScript 侧边菜单

侧边菜单是 Ionic 最常用的组件之一。可以通过向左或向右滑动或触发为此目的创建的按钮来打开侧边菜单。

使用侧边菜单

我们需要的第一个元素是 ion-side-menus。此元素用于将侧边菜单连接到将使用它的所有屏幕。ion-side-menu-content 元素是放置内容的位置，ion-side-menu 元素是我们可以放置 side 指令的位置。我们将侧边菜单添加到 index.html 中，并将 ion-nav-view 放置在侧边菜单内容内。这样，侧边菜单就可以在整个应用中使用。

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

现在，我们将创建一个带有 menu-toggle = "left" 指令的按钮。此按钮通常放置在应用的标题栏中，但为了更好地理解，我们将其添加到模板文件中。

当点击按钮或向右滑动时，侧边菜单将打开。您还可以设置 menu-close 指令，如果您只想使用一个按钮来关闭侧边菜单，但我们将使用切换按钮来实现此目的。

HTML 模板

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

以上代码将生成以下屏幕：

您可以向 ion-side-menus 元素添加一些其他属性。可以将 enable-menu-with-back-views 设置为 false 以禁用显示后退按钮时的侧边菜单。这也会隐藏标题中的 menu-toggle 按钮。另一个属性是 delegate-handle，它将用于与 $ionicSideMenuDelegate 连接。

ion-side-menu-content 元素可以使用它自己的属性。当 drag-content 属性设置为 false 时，它将禁用通过滑动内容屏幕打开侧边菜单的功能。edge-drag-threshold 属性的默认值为 25。这意味着仅允许从屏幕左右边缘 25 像素处进行滑动。我们可以更改此数字值，也可以将其设置为 false 以启用在整个屏幕上滑动或设置为 true 以禁用它。

ion-side-menu 可以使用我们在上面示例中展示的 side 属性。它将确定菜单应该从左侧还是右侧出现。‘is-enabled’ 属性的值为 false 将禁用侧边菜单，而 width 属性的值是一个数字，表示侧边菜单的宽度。默认值为 275。

侧边菜单委托

$ionicSideMenuDelegate 是一种用于控制应用程序中所有侧边菜单的服务。我们将向您展示如何使用它，然后我们将介绍所有可用的选项。与所有 Ionic 服务一样，我们需要将其作为依赖项添加到我们的控制器中，然后在控制器的作用域内使用它。现在，当我们点击按钮时，所有侧边菜单都将打开。

控制器代码

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTML 代码

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

下表显示了 $ionicScrollDelegate 方法。

代理函数

Ionic - JavaScript 滑动框

滑动框包含可以通过滑动内容屏幕更改的页面。

使用滑动框

滑动框的使用很简单。您只需将 ion-slide-box 作为容器，并将带有 box 类的 ion-slide 添加到该容器内即可。我们将为我们的框添加高度和边框以提高可见性。

HTML 代码

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

输出将如下面的屏幕截图所示 -

我们可以通过将内容拖动到右侧来更改框。我们还可以向左拖动以显示上一个框。

下表列出了可用于控制滑动框行为的一些属性。

代理函数

滑动框委托

$ionicSlideBoxDelegate 是一种用于控制所有滑动框的服务。我们需要将其注入到控制器中。

控制器代码

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

HTML 代码

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

下表显示了 $ionicSlideBoxDelegate 方法。

代理函数

Ionic - Javascript 标签

标签对于任何导航类型或在应用程序内选择不同的页面都是一个有用的模式。相同的标签将出现在 Android 设备的屏幕顶部，在 IOS 设备的屏幕底部。

使用标签

可以通过使用 ion-tabs 作为容器元素和 ion-tab 作为内容元素将标签添加到应用程序中。我们将将其添加到 index.html 中，但您可以将其添加到应用程序中的任何 HTML 文件中。只需确保不要将其添加到 ion-content 内部，以避免由此带来的 CSS 问题。

index.html 代码

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

输出将如下面的屏幕截图所示。

ion-tab 元素提供了可用的 API。您可以将其添加为属性，如上面示例所示，我们在其中使用了 title、icon-on 和 icon-off。后两者用于区分选定的标签与其余标签。如果您查看上面的图片，您可以看到第一个标签被选中。您可以在下表中查看其余属性。

标签属性

标签也有自己的委托服务，以便更轻松地控制应用程序中的所有标签。它可以注入到控制器中，并且有几个方法，如下表所示。

代理函数

Ionic - Cordova 集成

Cordova 提供了 ngCordova，这是一组专门设计用于与 AngularJS 配合使用的包装器。

安装 ngCordova

当您启动 Ionic 应用程序时，您会注意到它正在使用 bower。它可以用于管理 ngCordova 插件。如果您已安装 bower，请跳过此步骤；如果您没有安装 bower，则可以在命令提示符窗口中安装它。

C:\Users\Username\Desktop\MyApp> npm install -g bower

现在我们需要安装 ngCordova。在命令提示符窗口中打开您的应用程序。以下示例用于位于桌面上并命名为 MyApp 的应用程序。

C:\Users\Username\Desktop\MyApp> bower install ngCordova

接下来，我们需要将 ngCordova 包含到我们的应用程序中。打开 index.html 文件并添加以下脚本。在 cordova.js 之前和 ionic 脚本之后添加这些脚本非常重要。

<script src = "lib/ngCordova/dist/ng-cordova.js"></script>

现在，我们需要将 ngCordova 注入为 Angular 依赖项。打开您的 app.js 文件并将 ngCordova 添加到 Angular 模块中。如果您使用过 Ionic 模板应用程序之一，您会注意到其中注入了 ionic、控制器和服务。在这种情况下，您只需在数组的末尾添加 ngCordova。

angular.module('myApp', ['ngCordova'])

您可以随时通过键入以下命令来检查已安装的插件。

C:\Users\Username\Desktop\MyApp> cordova plugins ls

现在，我们可以使用 Cordova 插件了。您可以查看所有其他插件此处。

Ionic - Cordova AdMob

Cordova AdMob 插件用于本地集成广告。我们将在本章中使用 admobpro 插件，因为 admob 已弃用。

使用 AdMob

要在您的应用程序中使用广告，您需要注册 AdMob 并创建一个横幅广告。执行此操作时，您将获得一个 广告发布者 ID。由于这些步骤不是 Ionic 框架的一部分，因此我们在此处不会进行解释。您可以按照 Google 支持团队的步骤操作此处。

您还需要安装 Android 或 iOS 平台，因为 Cordova 插件仅在原生平台上有效。我们已经在环境设置章节中讨论了如何在我们的环境中执行此操作。

可以在命令提示符窗口中安装 AdMob 插件。

C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro

现在我们已经安装了插件，我们需要在能够使用它之前检查设备是否已准备好。这就是为什么我们需要在 app.js 中的 $ionicPlatform.ready 函数中添加以下代码的原因。

if( ionic.Platform.isAndroid() )  { 
   admobid = { // for Android
      banner: 'ca-app-pub-xxx/xxx' // Change this to your Ad Unit Id for banner...
   };

   if(AdMob) 
      AdMob.createBanner( {
         adId:admobid.banner, 
         position:AdMob.AD_POSITION.BOTTOM_CENTER, 
         autoShow:true
      } );
}

输出将如下面的屏幕截图所示。

相同的代码可以应用于 iOS 或 Windows Phone。您只需对这些平台使用不同的 ID。除了横幅广告外，您还可以使用覆盖整个屏幕的插页式广告。

AdMob 方法

下表显示了可与 admob 一起使用的函数。

AdMob 事件

下表显示了可与 admob 一起使用的事件。

您可以按照以下示例处理这些事件。

document.addEventListener('onAdLoaded', function(e){
   // Handle the event...
});

Ionic - Cordova 相机

Cordova 相机插件使用 原生相机拍摄照片或从图片库获取图片。

使用相机

在命令提示符中打开您的项目根文件夹，然后使用以下命令下载并安装 Cordova 相机插件。

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

现在，我们将创建一个用于使用相机插件的服务。我们将使用 AngularJS 工厂和需要注入到工厂中的 Promise 对象 $q。

services.js 代码

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

要在应用程序中使用此服务，我们需要将其作为依赖项注入到控制器中。Cordova 相机 API 提供了 getPicture 方法，该方法用于使用原生相机拍摄照片。

可以通过向takePicture函数传递options参数来进一步自定义原生相机设置。将上述代码示例复制到您的控制器中以触发此行为。它将打开相机应用程序，并使用图像数据返回成功回调函数，或使用错误消息返回错误回调函数。我们还需要两个按钮来调用我们即将创建的函数，并且需要在屏幕上显示图像。

HTML 代码

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

控制器代码

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) {
      var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 1
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

输出将如下面的屏幕截图所示。

如果要使用图库中的图像，则只需更改options参数中的sourceType方法即可。此更改将打开一个对话框弹出窗口，而不是相机，并允许您从设备中选择所需的图像。

您可以看到以下代码，其中sourceType选项更改为0。现在，当您点击第二个按钮时，它将打开设备的文件菜单。

控制器代码

.controller('MyCtrl', function($scope, Camera) {
   $scope.getPicture = function (options) {
	   var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };  
})

输出将如下面的屏幕截图所示。

保存拍摄的图像后，它将显示在屏幕上。您可以根据需要对其进行样式设置。

还可以使用其他一些选项，其中一些在以下表格中给出。

Ionic - Cordova Facebook

此插件用于连接到 Facebook API。在开始集成 Facebook 之前，您需要创建一个 Facebook 应用此处。您将创建一个 Web 应用，然后跳过快速入门屏幕。然后，您需要在设置页面上添加网站平台。在开发过程中，您可以使用以下代码段作为站点 URL。

https://:8100/

之后，您需要在设置/高级页面上添加有效的 OAuth 重定向 URI。只需复制以下两个 URL。

https://#/connect/login_success.html
https://:8100/oauthcallback.html

安装 Facebook 插件

我们执行了上述所有步骤来解决使用此插件时经常出现的一些问题。此插件难以设置，因为涉及许多步骤，并且文档未涵盖所有步骤。它与其他 Cordova 插件也存在一些已知的兼容性问题，因此我们将在我们的应用程序中使用Teleric 验证插件版本。我们将首先从命令提示符安装浏览器平台到我们的应用程序。

C:\Users\Username\Desktop\MyApp>ionic platform add browser

接下来，我们需要做的是在index.html中body标签的顶部添加root元素。

index.html

<div id = "fb-root"></div>

现在，我们将 Cordova Facebook 插件添加到我们的应用程序。您需要将APP_ID和APP_NAME更改为与之前创建的 Facebook 应用匹配。

C:\Users\Username\Desktop\MyApp>cordova -d plugin add 
   https://github.com/Telerik-Verified-Plugins/Facebook/ 
   --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

现在打开index.html并在您的body标签后添加以下代码。您需要再次确保appId和version与您创建的 Facebook 应用匹配。这将确保 Facebook SDK 异步加载，而不会阻塞应用程序的其余部分。

index.html

<script>
   window.fbAsyncInit = function() {
      FB.init({
         appId      : '123456789',
         xfbml      : true,
         version    : 'v2.4'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//#/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Angular 服务

由于我们安装了所有内容，因此我们需要创建一个服务，该服务将成为我们与 Facebook 的连接。这些事情可以在控制器中用更少的代码完成，但我们尝试遵循最佳实践，因此我们将使用 Angular 服务。以下代码显示了整个服务。我们稍后将对其进行解释。

services.js

.service('Auth', function($q, $ionicLoading) {
   this.getLoginStatus = function() {
      var defer = $q.defer();
      
      FB.getLoginStatus(function(response) {
		   if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in");
         }
      });

      return defer.promise;
   }
   this.loginFacebook = function() {
      var defer = $q.defer();

      FB.login(function(response) {
		   if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in!");
         }
      });

      return defer.promise;
   }
   this.logoutFacebook = function() {
      var defer = $q.defer();

      FB.logout(function(response) {
         console.log('You are logged out!');
      });

      return defer.promise;
   }
   this.getFacebookApi = function() {
      var defer = $q.defer();

      FB.api("me/?fields = id,email", [], function(response) {
		
         if (response.error) {
            console.log(JSON.stringify(response.error));
         } else {
            console.log(JSON.stringify(response));
         }
      });

      return defer.promise;
   }
});

在上面的服务中，我们创建了四个函数。前三个不言自明。第四个函数用于连接到 Facebook 图形 API。它将返回 Facebook 用户的id和email。

我们正在创建promise 对象来处理异步 JavaScript 函数。现在我们需要编写我们的控制器来调用这些函数。为了更好地理解，我们将分别调用每个函数，但您可能需要将其中一些函数混合在一起以获得所需的效果。

控制器代码

.controller('MyCtrl', function($scope, Auth, $ionicLoading) {
   
   $scope.checkLoginStatus = function() {
      getLoginUserStatus();
   }

   $scope.loginFacebook = function(userData) {
      loginFacebookUser();
   };

   $scope.facebookAPI = function() {
      getFacebookUserApi();
   }

   $scope.logoutFacebook = function() {
      logoutFacebookUser();
   };

   function loginFacebookUser() {
      return Auth.loginFacebook();
   }

   function logoutFacebookUser() {
      return Auth.logoutFacebook();
   }

   function getFacebookUserApi() {
      return Auth.getFacebookApi();
   }

   function getLoginUserStatus() {
      return Auth.getLoginStatus();
   }
})

您可能想知道为什么我们没有直接从函数表达式（前四个函数）返回Auth服务。这样做的原因是，您可能希望在返回Auth函数后添加更多行为。您可能会将一些数据发送到您的数据库，在登录后更改路由等。这可以通过使用 JavaScriptthen()方法来处理所有异步操作（而不是回调）来轻松完成。

现在我们需要允许用户与应用程序交互。我们的 HTML 将包含四个按钮来调用我们创建的四个函数。

HTML 代码

<button class = "button" ng-click = "loginFacebook()">LOG IN</button>
<button class = "button" ng-click = "logoutFacebook()">LOG OUT</button>
<button class = "button" ng-click = "checkLoginStatus()">CHECK</button>
<button class = "button" ng-click = "facebookAPI()">API</button>

当用户点击登录按钮时，将出现 Facebook 屏幕。登录成功后，用户将被重定向到应用程序。

Ionic - Cordova InAppBrowser

Cordova InAppBrowser 插件用于在 Web 浏览器视图中打开应用程序中的外部链接。

使用浏览器

开始使用此插件非常容易。您需要做的就是在命令提示符窗口中打开并安装 Cordova 插件。

C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser

此步骤允许我们开始使用inAppBrowser。我们现在可以创建一个按钮，该按钮将引导我们到某个外部链接，并添加一个简单的函数来触发插件。

HTML 代码

<button class = "button" ng-click = "openBrowser()">OPEN BROWSER</button>

控制器代码

.controller('MyCtrl', function($scope, $cordovaInAppBrowser) {
   var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no'
   };
   
   $scope.openBrowser = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
		
      .then(function(event) {
         // success
      })
		
      .catch(function(event) {
         // error
      });
   }
})

当用户点击按钮时，InAppBrowser 将打开我们提供的 URL。

此插件还可以使用其他几种方法，其中一些在以下表格中列出。

Cordova $inAppBrowser 方法

Cordova InAppBrowser 事件

此插件还提供可以与$rootScope组合的事件。

Ionic - Cordova Native Audio

此插件用于向 Ionic 应用程序添加原生音频声音。

使用 Native Audio

要能够使用此插件，我们首先需要安装它。打开命令提示符窗口并添加 Cordova 插件。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

在开始使用此插件之前，我们需要音频文件。为简单起见，我们将把我们的click.mp3文件保存在js文件夹中，但您可以将其放在任何位置。

下一步是预加载音频文件。有两种可用的选项，分别是：

• preloadSimple - 用于将播放一次的简单声音。

• preloadComplex - 用于将作为循环声音或背景音频播放的声音。

将以下代码添加到您的控制器以预加载音频文件。我们需要确保在预加载音频文件之前已加载 Ionic 平台。

控制器代码

$ionicPlatform.ready(function() {
   $cordovaNativeAudio
   .preloadSimple('click', 'js/click.mp3')
	
   .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.log(error);
   });

   $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
	.then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

在同一个控制器中，我们将添加播放音频的代码。我们的$timeout函数将在五秒钟后停止并卸载循环音频。

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click');
};

$scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click');

   $timeout(function () {
      $cordovaNativeAudio.stop('click');
      $cordovaNativeAudio.unload('click');
   }, 5000);
}

我们需要做的最后一件事是创建用于播放和循环音频的按钮。

HTML 代码

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

当我们点击播放按钮时，我们会听到声音一次，当我们点击循环按钮时，声音将循环五秒钟然后停止。此插件仅在模拟器或移动设备上有效。

Ionic - Cordova Geolocation

此插件用于向 Ionic 应用程序添加地理位置插件。

使用 Geolocation

有一种简单的方法可以使用地理位置插件。我们需要从命令提示符窗口安装此插件。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-geolocation

以下控制器代码使用了两种方法。第一个是getCurrentPosition方法，它将向我们显示用户设备的当前纬度和经度。第二个是watchCurrentPosition方法，它将在位置更改时返回设备的当前位置。

控制器代码

.controller('MyCtrl', function($scope, $cordovaGeolocation) {
   var posOptions = {timeout: 10000, enableHighAccuracy: false};
   $cordovaGeolocation
   .getCurrentPosition(posOptions)
	
   .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
      console.log(lat + '   ' + long)
   }, function(err) {
      console.log(err)
   });

   var watchOptions = {timeout : 3000, enableHighAccuracy: false};
   var watch = $cordovaGeolocation.watchPosition(watchOptions);
	
   watch.then(
      null,
		
      function(err) {
         console.log(err)
      },
	   function(position) {
         var lat  = position.coords.latitude
         var long = position.coords.longitude
         console.log(lat + '' + long)
      }
   );

   watch.clearWatch();
})

您可能还注意到了posOptions和watchOptions对象。我们使用timeout来调整允许经过的最大时间（以毫秒为单位），并将enableHighAccuracy设置为 false。可以将其设置为true以获得最佳结果，但有时会导致一些错误。还有一个maximumAge选项可用于显示接受旧位置的程度。它使用毫秒，与 timeout 选项相同。

当我们启动应用程序并打开控制台时，它将记录设备的纬度和经度。当我们的位置发生变化时，lat和long值将发生变化。

Ionic - Cordova Media

此插件允许我们在设备上录制和播放音频文件。

使用 Media

与所有其他 Cordova 插件一样，我们需要做的第一件事是从命令提示符窗口安装它。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-media

现在，我们准备使用该插件了。在以下代码示例中，src是我们将在本教程中使用的源 mp3 文件。它位于js文件夹中，但我们需要在它前面添加/android_asset/www/，以便它可以在 Android 设备上使用。

完整的功能都封装在$ionicPlatform.ready()函数内部，以确保在使用插件之前所有内容都已加载。之后，我们使用newMedia(src)方法创建media对象。media对象用于添加播放、暂停、停止和释放功能。

控制器代码

.controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) {
   $ionicPlatform.ready(function() {
      var src = "/android_asset/www/js/song.mp3";
      var media = $cordovaMedia.newMedia(src);

      $scope.playMedia = function() {
         media.play();
      };

      $scope.pauseMedia = function() {
         media.pause();
      };

      $scope.stopMedia = function() {
         media.stop();
      };

      $scope.$on('destroy', function() {
         media.release();
      });
   });
}

我们还将创建三个按钮来调用播放、暂停和停止函数。

<button class = "button" ng-click = "playMedia()">PLAY</button>

<button class = "button" ng-click = "pauseMedia()">PAUSE</button>

<button class = "button" ng-click = "stopMedia()">STOP</button>

我们需要在模拟器或移动设备上运行此插件才能使其工作。当用户点击播放按钮时，song.mp3将开始播放。

您可以在上面的示例中看到我们使用src作为可选参数。newMedia方法还可以使用其他可选参数。

可选参数

下表将显示所有可用的可选参数。

下表将显示所有可用的方法。

可用方法

下表将显示所有可用的方法。

Ionic - Cordova 图标和启动画面

每个移动应用程序都需要一个图标和启动画面。Ionic 提供了添加它们的极佳解决方案，并且开发人员的工作量最少。裁剪和调整大小在 Ionic 服务器上自动完成。

添加启动画面和图标

在前面的章节中，我们讨论了如何为 Ionic 应用程序添加不同的平台。通过添加平台，Ionic 将为该平台安装 Cordova 启动画面插件，因此我们之后无需安装任何内容。我们只需要找到两张图片。

这些图片应该是png、psd或ai文件。图标图片的最小尺寸应为192x192，启动画面图片的最小尺寸应为2208×2208。此尺寸将覆盖所有设备。在我们的示例中，我们将对两者使用相同的图片。这些图片需要保存到resources文件夹而不是默认文件夹中。完成后，我们只需要在命令提示符窗口中运行以下命令。

C:\Users\Username\Desktop\MyApp>ionic resources

现在，如果您检查resources/android或resources/ios文件夹，您将看到我们之前添加的图片已调整大小并裁剪以适应不同的屏幕尺寸。当我们在设备上运行我们的应用程序时，我们将在应用程序启动之前看到启动画面，并且我们会看到默认的 Ionic 图标已更改。

注意 - 如果您想为 Android 和 iOS 使用不同的图片，可以将其添加到resources/android和resources/ios而不是resources文件夹中。