2016-03-24 18 views
2

私はドキュメントを見て、このコードを別のプロジェクトから直接取りました。私は理由は分かりませんが、私は不明なプロバイダエラーが続いています。私はエラー参照で角が指摘している可能性のあるすべての問題を実行しているので、あなたが私のリンクを張るのであれば、時間を無駄にすることはありません。 私の角型アプリケーションは私のサービス(不明なプロバイダ)を認識しません

エラー:

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

は、任意のヘルプはWaypointController.js

+0

サービスコードを使用すると、コントローラコードの先頭に 'var app = angular.module( 'atApp');を追加する必要があります。 –

+0

申し訳ありませんが、私は既にapp.jsで私のアプリケーション宣言を作っています – danielbarrett

+0

'console.log'を工場に入れたら、アプリケーションが起動すると、それは表示されますか? – Tana

答えて

0

場所waypoints.jsファイルを高く評価され、コンソール上のJSONのための任意のエラーを持っています。あなたのコードにバグが見つかりました。ウェイポイントを注入し、デモなどの取得あなたのコントローラにそう

app.factory('Waypoints', Waypoints); 

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

}); 

:最初

$scope.ways = Waypoints.getDemo(); 
+1

シーケンスを変更しても何も起こりません。 –

0

は、あなたの工場のためにこのコードを試してみてください。アプリケーションをデバッグする場合は、ミニバージョンを使用せずに、標準バージョンのAngularを使用してください。それはあなたにあなたの問題の原因を導くはるかに説明的なエラーを与えるでしょう。

実例はhttp://plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=previewです。あなたのコード(少なくともあなたが含まれている部分)は一目瞭然です。だから、これはあなたがどこに間違っていたかをあなたに知らせることを願っています。

P.S.

function WaypointsService() { 
    this.getWaypoints = getWaypoints; 

    function getWaypoints() { 
     return [way1, way2, ...]; 
    } 
} 
app.service('waypointsService', WaypointsService); 
関連する問題