Simple Angular $ routeProvider giải quyết kiểm tra. Có gì sai với mã này?

Tôi đã tạo ra một đơn giản Angular JS $ routeProvider giải quyết ứng dụng thử nghiệm. Lỗi này cung cấp cho các lỗi sau:

Error: Unknown provider: dataProvider <- data

Tôi sẽ đánh giá cao nếu ai đó có thể xác định nơi tôi đã đi sai.

index.html

<!DOCTYPE html> 
<html ng-app="ResolveTest"> 
    <head> 
    <title>Resolve Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"> </script> 
    <script src="ResolveTest.js"></script> 
    </head> 
    <body ng-controller="ResolveCtrl"> 
    <div ng-view></div> 
    </body> 
</html>

ResolveTest.js

var rt = angular.module("ResolveTest",[]); 

rt.config(["$routeProvider",function($routeProvider) 
{ 
    $routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: ["$q","$timeout",function($q,$timeout) 
     { 
     var deferred = $q.defer(); 

     $timeout(function() 
     { 
      deferred.resolve("my data value"); 
     },2000); 

     return deferred.promise; 
     }] 
    } 
    }); 
}]); 

rt.controller("ResolveCtrl",["$scope","data",function($scope,data) 
{ 
    console.log("data : " + data); 
    $scope.data = data; 
}]);

rt.html

<span>{{data}}</span>

Nguồn

2013-05-31 Hilo

Vấn đề là bạn có ng-controller="ResolveCtrl" trên thẻ cơ thể của bạn trong index.html khi cũng trong $ routeProvider của bạn, bạn chỉ định cùng một bộ điều khiển cho rt.html. Đưa ra định nghĩa bộ điều khiển từ thẻ body của bạn và chỉ để cho $ routeProvider quản lý nó. Nó hoạt động tốt sau đó.

Nguồn

2013-05-31 03:09:52 John

Tôi không đồng ý. Xem http://jsfiddle.net/UbQHx/ – robbymurphy

Cảm ơn jbw91, hoạt động như mong đợi ngay bây giờ. – Hilo

robbymurphy - bạn không có giải quyết cũng không tiêm kết quả trong fiddle của bạn để bạn không sao chép vấn đề một cách chính xác. – Hilo

Bằng cách thêm dữ liệu vào định nghĩa của bộ điều khiển góc nói của bạn mà bạn dự kiến sẽ đưa dịch vụ hoặc nhà máy vào đây nhưng bạn không có dịch vụ dữ liệu hoặc nhà máy do đó lỗi. Để sử dụng biến dữ liệu bạn có tất cả những gì bạn cần từ dòng $scope.data. Vì vậy, để khắc phục điều này, bạn cần phải loại bỏ việc tiêm dữ liệu từ cuộc gọi điều khiển của bạn.

var rt = angular.module("ResolveTest",[]); 

rt.config(["$routeProvider",function($routeProvider) 
{ 
    $routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: ["$q","$timeout",function($q,$timeout) 
     { 
     var deferred = $q.defer(); 

     $timeout(function() 
     { 
      deferred.resolve("my data value"); 
     },2000); 

     return deferred.promise; 
     }] 
    } 
    }); 
}]); 

rt.controller("ResolveCtrl",["$scope", function($scope) 
{ 
    $scope.data = ""; 
}]);

Nếu bạn muốn có một nhà cung cấp dữ liệu thêm một cái gì đó nhà máy như

rt.factory('data', ['$http', function($http){ 
return { 
    // Functions to get data here 
} 
}]);

Sau đó, trong cuộc gọi điều khiển của bạn chức năng phù hợp từ nhà máy này. Cũng như những người khác đã chỉ ra bạn không cần bộ điều khiển cả trong tuyến đường của bạn và trong một ng-điều khiển (điều này sẽ làm tổ bộ điều khiển của bạn trong bộ điều khiển của bạn nếu bạn kiểm tra phạm vi).

Nếu bạn phải sử dụng giải pháp bạn vẫn cần một nhà máy như giải quyết sẽ chỉ trỏ đến nhà máy thích hợp cần được khai báo riêng.

Nguồn

2013-05-31 03:10:09

Nếu giải quyết là một hàm trả về một lời hứa, nó được giải quyết sau đó được đưa vào bộ điều khiển. – Hilo

Theo angularjs documentation for $routeprovider đối tượng giải quyết là bản đồ từ khóa (tên phụ thuộc) đến chức năng của nhà máy hoặc tên của dịch vụ hiện có. Hãy thử thay thế này:

var myFactory = function($q, $timeout) { ... }; 
myFactory.$inject = ['$q', '$timeout']; 

$routeProvider.when("/",{ 
    templateUrl: "rt.html", 
    controller: "ResolveCtrl", 
    resolve: { 
     data: myFactory 
    } 
});

Nguồn

2013-05-31 03:10:43 robbymurphy

Từ AngularJS $ routeProvider doc để giải quyết: factory - {string | function}: Nếu chuỗi thì đó là bí danh cho một dịch vụ. Nếu không, nếu chức năng, sau đó nó được tiêm và giá trị trả về được coi là phụ thuộc. Nếu kết quả là một lời hứa, nó được giải quyết trước khi giá trị của nó được tiêm vào bộ điều khiển. – Hilo

Simple Angular $ routeProvider giải quyết kiểm tra. Có gì sai với mã này?

Trả lời

Các vấn đề liên quan