Question

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

目前，我正在使用JQuery这样做，这意味着div在没有页面刷新的情况下得到更新。但是，这不会更改URL。我需要的是每次执行新搜索时URL都会动态更改。例如，如果您输入＆＃34; cat＆＃34;并点击Lookup，网址应更改为：

... /字典/猫

目前，它只是停留在：

... /字典

如果以某种方式，我能够在仍然避免完整页面刷新的同时复制URL更改，则用户可以直接为特定含义添加书签，而无需在每次需要时查找。我已经尝试过阅读Angular JS来完成这项工作，但我很难通过努力工作。我当前的Angular实现是我为不同视图（例如，/ about，/ contact等）提供不同HTML文档的实现。但是在这种特殊情况下，如何在动态触发查询时如何获得预先制作的文档？有什么建议吗？

不确定我是否已将问题设置得足够好。如有必要，请随时向我询问任何细节。我很难在这里得到重点，但如果你看一下像SpanishDict这样的网站的字典服务，你就会知道我想要实现的目标。

我不需要你为我编写代码。我只需要了解如何进行操作，逻辑方面以及要考虑使用的实现方法。如果不是Angular JS，我愿意尝试更合适的框架。

Answer 1

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

Answer 2

您好像想要将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
})

使用AngularJS的动态URL

2 个答案: