Ionic入门教程：JavaScript组件

在本教程中，我们将一起构建我们的第一个 ionic 应用程序并学习 Ionic 的javascript组件的基础知识。这些组件使您的应用程序可以轻松访问功能，例如导航和导航栏、无限滚动和列表。如果您还没有设置 Ionic 或需要刷新如何使用 Ionic CLI，您可以查看本系列的第一篇教程。

什么是组件？

组件一词在前端开发中有些滥用，因为许多框架都有自己的描述组件的概念。事实上，Web Components 作为官方的 html 标准会使概念更加复杂，所以让我们明确定义 Ionic 中的组件是什么。

在一般意义上，组件是由某种形式的编码约定封装的一组功能的实现。换句话说，您可以将组件视为将特定功能与应用程序的其余部分隔离开来的一种方式。您可以考虑在 HTML 中如何存在不同类型的表单输入，并且它们中的每一个都是具有特定功能的组件类型。

在 Ionic 中，有两种类型的组件，css和JavaScript。CSS 组件被实现为一组 CSS 类，它们修改元素以赋予其特定的外观，例如标题栏。

javaScript 组件在技术上是作为 angular 指令实现的，它们在应用程序中用作 HTML 元素。它们提供了更丰富的功能集。这通常包括用户与其交互或应用程序以其他方式管理组件的能力。例如，选项卡允许根据用户选择选项卡来显示或隐藏内容。

在本教程中，我们将重点介绍一些 JavaScript 组件。在本系列的后面，我们将仔细研究 CSS 组件。

有时，Ionic 将组件实现为 CSS 和 JavaScript 组件，例如选项卡组件。这意味着您决定使用哪一个。我通常建议选择 JavaScript 实现。在大多数情况下，使用 JavaScript 组件的开销可以忽略不计，我相信它们使您的代码更易于使用。

源文件

在本教程中，我们将从头开始创建一个应用程序，我们将在本系列的其余部分中继续增强该应用程序。这个应用程序的前提是创建一个公民信息应用程序，为用户提供有关其当地设施的信息，例如图书馆和公园。

在本教程中，我们首先构建一个显示芝加哥公园列表的应用程序，并使用无限滚动来保持加载结果，只要它们可用。我们将在接下来的教程中扩展应用程序的功能集。

我创建了一个提供应用程序所需信息的api 。该 API 基于 Google Maps API。您可以自己运行 API，但需要从 Google 获取自定义 API 密钥，并且可以在 API 项目中找到说明。如果使用提供的 API 有任何问题，例如有人滥用 API 并超出 API 使用限制，运行您自己的版本应该会有所帮助。

您可以在Heroku上预览正在运行的应用程序，并在GitHub 上查看已完成的项目。但是，我鼓励您跟随并与我一起构建应用程序。

1.设置项目

首先，您需要开始一个新项目。我们可以通过运行以下命令来做到这一点：

ionic start civinfo https://github.com/ionic-in-action/starter

这会下载一个包含一个空 Ionic 模板的启动包，以帮助我们开始（为我的书 Ionic in Action使用而构建）。进入目录， cd civinfo运行 ionic serve。

您现在可以在http://localhost:8100（或 Ionic 设置的端口）预览加载的空白应用程序。我建议您打开浏览器的开发人员工具以确认您看到的是空白屏幕。是的，应该是白屏。我还建议在预览您的应用时使用chrome 的设备仿真。

2.设置基本导航组件

导航非常重要，我们应该从这里开始设计我们的应用程序。主要的导航组件是ionNavBar 和ionNavView。大多数应用程序都有一个设计功能，其中有一个带有各种标题和操作按钮的导航栏，然后该区域的其余部分专门用于当前视图的内容。

和组件为该功能ionNavBar 提供 ionNavView 了一些内置智能来帮助我们。我们的应用程序最终会有几条路线，但我们在本教程中只构建了一条。

Ionic 在后台使用UI 路由器来管理导航和路由。如果您熟悉它，那么您就会认出 Ionic 中的实现。有很多细微差别，但我们在本教程中保持简单。最常见和最简单的用法是将应用程序的各个页面定义为state，这是 Ionic/UI Router 定义特定视图的方式。

为了让我们开始，我们首先将两个导航组件包含在www/index.html 中，如下所示，将其放置在正文中。

<body ng-app="App">
  <ion-nav-bar class="bar-balanced"></ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

将代码添加到index.html后，您可以重新加载应用程序，并且应该会看到应用程序顶部出现一个绿色条。

Ionic入门：JavaScript 组件第1张

