Javascript 在AngularJS中使用$location对象的说明_Javascript_Angularjs

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

javascript angularjs

Javascript 在AngularJS中使用$location对象的说明,javascript,angularjs,Javascript,Angularjs,我对Angular JS非常陌生，遇到了一点小麻烦。我相信这很容易回答，但我的研究到目前为止还没有成功我使用VisualStudio作为我的IDE，并按照教程使用AngularJS启动了一个项目教程的初始输出非常有效。我现在要做的是添加对从url读取参数的支持。类似于index.html？target=bob 我发现它显示了使用$location从url获取参数并在页面上显示结果的一般方法我在将这种逻辑应用于我当前的结构时遇到了问题。我想这是我迄今为止错过的一些基本问题，如果这个问题过于简

我对Angular JS非常陌生，遇到了一点小麻烦。我相信这很容易回答，但我的研究到目前为止还没有成功

我使用VisualStudio作为我的IDE，并按照教程使用AngularJS启动了一个项目

教程的初始输出非常有效。我现在要做的是添加对从url读取参数的支持。类似于

index.html？target=bob

我发现它显示了使用$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>

main.js

(function () {
    'use strict';

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

})();

(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。但是为什么呢？你想干什么

谢谢

已解决

两者都提供了极好的答案。由于squiroid的解决方案是我目前正在使用的，我接受这个答案，但Claise的答案提供了关于这个问题的更深入的信息，以供将来参考

我还想指出，上面列出的第二个错误是由将

添加到index.html的标题部分

谢谢大家

这是为你准备的工作服

控制器中的某些代码需要更改

(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并给出了适当的答案。

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

首先是

.controller（'Main'，Main（$location））行不正确。函数.controller（）
正在接受函数名作为参数，而不是调用函数。因此，（）
和参数列表是不必要的<代码>控制器（“主”，主）是这里所期望的
接下来转到函数声明，function main（$location）{…}
将起作用，只要您的代码没有缩小。一旦缩小代码，angular将无法识别$location
所代表的依赖项，代码将中断
同样，您可以参考使用
.controller('Main',['$inject', main]);

但是，您也可以选择提供另一种从声明中分离依赖项的方法
Angular提供了另一种方法，$inject
。您可以将数组分配给函数的$inject
属性，以提供正确的依赖项<代码>主。$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：
尝试将locationProvider
放在app.module.js的config下，如上所述。同样在main.js中，如果'target'
是可以编写的参数的键值vm.test=$location.search（'target'）
我对控制器功能的实现不是很确定。如果要应用任何自动缩小，您可能希望通过[]
传递$location
服务。请参阅官方指南示例，了解它们如何传递$scope
：您的错误是关于未定义Main。如果您想保持代码不变，我会尝试将主函数声明移到调用代码行上方。@Joshua请检查我的答案：）在几分钟内写出详细答案。您是指配置部分还是控制器？否，.controller（'Main'，Main（$location））可能会引发语法错误。您应该创建一个状态并测试它是否会。可能会：）
(function () {
    'use strict';
    angular.module('app', [])
     .config(function ($locationProvider) {
        $locationProvider.html5Mode(true);
     }));
})();

(function () {
  'use strict';

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