我的角度应用程序将无法识别我的服务（未知提供商）

danielbarrett 发表于 Dev

丹尼尔·巴雷特

好的，我已经查看了文档，并直接从另一个可行的项目中获取了此代码。我不知道为什么，但我不断收到未知的提供程序错误。我已经解决了所有可能的问题，这些问题都在角度上指出了他们的错误参考，因此，如果您只是想联系我，那就不要浪费您的时间。

错误：

angular.js:13236 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=waypointsProvider%20%3C-%20waypoints%20%3C-%20WaypointController
at Error (native)
at https://code.angularjs.org/1.5.0/angular.min.js:6:416
at https://code.angularjs.org/1.5.0/angular.min.js:43:7
at Object.d [as get] (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at https://code.angularjs.org/1.5.0/angular.min.js:43:69
at d (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at e (https://code.angularjs.org/1.5.0/angular.min.js:41:1)
at Object.instantiate (https://code.angularjs.org/1.5.0/angular.min.js:41:364)
at https://code.angularjs.org/1.5.0/angular.min.js:87:42
at A.link (https://code.angularjs.org/1.5.0/angular-route.min.js:7:274) <div ng-view="" class="ng-scope">

我的index.html文件：

<!DOCTYPE html>
<html>
<head>
<title>Appalachian App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.min.js"></script>
</head>
<body ng-app="atApp">
<h1 class="header">Yo</h1>
<div ng-view></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WaypointController.js">  </script>
<!-- Services -->
<script type="text/javscript" src="js/services/waypoints.js"></script>
</body>
</html>

我的app.js文件：

var app = angular.module('atApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/waypoint.html',
            controller: 'WaypointController'
        }).
        otherwise({
            redirectTo: '/'
        });
}]);

我的控制器：

app.controller('WaypointController',[
 '$scope','waypoints',
function($scope, waypoints){
 $scope.helloWorld='hello world!';
 $scope.ways = waypoints;
}]);

我的服务：

app.factory('waypoints', [function(){
var demo = [
 {
    name:"Milinockett",
    date:"17 August 2015",
    state:"Maine",
    specificLocation:"motel",
    startingPoint:true,
    distanceFromStart:0,
    distanceFromEnd:2189.0,
    img:"https://56.media.tumblr.com/03645603932681733b6ae4b46d6c7abf/tumblr_o43w4sh5Zu1rrw1gjo1_540.jpg",
    companions:"Vallone",
    
 },
 {
    name:"Katahdin Stream Campground",
    date:"18 August 2015",
    state:"Maine",
    specificLocation:"Baxter State Park Camp Site 21",
    startingPoint:false,
    distanceFromStart:5.2,
    distanceFromEnd:2183.8,
    img:"http://41.media.tumblr.com/1a0fd39fd0b14f83ce03151299c883f8/tumblr_o43w7109pQ1rrw1gjo1_1280.jpg",
    companions:"Vallone",

 },
 ];
 return demo;
 }]);

任何帮助表示赞赏

博诺马里诺夫

首先是第一件事。当您要调试应用程序时，请不要使用缩小版本的Angular标准版本。这将给您带来更多描述性的错误，它将引导您找到问题的根源。

这是一个工作示例：http : //plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=preview。乍一看，您的代码（至少包括其中的部分）看起来不错，因此，我希望这可以使您知道哪里出了问题。

PS使用服务与工厂使用可以说是一种更简洁的语法：

function WaypointsService() {
    this.getWaypoints = getWaypoints;

    function getWaypoints() {
        return [way1, way2, ...];
    }
}
app.service('waypointsService', WaypointsService);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。