使用 AngularJS 的动态 URL答案

【问题标题】：Dynamic URL using AngularJS使用 AngularJS 的动态 URL
【发布时间】：2015-12-07 22:35:10
【问题描述】：

我有一个带有输入框和提交按钮的简单表单。这是一个字典服务，用户在输入框中输入一个单词并单击触发 JQuery 方法的按钮。此方法通过服务器端 PHP 调用（Merriam-Webster 的）API 并使用返回的数据填充 div (#meaning)。

目前，我正在使用 JQuery 执行此操作，这意味着 div 无需刷新页面即可更新，这很不错。但是，这不会更改 URL。我需要的是每次执行新搜索时 URL 都会动态更改。例如，如果您输入“cat”并点击 Lookup，则 URL 应更改为：

.../字典/猫

目前，它只是停留：

.../字典

如果我能够以某种方式复制 URL 更改，同时仍然避免完整的页面刷新，那么用户将能够直接为特定含义添加书签，而无需每次需要时都查找它。我已经尝试阅读 Angular JS 来完成这项工作，但我很难通过它。我当前的 Angular 实现是一种针对不同视图的不同 HTML 文档（例如，/about、/contact 等）。但是在这种特殊情况下，当查询被即时触发时，我怎样才能拥有一个预制的文档？有什么建议吗？

不确定我的问题是否足够好。如有必要，请随时向我询问任何细节。我很难理解这里的意思，但是如果您查看像 SpanishDict 这样的网站的字典服务，您就会了解我想要实现的目标。

我不需要你为我编写代码。我只需要大致了解如何去做，从逻辑上讲，以及考虑使用什么实现。如果不是 Angular JS，我愿意尝试更适合的框架。

【问题讨论】：

标签： javascript jquery angularjs url

【解决方案1】：

您似乎想将ngRoute 添加到您的应用中。你可以see an example here。

来自文档：

angular.module('ngRouteExample', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Book/:bookId/ch/:chapterId', {
            templateUrl: 'chapter.html',
            controller: 'ChapterController'
        });

在此示例中，:bookId 和 :chapterId 是从 URL 获取值的变量。例如，对于/Book/MobyDick/ch/7，bookId 将是“MobyDick”，chapterId 将是“7”。

在您的情况下，when 函数中的 url 可能如下所示：

when('/dictionary/:word', {
    templateUrl: 'yourTemplate.html', // optional
    controller: 'yourController'  // optional
})

【讨论】：

我尝试了类似的方法，但在“：”位上出现错误。我将我的 $scope 变量命名为 term 所以使用了 .when('/dictionary/:term', { title: 'Meaning of ' + :term, controller : 'dictController' }) 即使 {{term}} 失败了。
@TheLearner 如果您有.when('dictionary/:term')，那么您可以使用$routeParams.term 访问它。您还必须将$routeParams 注入到您的控制器中。

【解决方案2】：

你做错了。不要尝试在搜索后更新 URL。相反，搜索应该只是将您带到一个新的 URL，并使用路由变量让逻辑从那里流动。

【讨论】：