Question

我正在尝试使用AngularJs来使用Web API，但是我觉得很难找到角度方面。

我创建了HTML，控制器和服务。一切似乎都没问题，但在运行应用程序时我得到了注射错误。

html
<html >
<head>
    <title>Motors </title>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/View/motorController.js"></script>
</head>
<body ng-app="myApp" ng-controller="motorController">
    <div>
        <table class="table">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tr ng-repeat="m in motors">
                <td>{{m.Id}}</td>
                <td>{{m.Name}}</td>
                <td>{{m.Country}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

AngularJs控制器

var module = angular.module('myApp', [])
    .controller('motorController', ['$scope', '$motorService',function ($scope, motorService) {

    getMotors();
    function getMotors() {
        motorService.GetAllMotors()
            .success(function (motors) {
                $scope.motors = motors;
            })
            .error(function (error) {
                $scope.status = 'Unable to load motor data: ' + error.message;
            });
    }
}]);

角色服务

motorApp.factory('motorService', function ($http) {
    var urlBase = 'http://localhost:40738/api';
    var motorService = {};

    motorService.GetAllMotors = function () {
        return $http.get(urlBase + '/GetAllMotors');
    };

    return motorService;
});

我在chrmoe浏览器控制台上遇到错误

Error: [$injector:unpr] Unknown provider: $motorServiceProvider <- $motorService <- motorController

Answer 1

你有一个额外的$前面的MotorService，改变

发件人：

.controller('motorController', ['$scope', '$motorService',function ($scope, motorService)

要

.controller('motorController', ['$scope', 'motorService',function ($scope, motorService)

Answer 2

您的代码存在的问题是工厂被赋予了不同的模块名称＆＃34; webviewHTML＆＃34;而不是模块名称＆＃34; motorApp＆＃34;。

使用

module

同样在您的控制器中，您应该删除＆＃34; $＆＃34;来自注入的服务名称＆＃34; module.factory('motorService', function ($http) { //change here var urlBase = 'http://localhost:40738/api'; var motorService = {}; motorService.GetAllMotors = function () { return $http.get(urlBase + '/GetAllMotors'); }; return motorService; });＆＃34;

motorService

在控制器中注入服务时出错

2 个答案: