在本教程中，我们将构建我们的第一个Ionic应用程序一起学习Ionic的JavaScript组件的基础知识。这些组件使您的应用程序可以轻松访问功能，例如导航和导航栏、无限滚动和列表。如果您尚未设置Ionic或需要刷新如何使用IonicCLI，可以查看本系列的第一篇教程。
什么是组件？
组件这个术语在前端有些被滥用开发，因为许多框架都有自己的概念来描述成分。事实上，WebComponents作为官方HTML标准可能会使这个概念进一步复杂化，所以让我们明确定义什么是组件在离子中。
一般意义上，组件是一个实现由某种形式的编码约定封装的功能集。在换句话说，您可以将组件视为隔离特定组件的一种方式应用程序其余部分的功能。你可以想想在HTML中如何是不同类型的表单输入，每一个都是一种类型具有特定功能的组件。
在Ionic中，有两种类型的组件，CSS和JavaScript。CSS组件被实现为一组CSS类，这些类修改元素以赋予其特定的外观，例如标题栏。
JavaScript组件在技术上是作为Angular指令实现的，它们是用作应用程序中的HTML元素。他们提供了更丰富的特征。这通常包括用户与其交互的能力或应用程序以其他方式管理组件。例如，标签允许根据用户选择选项卡显示或隐藏的内容。
在本教程中我们将重点关注一些JavaScript组件。在本系列的后面部分，我们将仔细研究CSS组件。
有时，Ionic将组件同时实现为CSS和JavaScript组件，例如选项卡组件。这意味着您决定使用哪一个。我通常建议选择JavaScript实现。在大多数情况下，使用的开销JavaScript组件可以忽略不计，我相信它们使您的代码更容易编写与合作。
源文件
在本教程中,wearegoingtocreateanappfromscratchandwewillcontinueenhancingthe appintherestofthisseries. Thepremiseofthis应用程序是创建一个公民信息应用程序，为用户提供有关当地设施的信息，例如图书馆和公园。
在这个在教程中，我们首先构建一个显示公园列表的应用程序在芝加哥，并使用无限滚动来保持加载结果，只要它们可用。我们将在下一个教程中扩展该应用的功能集。
我创建了一个API，可以提供应用所需的信息。该API基于在Google地图API上。您可以自己运行该API，但需要获取来自Google的自定义API密钥和说明可以在API项目上找到。如果使用提供的API时出现任何问题，例如有人滥用API如果超过API使用限制，运行您自己的版本应该会有所帮助。
您可以在Heroku上预览正在运行的应用，并在GitHub上查看已完成的项目。不过，我鼓励您跟随我一起构建应用程序。
1.设置项目
首先，您需要开始一个新项目。我们可以通过运行以下命令来做到这一点：