您已经定义了ionNavBar组件，它会自动出现在屏幕顶部。稍后，当我们创建单独的视图时，这些视图将能够传递标题和其他按钮来显示。知道导航栏对于不同设备应该有多高是足够聪明的。这在平台之间并不一致，因此这非常有用。导航栏被赋予一个类bar-balanced以赋予它绿色。

然后是ionNavView，它是为每个视图呈现内容的占位符。一旦我们定义了一个视图，它将在此处呈现结果标记，并自动调整以占用导航栏定位后剩余的可用空间。

导航组件是 JavaScript 组件（也称为 Angular 指令）的示例。它们看起来像自定义 HTML 标记，当一起使用时，它们足够聪明，可以使标题栏与当前视图保持同步，并根据用户的导航选择呈现正确的内容。但是，要看到这一点，我们需要添加一些状态。让我们从显示公园列表的第一个状态开始。

3.添加公园列表视图

该应用程序的主要目的是显示与公民相关的资源列表。最初，这将是一个公园列表，但我们将扩展它以包括其他类型的资源，如图书馆。我们希望在此视图中包含一些功能：

用标题更新导航栏
从 API 加载公园列表
以移动友好的格式显示项目列表
如果到达底部，则允许加载更多项目，使用无限滚动
显示每个项目的图像

第 1 步：设置场所状态、控制器和模板

既然我们有这个视图的一些目标，让我们开始添加我们的 JavaScript 文件来注册这个视图。在www/views/places/创建一个新文件 places.js 并将以下内容添加到其中：

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function() {
});

$stateProvider.state()我们使用该方法为 UI 路由器声明一个新状态。这只能在 Angular 的 angular.config()方法中进行配置。当你声明一个状态时，你首先传递一个字符串来命名路由，在这种情况下是places. 然后传递一个对象，该对象具有定义状态的各种属性，例如 URL、控制器和模板。您可以查看UI 路由器文档以了解所有可能的配置选项。

我们已经声明了一个新状态，命名为它，为其分配了/placesplaces的 URL ，命名为 using syntax，并列出了要加载的 a。这是一个相当常见的状态定义，您会看到它与其他状态的使用方式基本相同。这里声明的控制器是空的，但我们很快就会添加它。controllercontroller astemplateUrl

该模板是视图的重要组成部分，描述了该视图的视觉方面。大多数视图逻辑和行为将在控制器和模板中进行管理。我们的状态声明我们要为模板加载一个 HTML 文件，但我们还没有创建一个。让我们通过在www/views/places/创建一个新文件places.html 并添加下面的代码来解决这个问题。

<ion-view view-title="Local Parks">
  <ion-content>
  </ion-content>
</ion-view>

到目前为止，在这个模板中，我们已经声明了ionView组件ionContent。组件是您放置在模板周围的包装器，该 ionView模板旨在加载到ionNavView我们之前声明的组件中。该view-title属性还用于传递导航栏应显示的标题。

该ionContent组件是一个有用的内容包装器，它有助于确保内容空间的大小适合可用的屏幕空间，有助于管理滚动，并且可以公开其他不太常用的行为。加载此视图后，您将看到导航栏标题显示为“本地公园”。

现在我们需要通过将places.js添加到index.html来确保应用程序加载要执行的脚本，如下所示。</head>我建议在标签之前添加它。

<script src="views/places/places.js"></script>

您可以查看该应用程序，但您仍然不会看到该视图出现。要查看视图，请导航到 http://localhost:8100/#/places。状态定义中映射的 URL 可用于导航到路由。然后它应该如下图所示，标题设置为“Local Parks”。

Ionic入门：JavaScript 组件第2张

这还不太令人高兴，但这代表了您可能会在大多数时间设置的最基本的视图。现在让我们加载数据并将其显示在屏幕上。

第 2 步：加载数据

在我们可以做很多其他事情之前，我们需要加载一些数据。为此，我们需要添加一个 Angular 服务来帮助我们管理地理位置。在以后的教程中，设备将检测用户的位置。在那之前，我们将手动将其设置为芝加哥，我最喜欢的城市之一。

打开www/js/app.js 并将以下服务添加到文件末尾。它应该与来自angular.module.

.factory('Geolocation', function() {
  return {
    "formatted_address": "Chicago, IL, USA",
    "geometry": {
      "location": {
        "lat": 41.8781136,
        "lng": -87.6297982
      }
    },
    "place_id": "ChIJ7cv00DwsDogramDACa2m4K8"
  };
})

这是一个 Angular 服务，它返回一个与谷歌地图 API 返回芝加哥的对象相匹配的对象。我们现在有了该位置的详细信息，因此我们可以在那里加载公园。

接下来，我们将更新控制器以从 API 加载列表。为简单起见，我使用$http控制器中的服务加载数据。最佳实践是将其抽象为服务。再次打开www/views/places/places.js 并像这样更新控制器：

.controller('PlacesController', function($http, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  vm.places = [];
  
  vm.load = function load() {
    $http.get(base).then(function handleResponse(response) {
      vm.places = response.data.results;
    });
  };
  
  vm.load();
});

控制器有一个vm.load()方法来执行 HTTP 请求并将结果存储在vm.places. 保存后，您将在浏览器的开发人员工具中看到 HTTP 请求触发。即使您熟悉 Angular，您也可能无法识别这种在 vm变量上存储数据的确切方法。如果您需要一些明确性，我建议您查看John Papa 的帖子，了解为什么这是一种推荐的方法。

要显示数据，我们还需要更新模板并遍历公园列表以显示它们。打开www/views/places/places.html 并更新它，如下所示。

<ion-view view-title="Local Parks">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="place in vm.places" class="item-avatar">
        <img ng-src="{{place.icon}}" />
        <h2>{{place.name}}</h2>
        <p>{{place.formatted_address}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

在模板中，我们使用了ionList和ionItem组件。该ionList组件是最有用的组件之一，因为列表是移动设备中非常常见的设计选择，因为屏幕较小且通常用于纵向。很像使用uland的列表li，ionList包装任意数量的ionItem元素。

列表可以采用多种不同的外观，在此示例中，列表项通过item-avatar在ionItem. 同样的方法可以用在一个消息应用程序中，你有一个聊天列表和每个人的头像。

在中ionItem，您显示名称和地址。默认样式是自动截断（使用 CSS）任何溢出s 的文本以保持项目的高度相同。

Ionic入门：JavaScript 组件第3张

我们已经加载了一个公园列表，并使用和将它们显示为ionList列表ionItem。我们可以更进一步，添加无限滚动以在用户滚动到列表末尾附近时加载其他结果（如果它们可用）。

第 3 步：将无限滚动添加到列表

为了使列表根据用户滚动到底部自动加载附加项目，我们可以使用该ionInfiniteScroll组件。该组件放置在列表的末尾，监视用户何时滚动到末尾，然后调用可以加载其他项目的方法。它还有一个内置的加载微调器，以指示正在加载更多项目。当响应解决时，微调器被隐藏。

我们的 API 还必须支持某种形式的分页才能正常工作。在这种情况下，Google Maps API 提供了一个令牌，必须传递该令牌才能加载下一组结果。我们需要更新控制器来管理这个逻辑，所以让我们从更新www/views/places/places.js 开始，如下所示。

.controller('PlacesController', function($http, $scope, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];
  
  vm.load = function load() {
    var url = base;
    if (token) {
      url += '&token=' + token;
    }
  
    $http.get(url).then(function handleResponse(response) {
      vm.places = vm.places.concat(response.data.results);
      token = response.data.next_page_token;
  
      if (!response.data.next_page_token) {
        vm.canLoad = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});

我们添加了一个新属性， vm.canLoad它是一个布尔值，指示是否有其他要加载的项目。这是true默认设置。在返回请求之前，我们不知道是否还有其他可用项目。

更新该 vm.load()方法以附加令牌（如果可用）。响应处理程序现在将结果连接到数组中。这意味着在第一页之后添加第二页结果。next_page_token只要有更多可以加载的结果，Google Maps API 就会返回。如果缺少该属性，我们可以假设没有更多项目要加载并vm.canLoad设置为false. 无限滚动组件使用此值来确定何时停止加载更多项目。

最后的变化是增加了 $scope.$broadcast('scroll.infiniteScrollComplete'). 无限滚动组件不知道 HTTP 请求何时完成或何时保存以禁用加载符号。因此，组件会监听event来更新自己。在这种情况下，该scroll.infiniteScrollComplete 事件告诉组件停止微调器并继续监视用户滚动到底部。

最后一步是在模板中启用它。打开www/views/places/places.htmlionList并在和ionContent组件的末尾添加一行。

      </ion-item>
    </ion-list>
    <ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad"></ion-infinite-scroll>
  </ion-content></ion-view>

现在在您的模板中启用了无限滚动组件。它开始监视组件何时可见，这也会在加载时触发，因为那时没有地方可见并且无限滚动组件可见。on-infinite当它变得可见时（这里是），它调用一次声明的方法，vm.load()并等待直到触发滚动完成事件。

用于在ngIfAPI 返回所有可能的结果后禁用无限滚动。在这种情况下，滚动到底部不再触发更多资源的加载。

使用无限滚动时，使用 anngIf禁用它很重要。以组件尝试加载和加载并且永不停止的方式来实现组件是很容易的。

这样就完成了地点视图。回顾一下，模板中的 12 行 HTML 和控制器中大约 20 行的 JavaScript 启用了相当多的功能。