Ionic入门：JavaScript组件

最新推荐文章于 2021-06-07 19:13:25 发布

cunjie3951

最新推荐文章于 2021-06-07 19:13:25 发布

阅读量448

点赞数

文章标签： python javascript java vue web ViewUI

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

什么是组件？

术语“组件”在前端开发中被滥用，因为许多框架都有描述组件的自己的概念。实际上，作为正式HTML标准的Web组件会使该概念进一步复杂化，因此让我们清楚地定义Ionic中的组件是什么。

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

在Ionic中，有两种类型的组件， CSS和JavaScript 。 CSS组件是作为一组CSS类实现的，这些CSS类修改了元素以使其具有特定外观，例如标题栏。

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

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

有时，Ionic将组件同时实现为CSS和JavaScript组件，例如tabs组件。这意味着您决定使用哪个。我通常建议选择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之后 ，您可以重新加载该应用程序，并且应该会在应用程序顶部看到一个绿色的栏。

您已经定义了ionNavBar组件，该组件自动出现在屏幕顶部。稍后，当我们创建单个视图时，这些视图将能够传递标题和其他按钮来显示。知道不同设备的导航栏应该有多高就足够了。这在各个平台上并不一致，因此非常有帮助。导航栏具有一类bar-balanced以使其具有绿色。

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

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

3.添加公园列表视图

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

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

步骤1：设置场所状态，控制器和模板

现在我们对该视图有一些目标，让我们开始添加将注册该视图JavaScript文件。在www / views / places /中创建一个新文件place.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 Router文档中所有可能的配置选项。

我们已经声明了一个新状态，将其命名为places ，为其分配一个URL / places ，使用controller as语法将其命名为controller ，并列出了要加载的templateUrl 。这是一个相当常见的状态定义，您会发现它与其他状态的用法几乎相同。此处声明的控制器为空，但我们会尽快添加它。

该模板是视图的重要部分，并描述了该视图的视觉方面。大多数视图逻辑和行为将在控制器和模板中进行管理。我们的州声明我们要为模板加载HTML文件，但尚未创建一个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”。

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

步骤2：载入资料

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

打开www / js / app.js并将以下服务添加到文件末尾。它应该与angular.module的现有方法angular.module 。

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

这是一个Angular服务，返回的对象与Google Maps 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组件是最有用的组件之一，因为列表由于较小的屏幕和纵向使用而在移动设备中是非常常见的设计选择。就像使用ul和li的列表一样， ionList包装任意数量的ionItem元素。

列表可以采用多种不同的外观，在此示例中，列表项通过在ionItem上声明item-avatar类而在左侧显示图像。可以在消息传递应用程序中使用相同的方法，在该应用程序中，您可以使用带有每个人的化身的聊天列表。

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

我们已经加载了公园列表，并使用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()方法已更新为附加令牌（如果可用）。现在，响应处理程序将结果串联到数组上。这意味着将第二页结果添加到第一页之后。只要有更多结果可以加载，Google Maps API就会返回next_page_token 。如果缺少该属性，我们可以假定没有更多项目要加载，并且vm.canLoad设置为false 。无限滚动组件使用此值来确定何时停止加载更多项目。

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

最后一步是在模板中启用此功能。打开www / views / places / places.html并在ionList和ionContent组件之间添加线。

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

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

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

使用无限滚动时，使用ngIf禁用它很重要。以这样的方式来实现组件很容易，即组件尝试加载并加载而永不停止。

这样就完成了场所视图。回顾过去，模板中的12行HTML和控制器中的约20行JavaScript启用了很多功能。

摘要

我们已经研究了许多组件，您将在Ionic应用程序中经常使用这些组件。

离子JavaScript组件用作HTML元素，可以协同工作。
Ionic具有ionNavView和ionNavBar以支持不同视图的协调导航。
ionList和ionItem组件使构建移动友好列表变得容易。
ionInfiniteScroll组件会自动触发调用以加载其他项目并将其附加到列表中。

下一个教程将介绍Ionic提供的一些有用服务，例如加载指示器和弹出窗口。

创建一个离子模板并赢得$ 1000

如果您已经对Ionic框架感到满意，那么您可能要考虑参加Envato的Ionic模板的“最想要的竞赛” 。怎么样？创建一个唯一的Ionic模板，并在2016年4月27日之前将其提交给Envato Market。

最好的五个模板将获得$ 1000。有兴趣吗在竞赛网站上了解更多有关竞赛要求和指南的详细信息。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-ionic-javascript-components--cms-26168

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionic入门：JavaScript组件

您将要创造的在本教程中，我们将一起构建第一个Ionic应用程序，并学习Ionic JavaScript组件的基础知识。这些组件使您的应用可以轻松访问功能，例如导航和导航栏，无限滚动和列表。如果您尚未设置Ionic或需要刷新如何使用Ionic CLI，则可以阅读本系列的第一篇教程。什么是组件？术语“组件”在前端开发中被滥用，因为许多框架都有描述组件的自己的概念。实际上，作为正...
复制链接

扫一扫