来自服务器和 API 的 Angular ui 路由器动态 url答案

【问题标题】：Angular ui router dynamic url from server and API来自服务器和 API 的 Angular ui 路由器动态 url
【发布时间】：2015-07-06 15:39:49
【问题描述】：

我正在开发一个实现类似向导的行为的网络应用程序。它使用 API 来获取“向导”步骤。 API 的工作方式是您发送包含当前步骤和迄今为止所有先前答案的请求 > 并获取下一步（其中还包括步骤“名称”）。

我的问题在于我的应用程序的 URL，因为我需要/希望它们与当前步骤匹配。但是在用户已经路由到页面之前，我不知道“当前”步骤是什么。

例子：

用户点击<a ui-sref="wizard({step: 'second'})">（“第二”是当前步骤）
$stateProvider 比调用 templateUrl 例如：http://whatever.com/getStep/second
服务器获取“第二个”参数并传递给 API：当前步骤：第二个并回答第一步 1（例如），然后接收下一步 HTML 和名称 - 可以说：“ step_three" 和一些 HTML
Angular 呈现 HTML

上面示例的问题：用户现在在http://myapp.com/#/wizard/second，显示的 HTML 是“step_three”

我想要做的是向服务器发出请求，使用does params & without routing >，而不是根据响应设置状态配置：url 和模板，而不是“路由”到该状态。这样用户就可以在http://myapp.com/#/wizard/XXX 中看到 XXX 的 HTML...

这可能吗？有任何想法吗？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

简单的方法（如果你愿意，你可以在飞行中选择模板）

.state('wizard', function() {
  url: 'wizard/:step',
  templateUrl: 'views/template/wizard.html',
  controller: function($scope, $stateParams, stepData) {
    $scope.step = $stateParams.step;
    $scope.stepData = stepData;
  },
  resolve: {
    stepData: function(api, $stateParams) {
      return api.getdata($stateParams.step);
    }
  }
})

在向导 html 中：

<div ng-show='step == "first"'>first data content</div>
<div ng-show='step == "two"'>second data content</div>
<div ng-show='step == "three"'>third data content</div>

如果您想避免使用 ng-shows 并根据路线选择不同的模板，请使用 templateProvider 而不是 templateUrl：

templateProvider: function($stateParams) {
  return a valid string path to the template based on the $stateParams.step value
},

【讨论】：

谢谢，但这并不能解决 url 的问题。还是我遗漏了什么？
您必须使用函数发布第 1 步的答案，然后路由到帖子返回的下一步，这意味着您不能以当前形式使用第 1 步（意思是 ui-sref只会路由而不发布您的数据。如果您可以发布代码，那么提供帮助会容易得多

【解决方案2】：

只是一个注释，它可能不会直接回答您的问题，但会为您提供另一个选项，说明如何使用 ui-router 和 ng 绑定。

在您的情况下，您可以指定ui-sref：

ui-sref="wizard({step: 'second'})"

不过，您也可以在 ui-sref 中使用变量绑定。

ui-sref="wizard({step: step})"
                         ^         
                this is a variable in your scope ($scope.step = 'second')

您也可以使用变量来修改 url-name，例如：

ui-sref="wizard{{step}}({step: 'second'})"

$scope.step = 'Second'; //results in: ui-sref="wizardSecond({step: 'second'})"
$scope.step = 'Foo'; //results in: ui-sref="wizardFoo({step: 'second'})"

【讨论】：