AngularJS应用程序有“堆栈吗?”

时间:2013-01-22 03:22:42

标签: angularjs

我正在创建一个AngularJS应用。这个应用程序有一个“屏幕”,有人选择一系列选项。其中一个选项加载客户列表。在该客户列表中,我可以选择创建客户:

[Main Menu] (/) 
    -> [Options Select] (/options)
    -> [Customer Picker] (/options/customer)
    -> [Customer Create] (/options/customer/add)

所以基本上Customer Create就是这个“状态”?应用程序可以进入。如果我要使用UI进行导航,然后重新加载页面并从此页面重新开始,那就没有什么不同了,因为Angular应用程序本身并不考虑我如何将此页面变为“堆叠“的项目。我没有弹出一些View Controller,只有一堆独立的可路由目的地。

我以前认为我可以实例化一个客户选择器控制器并将其扔到堆栈上并转换到它......但这不起作用,是吗?

如果,比方说,我希望客户应用程序选择器“更聪明”,那么我必须找出一些方法让客户选择器知道我对它的预期,使用通过它传递给它的某种选项路由器或根据我想要的每个特定用例创建一个轻微的变化。

1 个答案:

答案 0 :(得分:1)

因此,默认情况下,Angular没有这样的东西,但是通过使用$localtionProvider或其他库,有许多不同的方法可以处理它。

  • 您可以使用$locationProvider.path()提供主题标签或HTML5(真实路径)
  • 您可以使用$locationProvider.search()传递网址中的对象以保持状态
  • 您可以使用Lawnchair之类的内容在客户端上保存更复杂的状态,使用该客户端可用的任何方法

如果您还使用$routeProvider并使用它来切换控制器/视图,那么您可以在不同视图之间使用简单链接,这可能是您使用稍微简单的代码完成所需任务的一种方式。

具体到您要查看的内容(如果我理解正确),您可以使用$locationProvider.search()方法来存储堆栈信息。像这样:

$scope.go = function (where) {
    var currentSearch = $location.search();
    currentSearch.viewStack.push(where);
    $location.search(currentSearch);
    $location.path(where);
}

使用$locationProvider.search()时的一个重要警告是,它不会存储多个对象级别,这意味着传递给该函数的对象不应包含除简单类型和数组之外的任何内容。

使用这种方法,您必须向顶级控制器添加一些内容,以解释您在搜索中添加的viewStack数组。这里一个流行的模式似乎是在应用程序的根目录下有一个控制器是长寿命的,然后是其他瞬态的控制器。您也可以将顶级控制器用于其范围,但这可能会导致您可能想要避免的某种模糊的“全局”范围。

关于角度的好处是它允许你限制你使用的JS的数量。任何时候你可以使用较少的自定义书写JS并且更多地依赖于角度的工作方式,从长远来看它似乎会让你变得更好。