在 AngularJS 中使用 $location 对象的说明答案

【问题标题】：Clarification in using $location object in AngularJS在 AngularJS 中使用 $location 对象的说明
【发布时间】：2017-05-20 08:44:30
【问题描述】：

我对 Angular JS 非常陌生，并且遇到了一些小问题。我敢肯定这可能很容易回答，但我的研究到目前为止一直没有成功。

我使用 Visual Studio 作为我的 IDE，并按照教程 here 使用 AngularJS 启动项目。

本教程的初始输出效果很好。我现在要做的是添加对从 url 读取参数的支持。类似index.html?target=bob

我找到了this answer，它显示了使用 $location 从 url 中获取参数并在页面上显示结果的一般方法。

我在将此逻辑应用于当前结构时遇到问题。我认为这是迄今为止我错过的一些基本问题，如果这个问题过于简单，我深表歉意。

这是我当前的代码。

index.html

<!DOCTYPE html>

<html ng-app="app">
<head>
    <title></title>
</head>
<body ng-controller="Main as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p>Sriracha sauce is great with {{vm.food}}!</p>

    Target: {{vm.test}}<br />

    <script src="Scripts/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/main.js"></script>

</body>
</html>

app.module.js

(function () {
    'use strict';

    angular.module('app', [], function ($locationProvider) {
        $locationProvider.html5Mode(true);
    });

})();

main.js

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Main', main($location));

    function main($location) {
        var vm = this;
        vm.food = 'pizza';
        vm.test = $location.search()['target']
    }

})();

页面呈现如下：

我在控制台中收到以下错误，这些错误似乎很明显，但我不知道下一步应该做什么。

显然，问题主要在于不了解 $location。但为什么？做什么？！

谢谢！

已解决

Claise 和 squiroid 都在下面提供了很好的答案。由于我目前正在使用 squiroid 的解决方案，因此我会接受该答案，但 Claise 的答案提供了有关此问题的更深入的信息以供将来参考。

我还想指出，上面列出的第二个错误已通过以下方式解决在 index.html 的头部添加<base href="/">

谢谢大家！

【问题讨论】：

我不太确定那个控制器功能的实现。如果您正在应用任何自动缩小，您可能希望通过[] 传递$location 服务。
查看官方指南示例他们是如何通过的$scope:docs.angularjs.org/guide/controller
您的错误是关于 Main 未定义。如果您想保留代码，我会尝试将 Main 函数声明移到调用它的代码行上方。
@Joshua 请检查我的答案:)

标签： javascript angularjs

【解决方案1】：

您在这里使用了派生样式的角度声明，它允许您在一个块中声明所有控制器，所有函数都在后面，而不是传统的内联方法。这可行，但您在使用此表单时犯了一些错误。

首先，.controller('Main', main($location)); 行不正确。函数.controller() 接受函数名称作为参数，它不是调用函数。因此，() 和参数列表是不必要的。 controller('Main', main); 是这里所期望的。

接下来转到您的函数声明，function main($location) {...} 将起作用，只要您的代码没有被缩小。一旦你缩小你的代码，angular将不再能够识别$location代表的依赖，代码就会中断。

同样，你可以参考内联注入，你使用的地方

.controller('Main',['$inject', main]);

但您也可以选择将依赖项与声明分开。

Angular 提供了另一种方法，$inject。您可以将数组分配给函数的 $inject 属性，以提供正确的依赖关系。 main.$inject = ['$location'];.

总之，这里是更正后的 main.js 文件：

(function () {
'use strict';

angular
    .module('app')
    .controller('Main', main);

function main($location) {
    var vm = this;
    vm.food = 'pizza';
    vm.test = $location.search()['target']
}

main.$inject = ['$location'];
})();

还有一个显示更改的 Plunker：http://plnkr.co/edit/j9FnhiFPjkSrY5muhb0J?p=preview

【讨论】：

【解决方案2】：

这是适合你的工作。

https://plnkr.co/edit/GUDPceYFLNldiqd94vZ1?p=preview

需要在控制器中更改一些代码。

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Main', ['$location', main]);

    function main($location) {
        var vm = this;
        vm.food = 'pizza';
        vm.test = $location.search()['target']
    }

})();

有两个问题：

你的代码的问题是你调用了 main 方法而不是把它作为回调函数传递
您尚未将 $location 从控制器传递到回调方法。

['$location', main]

编辑：更新 plunker 并给出适当的答案。

【讨论】：

在几分钟内写出详细的答案。

【解决方案3】：

(function () {
    'use strict';
    angular.module('app', [])
     .config(function ($locationProvider) {
        $locationProvider.html5Mode(true);
     }));
})();

尝试将locationProvider 放在您的 app.module.js 中的配置下，如上所述。同样在你的main.js中，如果'target'是参数的键值你可以写vm.test = $location.search('target');

(function () {
  'use strict';

  angular
    .module('app')
    .controller('Main', function($location) {
       var vm = this;
       vm.food = 'pizza';
       vm.test = $location.search('target');
    })();

【讨论】：

你是指配置部分还是控制器？
不，.controller('Main', main($location)); 可能会抛出语法错误。您应该创建一个状态并测试它是否会。可能会:)