角度依赖注入。我到底做错了什么？答案

【问题标题】：Angular dependency injection. what the hell am i doing wrong?角度依赖注入。我到底做错了什么？
【发布时间】：2017-02-01 18:53:42
【问题描述】：

这是我正在尝试做的一个简单示例。我首先要说的是，我已经在一个已经构建的 Angular 项目中作为维护者工作了 3 周，并且我对 Angular 迄今为止的理解是次要的，充其量。我可以使用控制器、视图和模型，一切都很好。但是当需要理解依赖注入时，我被模糊的错误所困扰。现在是时候我需要了解 Injector 的工作原理了，所以这是我为自己的学习目的而构建的一个小型测试应用程序。我实际上根本不知道这是否是构建 Angular 应用程序的正确方法。我觉得文档充其量是令人困惑的。

html

<div ng-app="app">
<div ng-controller="EC as e">
</div>
</div>

javascript

var app = angular.module('app',[]);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(function($q, $window) {
        return {
            'request': function(config) {
                config.headers['Authorization'] = 'bearer '+ $window.localStorage.token;
                return config;
            }
        };
    });
}]);

function EC($scope,$http,$window) {

    var vm = this;

    vm.api = function( resource ){
        return ('https://api.website.com/v1/'+resource).replace('//','/');
    };

    $window.localStorage.token = 'foobar';

    $http.put( vm.api('/users/me'), { loggedIn: true }).then(function(response){

        $http.get( vm.api('/users/me') ).then.function(response){
            vm.user = response.data;
        });

    });

}

EC.$inject = ['$scope','$http','$window'];

app.controller('EC',EC);

app.run();

我曾假设EC.$inject = ['$scope','$http','$window']; 行将确保我的控制器构造函数将与这些服务一起调用，或者不管它们被称为什么，作为参数。显然情况并非如此。有人可以像我 5 岁一样向我解释这是如何工作的，以及为什么我会出错？

错误信息：

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr

【问题讨论】：

标签： angularjs dependency-injection dependencies

【解决方案1】：

这只是糟糕的标记。 Fiddle 向您展示工作代码

变化：

   .then
      .function(response) {
        vm.user = response.data;

到

   .then(function(response) {
        vm.user = response.data;

【讨论】：

实际的问题是我不知道我必须包含额外的文件才能使 $http 可用。您的小提琴实际上显示了错误，但是以不同的方式。我提供的代码只是一个虚拟代码，所以语法错误是我努力做一个简单的例子来说明问题的一个红鲱鱼。应用缺少的资源后，我的代码现在可以工作了。感谢您的努力。
这 100% 是您的注入问题。我毫不怀疑代码还有其他问题。
而且你没有为 $http 包含其他文件
好吧，它仍然不适合我。我完全复制所有内容，它不会运行。我现在得到的错误是“找不到模块应用程序”
你复制了什么？找不到模块app 可能意味着您正在尝试在声明模块之前查找它。修复错字后，小提琴应该可以证明您的代码可以正常工作。

【解决方案2】：

重写了控制器块以遵循更传统的注入。可能会为你锻炼。还从 $http 调用中删除了双重响应回调并返回了 $http.get() 承诺。

angular.module('app', [])



.config(['$httpProvider', function($httpProvider)
{
  $httpProvider.interceptors.push(function($window) 
  {
    return {
      request: function(config) 
      {
        config.headers['Authorization'] = 'bearer '+ $window.localStorage.token;
        return config;
      }
    };
  });
}])



.controller('EC', ['$scope', '$http', '$window', function($scope, $http, $window) 
{
  var buildApiString = function(resource)
  {
    return ('https://api.website.com/v1/'+resource).replace('//','/');
  };


  $window.localStorage.token = 'foobar';


  $http.put(buildApiString('/users/me'), { loggedIn: true }).then(function()
  {
    return $http.get(buildApiString('/users/me')).then(function(response)
    {
      $scope.user = response.data
    });
  });
}]);

【讨论】：