使用AngularJS的动态URL

Dynamic URL using AngularJS

本文关键字：URL 动态 AngularJS 使用      更新时间：2023-09-26

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

目前，我使用JQuery来完成这项工作，这意味着div在没有页面刷新的情况下得到更新，这很好。但是，这不会更改URL。我需要的是每次执行新的搜索时，URL都会动态更改。例如，如果您输入"cat"并点击Lookup，则URL应该更改为以下内容：

/字典/猫

目前，它只是停留在：

/字典

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

不确定我是否把这个问题写得足够好。如有必要，请随时向我询问任何细节。我很难理解这一点，但如果你看看SpanishDict等网站的词典服务，你就会知道我正在努力实现什么。

我不需要你为我写代码。我只需要大致了解如何进行，从逻辑角度来看，以及考虑使用什么实现。如果不是Angular JS，我愿意尝试一个更合适的框架。

看起来您似乎想将ngRoute添加到您的应用程序中。你可以在这里看到一个例子。

来自文档：

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
})

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

相关文章：