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

Ionic入门:导航

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

在这个教程系列里我们已经介绍了很多东西,包括导航。 可是Ionic还有一些组件能为创建功能更强大的导航提供附加的功能。 在本教程中,我们给应用程序添加一个侧拉菜单和选项卡组件,并且我们也来看一下能让我们应用程序的导航变的更聪明的那些额外的服务。

教程项目文件

GitHub可得到教程项目文件。 该应用程序的一般用途是显示当地设施的一些信息。 在本教程中,我们使应用程序有能力去显示图书馆,博物馆,公园和医院。 目前,它只显示在Chicago内的地点,我们会在下一篇教程中改善它。

你可以从GitHub下载此教程完整的项目。 如果你克隆此项目,你也可以通过使用Git和运行git checkout -b start来一起编写代码。 你也可以预览最终的应用程序。

注意我已经从此系列第三集中提到过的place view中删除了resolve。 我不想对此举讲解太深,在controller里加载数据会让我们的导航更简单点。

1. 添加一个侧拉菜单

一个在手机应用程序中最普遍的导航模式就是侧拉菜单。 这就像一个抽屉它能从侧边划出并且曝露出导航链接和其它的内容,比如现在用户的登陆的状态。 按照设计,它们是存在于屏幕外并通过某种按钮被打开的,它们常常使用hamburger图标,即使有人并不认同对此图标的使用。

Ionic Side Menu

侧拉菜单通常能通过侧滑打开或通过侧滑关闭。 这个非常有用,但它有时也和其它手势冲突,你应该注意这种互相冲突的行为。 你应该带着应用程序的完整视野和经验去考虑滑动的最优使用,如果有问题就禁用它。

Ionic提供了一些组件,它们能让设置侧拉菜单变的简单。 你最多能创建两个侧面菜单,一个在左边一个在右边。 一个侧面菜单是由几个组件组成的,ionSideMenus, ionSideMenu, 和ionSideMenuContent.

如想看一下这个的实际运用,让我们更新一下www/index.html并且设置一个侧拉菜单。 你将用下面的代码代替已有的内容,这会在现有的代码中添加一个侧拉菜单组件。

要启用一个侧拉菜单,我们从在ionSideMenus里包装我们应用程序内容开始。 它启动Ionic去协调侧拉菜单和内容的区域。 然后我们用一个带side="left"属性的ionSideMenu去指定它将占用哪一边。

在侧拉菜单中,我们能放入任何我们想要的内容。 在这种情况下,这也许是最常见的场景,内容就是用一个ionHeaderBar组件和一个ionList组件分别来渲染应用程序的标题和一个链接的目录菜单。 我们还没有定义设置视图,所以那个链接目前不工作。 另外要注意的是ionItem组件有一个menu-close属性。 当一个用户点击链接是它自动地关闭侧面菜单,否则侧面菜单就保持开着。

ionSideMenuContent组件是用来承载主要内容的区域。 这个内容区域占用整个屏幕,但是这个组件仅仅只是帮助侧拉菜单组件被正确地渲染。 我们也用了drag-content="false"属性来禁用拖拽手势因为它们将干扰滚动目录菜单和选项卡。

我们也已经使用ionNavButtons对导航栏添加了一个新的按钮。 这是侧拉菜单图标,它以三条线叠在一起的形式出现在右上端。 此按钮有menu-toggle="left"属性,这是用来触发左侧菜单的开合。

现在我们的侧拉菜单已经就位,让我们为应用程序设置视图添加选项卡来设置下一个主要的导航组件。

2. 拥有单独导航历史的选项卡

选项卡是应用程序导航另一个常用的模式。 选项卡易于被用户理解,因为我们会在很多类型的用户界面中看到它们,并不只在手机应用程序中。

选项卡可以是有状态或无状态的。 一个选项卡,如果它只显示内容,不记忆任何的变化,它是无状态的。一个选项卡,如果它维持基于用户交互的状态,它是有状态的(例如,可持续的搜索结果)。  我们看一下如何在Ionic里建立有状态的选项卡,因为它们更加复杂,更加强大。

Ionic Tabs

ionTabsionTab组件设置选项卡是相当容易的。 很像侧拉菜单,只要你喜欢,你可以放尽可能多的选项卡组件。 没有硬性限制,但我觉得最多五个较合适。 在小尺寸屏幕的设备上,太多的图标会让选取一个选项卡变的困难。

我们将通过建立几个新文件去设置选项卡。 首先,让我们建立一个新文件www/views/settings/settings.html去设置一个模板。 在新文件中加入下面的代码。

ionTabs组件是用来包裹ionTab组件的。 有一些CSS的类能定义选项卡的样子,比如在顶部或底部放置选项卡,使用有标题或无标题的图标,还有其它的一些。 这里,我们已经决定在顶部使用预设stable颜色有标题图标的选项卡。

ionTab组件有一些能被用来定义行为的属性。 它支持许多功能, 比如在上面显示一个小的通知徽章,使其连接到状态,图标行为和更多的功能。 我们的每个标签都有一个title,一个图标类名,在激活状态下是(icon-on),在非激活状态下是(icon-off),和用ui-sref连接到一个状态的连接。

在每个选项卡里都有另一个ionNavView。 这似乎有点不对因为我们在index.html里已经设置一个ionNavView。 我们正在做的是申明一个状态可以被渲染的额外的地方,这可以认为是一个子视图。

每个选项卡都能有它自己的导航历史,因为每个ionNavView都是独立于其它的ionNavView。 每个选项卡也有一个独一无二的名字,以方便我们定义某些状态可出现在有名字的ionNavView里。

你也许已经注意到在这个页面里并没有ionView,这在我们使用有状态的选项卡时很重要。 当你以这种方式使用ionTabs时,这是不需要的。只有在你使用无状态选项卡时,也就是CSS组件,你会需要它。

我们现在需要设置一些额外的状态来使这个例子工作起来。 在www/views/settings/settings.js创建另一个文件并且加入一下代码。

你能看到我们正在设置一些新的状态,但是这些状态和到目前为止与我们已经定义的其它状态显现出不同。 第一个状态是一个抽象的状态,它本质上是一个不能被自己直接加载的状态,并且它也不能有子状态。 通过选项卡的界面来看,对我们来说这是合理的。因为settings状态是用来加载所有的选项卡组件模版,但用户只会停留在其中一个选项卡,而不是整个选项卡组件。 他们总是在看当前激活的选项卡,这包含另一个状态。 所以使用抽象的选项卡状态使我们能够正确地配置这些导航。

其它三个状态被定义为settings.[name]。 这允许我们在这些状态中间定义一个父子的关系,本质上这反映出ionTabsionTab组件之间的父子关系。 这些状态使用视图属性,它是一个有名字的,可被视图使用的,带一个属性的对象。

你在ionNavView的模版中提供的名字应该和这个属性名一样。 该属性的值是相同的状态定义,它不带被正常声明的url。 通过合并这两个,url也形成了父子关系。 所以所有这些子状态被渲染成/settings/preferences。

你需要用脚本标记把settings.js加入index.html。 一但你这样做了,你将看到一些报错因为我们正在引用一些我们还没有创建的的文件。 让我们完成我们的选项卡模版。

我们需要创建三个文件。 前两个是静态内容所以我们不会讲它们太多的细节。 创建一个文件www/views/settings/tab.about.html并且加入一下内容。

这包含一个显示一些信息的模版。 它有GitHub项目和许可证的链接。 它看上去就像这样。

About Tab

创建另一个文件www/views/settings/tab.license.html并且加入一下内容。

这包含此代码的MIT许可证内容。 有一个简单卡片组件包含这个内容 它看上去像这样。

License State

最终的模版包含一些表单元素。 我会对它讲多点细节。 创建一个文件www/views/settings/tab.preferences.html并且加入以下内容。

这个视图包含一个切换按钮的目录,它显示此应用程序能显示的四种地点的类型,博物馆,公园,图书馆和医院。 每个切换按钮允许你从此目录中启用或禁用一个地点类型。 切换按钮是一个CSS组件。 我们只需要使用一个复选框输入通过这些特别的标记和CSS类结构就能使它们展现成移动设备的切换按钮。

Preference Toggle Buttons

这个视图有一个控制器,它在settings.js被声明,它注入一个我们还未创建的Types service。 我们将通过添加一个service到www/js/app.js把它修复。

此service含有一个地点类型的数组。 每个地点类型有一个地点类型名字的属性和是否此地点类型被启用或禁用。 我们在切换按钮ngModel中使用启用属性来跟踪状态,如果属于那个类型的地点应该被显示。

在此刻,你可以打开侧拉菜单并且导航到设置链接。 你能看到两个选项卡,preferences和about。 在preferences选项卡中,你能启用或禁用地点类型。

如果去about选项卡,你可以选择许可证来看它是如何在选项卡内导航到另一个路径的。 如果你在浏览许可证之后在preferences和about选项卡中转换,你能看到选项卡会记住你曾经在浏览许可证的状态即使你已离开,这演示了这些选项卡是有状态的性质。

