Question

以下是我正在尝试做的一个简单示例。我将通过说我已经在一个已经建成的角度项目中作为维护者工作了3周，并且我有一个未成年人，至多理解角度到目前为止。我可以使用控制器和视图和模型，一切都很好。但是当理解依赖注入的时候，我被模糊的错误所困扰。现在我需要了解Injector的工作原理，所以这里是我为自己的学习目的而构建的一个小测试应用程序。我实际上并不知道这是否是构建角度应用程序的正确方法。我发现这些文档充其量令人困惑。

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

Answer 1

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

变化：

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

到

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

Answer 2

重写了控制器块以遵循更常规的注入方式。你可能会锻炼身体。还从$ http调用中删除了双响应回调，并返回$ http.get（）promise。

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
    });
  });
}]);

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

2 个答案: