jjzjj

javascript - 在 AngularJS 中读取 URL 参数 - 一种简单的方法？

coder 2025-03-15 原文

这里是 Angular 的新手。我来自 PHP 和 ASP 背景，我们读取参数的方式是这样的:

<html>
<head>
    <script type="text/javascript">
        var foo = <?php echo $_GET['foo']; ?>;
        var bar = <?php echo $_GET['bar']; ?>;

        $(document).ready(function() {
            alert('Foo is: ' + foo + ' and bar is: ' + bar);
        });
    </script>
<head>

(这不是完整的代码，但您明白了——非常简单)

我以前从未进行过“客户端”查询解析。什么是正确的方法？我过去曾发布过一个问题，但没有得到任何答案。谷歌搜索也无济于事。

我的网址通常采用以下形式:example.com?foo=123&bar=456

现在不支持上面的语法了吗？我应该做类似的事情:example.com/foo/123/bar/345 吗？

我愿意更改我的 URL 结构以获得与 Angular 一起干净地工作的东西，但需要指向正确的方向。例如，我听说过 ngRoute，但我什至不知道从哪里开始。这是正确的做法吗？

我过去发布过一个问题，但没有得到太多帮助，所以我重新发布这个问题并提供更多信息，以便更清楚。

感谢您的指点。

编辑 - 使用 $location

请注意，我试过使用 $location，但我没有成功。见下面的代码:

angular.module('myApp')
    .controller('MyController', ['$location', MyController]);

function MyController($location) {
    var params = $location.search();

    alert('foo is: ' + params.foo + ' and bar is: ' + params.bar);
}

注意:我读过一些有关设置 $locationProvider.html5Mode(true) 的内容，以便让这种查询解析方式起作用；但是，我也没有成功。

最佳答案

您可以注入(inject) $location如果您使用的是 html5 模式，则服务。

因为您使用的 URL 没有基本根(例如 ! 或 #)，所以您需要显式添加 <base>定义应用程序“根”的标记，或者您可以配置 $locationProvider不需要基本标签。

HTML:

<head>
  <base href="/">
  ...
</head>
<body>
    <div ng-controller="ParamsCtrl as vm">
        ...
    </div>
</body>

JS:

app.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);

    // or

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });    
}]);

app.controller("TestCtrl", ['$location', function($location) {
    var params = $location.search();
    alert('Foo is: ' + params.foo + ' and bar is: ' + params.bar);
});

值得注意的是，您可以添加路由器库，例如 ngRoute、ui-router 或新的、未完成的组件路由器。这些路由器依赖于符号(!或#)的基本路由，并将符号后的所有内容定义为由路由器控制的客户端路由。这将允许您的 Angular 应用程序作为单页应用程序运行，并允许您访问 $routeParams 或等效的 ui-router。

关于javascript - 在 AngularJS 中读取 URL 参数 - 一种简单的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32867483/

javascriptAngularJScodelocation39

有关javascript - 在 AngularJS 中读取 URL 参数 - 一种简单的方法？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  6. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  7. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  8. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  9. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  10. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

随机推荐