此篇教程的最后一步是更新地点目录视图,它使用Types service来加载你想要的地点类型的地点并且使用历史service来控制什么时候重新加载,什么时候使用缓存。

3.缓存和使用历史Service

Ionic默认缓存最后10个视图并且把它们保存在内存里。 许多应用程序甚至还没有那么多数量的状态,这意味着你的整个应用程序可以在内存里运行。 这很有用因为它意味着Ionic不必在导航去其它视图前再一次渲染那些视图,这样可以提升应用程序的运行速度。

这会导致一些行为问题,因为你可能会想任何时候当状态被访问,你的状态总是重新加载和从新初始化控制器。 由于只有10个视图被缓存,如果你有20个视图,只有最后10个会被缓存。 那意味着你不能保证一个视图在或者不在一个缓存里。 所以你应该避免在生命周期钩子之外,在你的控制器里运行配置逻辑。 你也可以用$ionicConfigProvider设置缓存策略。

有时你需要看一下用户的导航历史来确定该做什么。 比如在这个应用程序中,如果用户点击一个地点然后再回到目录, 我们想要保留缓存地点目录。 如果我们自动地对每一次访问刷新目录,用户可能会在他们滚动和浏览一个地点之后丢失他们目录中的地点。

另一方面,如果一个用户导航去设置页面然后再回到地点目录,我们会想要刷新目录因为他们也许已经改变了他们想要显示的地点类型。

我们将使用一个生命周期事件的组合,这是我们之前已经看到的用$ionicHistory service去添加一些逻辑,那些逻辑将帮助确定地点状态在什么时候应该重新加载目录。 我们也想用Types service来帮助我们加载那些用户想要看的地点类型。

打开www/views/places/places.js并且更新它使它匹配下面的代码。 我们需要改变数据加载的方式并且使用$ionicHistory service去检查历史记录,从而决定该什么时候重新加载。

首先,我们已经修改了为我们的API建立URL的方式,以此改变从只加载公园到加载被请求的地点类型。 如果你跟之前的版本对比,它主要使用angular.forEach来循环每个类型并且把它添加到URL。

我们也已经修改了$ionicLoading service的行为方式。 在任何时候vm.load()方法被调用时,我们触发它,而不是在控制器最初运行时立即运行它。 这很重要,因为控制器将被缓存并且在默认下是不会重新加载数据的。

最大的变化是$ionicView.beforeEnter生命周期事件处理器。 这个事件在视图就要变成下一个活跃视图之前被触发,并且允许我们做一些设置。 我们用$ionicHistory.forwardView() 方法来得到关于最后一个用户浏览过的视图的信息。

如果它是第一次加载,那么它就是空的,否则它会返回一些有关最后状态的数据。 我们然后检查是否之前的状态是地点状态,如果是,我们就用缓存的目录结果。 还有,因为我们有不到10个状态,我们知道它们会一直被保存在内存里。

否则,它将重置缓存并且触发一个新的数据加载。 这意味着任何时候我从设置页面返回地点视图,它将加载数据。 取决于你应用程序的设计,你可能想去设计不同的关于如何处理缓存和重新加载的条件规则。

历史service提供更多的信息,诸如整个历史栈,修改历史的能力,关于当前状态的细节,和更多其它的信息。 你能使用这个service去调教用户在应用程序中导航的体验。

我们将对我们的地点模版做两个其它小的调整。 打开www/views/places/places.html并且把标题变为Local Places

下一步,更新无限滚动组件,添加一个属性immediate-check,用来防止无限滚动组件在加载数据的同时发生初始的加载。 这基本上可以帮助防止重复的数据请求。

在这个时刻,我们已经创建了一个十分坚固的有很多好用功能的应用程序。 我们将用最后一个教程结束这个系列,在最后一个教程里我们会看一下Cordova和设备功能的整合,比如访问GPS数据。

结论

Ionic的导航总是从声明一些状态开始。 公开导航可以有许多方式,正如我们在此篇教程中看到的。 这是我们在本教程中所涵盖的:

  • 侧拉菜单组件使创建一个或两个可按需或用手指滑动激活的侧拉菜单变得容易。
  • 标签可以是无状态或有状态的。 有状态标签可以有一些带不同导航历史记录的个体视图。
  • 标签有许多如何显示图标和图标名的配置选项。
  • 一个切换按钮是一个CSS组件,它就像一个复选框,只是它是针对移动设备设计的。
  • 你可以使用$ionicHistory service去学习更多关于应用程序的导航历史来定制用户的体验。
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.