Question

我对Angular JS很新，并且遇到了一些麻烦。我相信这可能很容易回答，但到目前为止我的研究都没有成功。

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

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

这样的东西

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

我在将此逻辑应用于当前结构时遇到问题。我认为这是我迄今为止所遗漏的基本内容，如果这个问题过于简单，那么道歉。

这是我目前的代码。

的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的答案提供了有关此问题的更深入的信息以供将来参考。

我还要注意上面列出的第二个错误是通过解决的   将<base href="/">添加到index.html的主题部分

谢谢大家！

Answer 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

Answer 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并给出了相应的答案。

Answer 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');
    })();

澄清在AngularJS中使用$ location对象

3 个答案: