Question

好的，我查看了文档，并直接从另一个有效的项目中获取此代码。我不知道为什么，但我一直收到一个未知的提供程序错误。我已经完成了角度指出错误参考的所有可能出现的问题，所以如果你只想链接我，那就不要浪费你的时间。

错误：

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

感谢任何帮助

Answer 1

首先要做的事情。如果要调试应用程序，请不要使用缩小的，但使用标准版本的Angular。这将为您提供更具描述性的错误，它将引导您找到问题的根源。

以下是一个工作示例：http://plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=preview。你的代码（至少是你所包含的部分）乍一看看起来不错，所以我希望这会让你知道你哪里出错了。

P.S。使用服务与工厂相比，可以为您提供更清晰的语法：

function WaypointsService() {
    this.getWaypoints = getWaypoints;

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

Answer 2

在 WaypointController.js

之前放置 waypoints.js 文件

控制台上的JSON有任何错误。我在代码中找不到任何错误。

Answer 3

为您的工厂试用此代码：

spark.driver.extraClassPath
spark.driver.extraLibraryPath
spark.executor.extraClassPath
spark.executor.extraLibraryPath

所以在你的控制器中注入Waypoints并获得如下的演示：

app.factory('Waypoints', Waypoints);

function Waypoints(){ 
    var demo = [ {  ... }, {  ...  }, ]; 
    return{
        getDemo: getDemo
   }
    function getDemo(){
        return demo;
    }; 

});

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

3 个答案: