Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Ionic 入门:JavaScript 组件

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: Introduction
Getting Started With Ionic: Services

Chinese (Simplified) (中文(简体)) translation by Qiang Ji (you can also view the original English article)

Final product image
What You'll Be Creating

在本教程中,我们将创建我们的第一个 Ionic 应用程序,并学习一些 Ionic JavaScript 组件的基本知识。 这些组件可让你的应用程序易于使用一些功能,比如导航和导航栏,无限滚动和名单列表。 如果你还未设置 Ionic 或者需要重新回忆一下怎样使用 Ionic CLI,你可以复习一下本系列的第一篇教程

何为组件?

组件这个专业术语在前段开发中有点被滥用了,因为很多框架对于组件的描述都有它们自己的理解。 事实上,Web 组件作为一个正式的 HTML 标准使这个概念更加复杂,所以让我们明确地定义一下,在 Ionic 中组件是什么。

在一般意义上,一个组件是一组被某种形式的编码约定封装的功能的实现。 换句话说,你可以认为一个组件就是从应用程序的其余部分分离一个特殊功能的方式。 你可以想一想为何在HTML中有不同类型的表单输入并且它们中的每一个就是一种拥有特殊功能类型的组件。

在 Ionic 中,有两种类型的组件,CSS JavaScript。 CSS 组件是通过一组 CSS 类实现的,这组 CSS 类可用来修改一个元素从而给它一个特殊的外观,比如标题栏。

JavaScript 组件是以 Angular directives 的形式在技术上被实现的并以 HTML 元素的形式在应用程序中被使用。 它们带来了一组丰富的功能。 这通常包括用户与它或应用程序进行交互或以其它方式管理该组件的能力。 比如选项卡,它可以基于用户的选择让内容显示或者隐藏。

在本篇教程中,我们将着重于一些JavaScript组件。 在本系列的后续教程中,我们会详细讲解 CSS 组件。

有时候,Ionic 会以 CSS 和 JavaScript 组件同时存在的形式去实现一个组件,比如选项卡组件。 这意味着你来决定用哪一个。 我一般建议选用以 JavaScript 实现的组件。 在大多数的情况下,使用 JavaScript 组件的代价是可以忽略不计的,并且我相信它们使你的代码更易于使用。

源文件

在本教程中,我们将从头创建一个应用程序并且我们将在本系列的以后篇幅中继续改善这个应用程序。 这个应用程序的假设是创建一个提供城市资讯的应用程序,它可以为用户提供有关本地设施的资讯,比如图书馆和公园。

在此教程中,我们从创建一个应用程序开始,此应用程序可显示一个Chicago内公园的列表,并使用无限滚动保持加载尽可能多的结果。 我们将在以后的教程中扩展此应用程序的功能集。

我已经创建了一个提供此应用程序所需资讯的 API。 此 API  基于Google Maps API。 你可以自己运行这个 API,但是它需要从Google得到一个定制的API密匙,操作指南能在 API 项目中找到。 如果在使用提供的API中遇到问题,比如有人滥用了API而超出此API的使用限数,只要运行你自己的API就能解决这个问题。

你可以在Heroku上预览可运行的程序,在GitHub上查看完整的项目。 但我鼓励你跟谁我一起来创建这个程序。

1. 设置项目

首先,你需要启动一个新项目。 我们可以通过运行下面的命令来启动一个新项目:

这会下载一个启动包, 此启动包含有一个空的Ionic模版可让我们开始开始创建(专为我的书Ionic in Action创建)。 进入目录,cd civinfo, 运行 ionic serve

你现在可以在http://localhost:8100(或者在Ionic设定的端口上)预览一个空白的程序。 我建议打开浏览器的开发者工具以确认你能看见一个空白的屏幕。 是的,它应该是一个白屏。 我也建议使用Chrome的设备模拟器来预览你的程序。

2.设置基本导航组件

导航是非常重要的,所以我们应该从这里开始设计我们的应用程序。 主要的导航组件有ionNavBarionNavView。 大多数的应用程序都有一个设计特征,那就是有一个带有不同标题和操作按钮的导航栏,然后其余部分专门留给当前视图的内容。

ionNavBarionNavView组件有些内置的智能可帮助我们提供那些功能。 在最后,我们的应用程序将会有几个导航路径,但在此教程中我们只创建一个。

Ionic在底层使用UI Router管理导航和路由。 如果你熟悉它你就会在Ionic里认出它。 这里面有很多细微的差别,但我们在此教程中保持简单。 最普通和简单的用法就是把你应用程序里每一个不同的页面定义成一个状态,这是用Ionic/UI Router的方式去定义一个特别的视图。

为了让我们开始使用UI Router,我们首先在www/index.html加入两个导航组件,就像你在下面看到的,把它们放进正文中。

一旦你对index.html加点代码,你可以重载应用程序并且你应该看到在应用程序的顶部会出现一个绿色的条栏。

App Showing Just the Navigation Bar Which Is Green

你已经定义了一个ionNavBar组件,此组件会自动出现在屏幕顶端。 稍后,当我们创建单独的views时,这些views将能够通过一个标题和额外的按钮显示。 它足够聪明知道那个导航栏在不同设备里应该有多高。 当导航栏的高度在不同平台下不一致时, 这会非常有用。 此导航栏会被赋于一个bar-balanced的CSS类从而显示绿色。

然后,会有个ionNavView,这是渲染每个view内容的位置标记。 一旦我们定义了一个view,它将会在这里渲染生成的标记,并且它会自动调整利用在导航栏被安置后剩下的可用空间。

导航栏组件是JavaScript组件的例子(也被称为Angular指令)。 它们看上去就像定制的HTML标签,当它们在一起使用时,它们会足够聪明地去保持标题栏与当前的view同步,并基于用户的导航选择渲染正确的内容。 去看它在实际中的运用,不过,我们需要加一些状态。 让我们通过建立第一个状态去显示一个公园目录开始。

3. 添加公园目录view

此应用程序的主要目的是展示一个有关市民资源的目录。 起初, 这将是一个公园的目录,但我们将会对它扩展成一个包括其它类型的资源,比如图书馆。 我们想在这个view中纳入一些特性:

  • 更新导航栏的标题
  • 使用API去导入一个公园目录
  • 显示一个适合手机格式的目录
  • 允许加载更多的东西如果滚动到目录底部,使用无线滚动
  • 显示每个目录条的图片

步骤 1:设置地点状态,控制器,和模版

现在我们针对此view有一些目标,让我们开始添加我们的JavaScript文件,它们将会与此view注册。 在www/views/places/目录下建立一个新的places.js文件,并且加入以下代码:

我们使用$stateProvider.state()函数为UI Router声明一个新的state 函数。 这个只可在Angular的angular.config()函数内被配制的 的函数。 当你声明一个state,你首先对route传递一个字符串,在本例中如places。 然后你将传递一个带有不同属性的对象,此对象定义state,比如一个URL, 一个控制器,和一个模版。 想了解所有可能的配置选项,你可以看一下UI Router文档

我们已经声明了一个新的state,命名它为places,赋予它一个/places的路径URL,用controller as命名一个controller,并且加载一个templateUrl。 这是相当普遍的state定义并且你会看到它与其它state以相同的方式使用。 在这里被声明的控制器没有任何内容,但很快我们将会加点东西进去。

模版是view的一个重要部分,是用来描述view可视的方面。 大多数view的逻辑和行为将会在控制器和模板中被管理。 我们的state宣称我们想为模板加载一个HTML文件,但我们还没有创建这个文件。 让我们在www/views/places/目录下创建一个新的places.html文件,并且加入以下代码。

到目前为止我们已经在这个模板中声明了ionViewionContent组件。  ionView组件是一个你可以安置一个模板的包裹,这个模板就是你之前声明的想要被载入进ionNavView组件的那个模板。 view-title属性也是用来传递导航栏应该显示的标题。

ionContent组件是一个有用的内容的包装,它有助于确保view的内容可以占据所有可用的屏幕空间,帮助管理页面滚动,并能使其它不太常用的行为显而易见。 当此view被加载时,你将看见导航栏标题显示的是“Local Parks”。

现在我们需要确认应用程序通过在index.html里引用place.js去加载脚本运行。 我建议就在</head>标签之前引用。

你可以打开应用程序,但你还看不到这个view。 要看这个view,请导航到http://localhost:8100/#/places。 与state定义相对应的URL能被用来导航到一个应用程序的路径。 应用程序应该如下图,标题为"Local Parks"。

App Places View Showing Title In Navigation Bar

这并不能让人兴奋,但这代表了最基本的view,你可能在大部分的时间都会用到。 现在让我们加载数据并在屏幕上显示它们。

步骤 2: 载入数据

在我们能够做更多其它事情之前,我们需要载入一些数据。 我们需要添加一个Angular服务,用来帮助我们管理物理位置。 在一篇未来的教程中,一个用户的所在地将会被设备检测到。 在那之前,我们将手动把这个地点设为Chicago,这是我最喜欢的城市之一。

打开www/js/app.js并且在此文件的最后加入下面的服务。 它应该跟在angular.module中现有方法形成链接。

这是一个Angular服务,此服务返回一个对象,此对象与Google Maps API有关Chicago的返回数据匹配。 我们现在拥有了地理位置的细节,那么我们就能够载入公园的数据了。

下面我们将更新controller,从API中载入目录。 为简单起见 我在controller中使用$http服务载入数据。 最佳实践则是把它拿出来放入一个服务中。 再次打开www/views/places/places.js并且这样更新controller。

这个controller有一个vm.load()方法,用来执行HTTP请求和在vm.places中存储请求的结果。 当你保存并运行以上代码,你能在浏览器的开发者工具中看见这个HTTP请求的执行。 即使你对Angular并不陌生,你也许也看不懂这种在vm变量中存储数据的确切方法。 如有需要,我建议去回顾一下John Papa的文章,关于为什么这是一个被建议的方法。

为了显示数据,我们也需要去更新模板和遍历所有的公园列表。 打开www/views/places/places.html并且更新它如下。

在模板中,我们使用ionList和ionItem组件。 ionList组件是最有用的组件之一,因为列表目录在手机中是非常常见的设计选择(由于小尺寸屏幕)和在纵向显示中的典型应用。 就像一个HTML的列表目录使用ulliionList可包含任何数量的ionItem组件。

目录列表能采用一些不同的显示风格,在这个例子中目录列表的个体通过对ionItem声明一个item-avatar层叠样式类在左边显示一个图像。 同样的方法可以在即时通信应用程序中被使用,你有一个带个人头像的对话目录列表。

ionItem里,你显示名字和地址。 默认的风格是使用CSS自动砍去任何溢出边界的文本,使目录列表个体保持一样的高度。

App Showing All Items In a List

我们已经载入了一个公园的目录列表,并使用ionListionItem把它们显示为一个目录列表。 我们能再往前进一步去使用一个无限滚动,当用户滚动到目录列表尾部时加载额外的结果(如果它们存在)。

步骤 3: 对目录列表添加无限滚动

我们可以使用ionInfiniteScroll组件让目录列表基于滚动至底部自动加载额外的内容。 此组件应放置在一个目录列表的最后,监视着当用户滚动到目录列表最后,然后调用一个能加载额外内容的函数。 它也有一个内建的载入指示动画,用来表示更多的内容将被加载。 当加载结束,此载入指示动画将被隐藏。

为了让这个能工作,我们的API也不得不支持分页。 在这种情况下,Google Maps API提供一个访问令牌,它必须被提交给Google Maps API去加载下一组内容。 我们需要更新controller去管理这个逻辑,所以让我们开始更新www/views/places/places.js如下。

我们已经添加了一个新属性,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组件中间添加下面的代码。

无限滚动组件现在在你的模板中被启用了。 它开始监测何时组件是可见的,这也在加载时被触发因为没有什么是可见的,然后无限滚动组件可见。 它调用在on-infinite中被声明的函数一次当它变的可见时(这里它是vm.load())并且它会在滚动完成事件已被触发之前等待。

ngIf被用来禁止无限滚动只要API已经返回所有可能的结果。 在那种情况下,滚动至底部不再触发更多资源的加载。

当使用无限滚动时,重要的事情是使用ngIf去禁止它。 它能容易地实现这样的组件,就是它能试着加载,在加载,永远不停。

这就完成了places view。 回头看看,通过在模板中的12行HTML代码和在controller中大约20行的JavaScript代码,有相当多的功能被启用了。

总结

我们已经看了一些个组件,这些组件你将会在你的Ionic应用程序中用到。

  • Ionic JavaScript组件是作为HMTL元素被使用的,并且能与HTML协调一致地工作。
  • Ionic有ionNavViewionNavBar去支持与不同views协调的导航。
  • ionListionItem组件让创建手机友好的目录变的容易。
  • ionInfiniteScroll组件自动地触发一个去加载额外的东西并添加它们到目录中的调用。

在下篇教程中我们将会看看Ionic提供的一些有用的服务,比如加载指示和popovers。

创建一个Ionic 模板并赢取$1000

如果你已经熟悉了Ionic框架,你也许会考虑进入Envato之最想要的Ionic模板比赛。  怎么做?创建一个独特的Ionic模板,并在2016年4月27日之前提交给 Envato 市场。

最好的5个模板会获得$1000奖励。 有兴趣吗? 在大赛的网站上可以了解到更多的有关比赛要求和指南的详细信息。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.