Question

我正在研究一个简单的角度SPA。我让服务工作，然后想要将它们提取到一个单独的文件。我在语法和依赖方面做错了，我想知道是否有人可以帮助我发现它。我知道我混淆了一些事情，可能还有一些额外的错误。我很乐意听到一些关于我在哪里出错的想法。请指教。

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- FetchProduct
http://errors.angularjs.org/1.3.14/$injector/unpr?p0=<article class="demo ng-scope" ng-view="product-list">copeProvider%20%3C-%20%24scope%20%3C-%20FetchProduct

错误：$ injector：unpr未知提供商未知提供商：说明 $ injector无法解析a导致此错误必要的依赖。要解决此问题，请确保已定义依赖项拼写正确。

标记

<!doctype html>
<html ng-app="demoApp">
<head>
  <title>Kat Chilton | Escalada | Angular Skills Demo App</title>
  <link rel="stylesheet" href="demo.css" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="ProductListCtrl">
  <article class="demo" ng-view="product-list">
  </article>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
  <script src="controllers.js"></script>
  <script src="app.js"></script>
  <script src="services.js"></script>
</body>
</html>

app.js

'use strict';

var demoApp = angular.module('demoApp', [
'ngRoute',
'DemoControllers',
'DemoServices'
]);

demoApp.config(['$routeProvider',
function($routeProvider){
    $routeProvider.when('/products/', {
        templateUrl: 'product-list.html',
        controller: 'ProductListCtrl'
    })
    .when('/products/:product_id', {
        templateUrl: 'product-detail.html',
        controller: 'ProductDetailCtrl'
    })
    .otherwise({
        redirectTo: '/products/'
    });
}]);

controllers.js

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

DemoControllers.controller('ProductListCtrl', ['$scope', '$http', 'FetchList',
function ($scope, $http, FetchList) {
    $scope.products = FetchList;
}]);

DemoControllers.controller('ProductDetailCtrl', ['$scope', '$http', '$routeParams', 'FetchProduct',
function ($scope, $http, $routeParams, FetchProduct) {
    $scope.selection = FetchProduct;
}]);

services.js ：

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

DemoServices.factory('FetchList', ['$http', function ($http) {
var list;
var FetchList = function ($http) {
    $http.get('https://s3-eu-west-1.amazonaws.com/developer-application-test/cart/list')
        .success(function (data, status, headers, config) {
            // console.log('data :: ', data, 'status :: ', status, 'headers :: ', headers, 'config :: ', config);
            list = data.products;
    });
};
return {products: new FetchList($http)};
}]);

DemoServices.factory('FetchProduct', ['$http', '$scope', function ($http, $scope) {
    var product;
var FetchProduct = function ($http, $scope) {
    $http.get('https://s3-eu-west-1.amazonaws.com/developer-application-test/cart/' + $scope.product_id + '/detail')
    .success(function (data, status, headers, config) {
        console.log('data :: ', data, 'status :: ', status, 'headers :: ', headers, 'config :: ', config);
        product = data;
    });
};

return {product: new FetchProduct($http, $scope)};
}]);

Answer 1

var demoApp = angular.module('demoApp', [
    'ngRoute',
    'DemoControllers'
])
.service('DemoServices');

这是不正确的。 service() method用于向模块添加新服务。它将服务名称作为参数，并使用服务的构造函数。什么＆＃39; DemoServices＆＃39;这是模块的名称。并且您希望将此模块添加为demoApp的依赖项。所以你只需要将它添加到已包含ngRoute和DemoControllers的依赖项数组中：

var demoApp = angular.module('demoApp', [
    'ngRoute',
    'DemoControllers',
    'DemoServices'
]);

编辑：

好的，现在我有一个明确的错误信息，错误更明显。您的服务FetchProduct取决于$scope。但$scope不是服务，因此无法注入服务。控制器具有$ scope，并且每次实例化控制器时angular都会创建一个，但是服务是单例，并且没有任何范围：它们不与任何DOM元素相关联。

您的服务应如下所示：

DemoServices.factory('productFetcher', ['$http', function($http) {

    var getProduct = function(productId) {
        return $http.get('https://s3-eu-west-1.amazonaws.com/developer-application-test/cart/' + productId + '/detail').then(function(response) {
            return response.data;
        });
    });

    return {
        getProduct: getProduct;
    };
}]);

并且应该在控制器中使用它来获取产品42：

productFetcher.getProduct(42).then(function(product) {
    $scope.product = product;
});

角度服务声明

1 个答案: