角度注射（未知供應商）

Question

我想從我的服務器api獲取一些json數據。網址是/ contacts。 我收到關於未知提供者的錯誤，但我不明白我在這裏做錯了什麼。我再次修改了代碼，但似乎再次發生。

(function() { 
 

 
    var app = angular.module('test', ['ngRoute', 'Contacts', '$http']); 
 

 
    app.config(function($routeProvider, $locationProvider) { 
 
    $locationProvider.html5Mode(true); 
 

 
    $routeProvider 
 
     .when("/", { 
 
      templateUrl: "partials/main.html", 
 
      controller: "contactsCtrl" 
 
     }) 
 
     .otherwise({redirectTo:"/"}); 
 

 
    }); 
 
    
 
    app.service('Contacts', function($scope, $http) { 
 
    this.data = null; 
 

 
    this.all = function() { 
 
     $http.get('/contacts'). 
 
     success(function(data) { 
 
     $scope.contacts = data; 
 
     }) 
 
    }; 
 
    }); 
 
    
 
    app.controller('contactsCtrl', function($scope, Contacts) { 
 
    Contacts.all().query(function(data) { 
 
     $scope.contacts = data; 
 
    }); 
 
    }); 
 
    
 
    
 
}());

<table class="table table-bordered"> 
 
    <thead> 
 
    <th>Firstname <input type="search" class="pull-right"></th> 
 
    </thead> 
 
    <tbody> 
 
    <tr ng-repeat="contact in contacts"> 
 
     <td> 
 
     <a ng-href="/edit/{{ contact.firstname }}">{{ contact.firstname }}</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

您正在注入聯繫人作爲這裏一個新的模塊：

var app = angular.module('test', ['ngRoute', 'Contacts', '$http']); 

你不需要這個作爲聯繫人是服務和相同的模塊的一部分。更新此行：

var app = angular.module('test', ['ngRoute', '$http']); 

Answer 2

角模塊，通過它們注入到你的應用程序在這裏工作。

var app = angular.module('test', ['ngRoute']); 

你需要做的事情是這樣的。

var app = angular.module('test', ['ngRoute','http']); 

這是我目前在我的一個項目中使用的一個正在工作的http請求的示例。

var data = $.param({ 
     workers: JSON.stringify({ 
      user_name: "name", 
      password: "work", 
      email: "work@work" 
     }) 
    }); 

    $http.post("http://ec2-xx-x-xx-xx.compute-1.amazonaws.com/api/user/reg", data).success(function(data, status) {   
     $scope.user = data.user_name; 
     $scope.email = data.email; 
     $scope.access_token = data.access_token; 
    }); 

Answer 3

的問題是你想注入$scope到您的service。

作用域是應用程序控制器和視圖之間的粘連。

請看documentation。取而代之的

app.service('Contacts', function($scope, $http) { 
    this.all = function() { 
    $http.get('/contacts'). 
    success(function(data) { 
     $scope.contacts = data; 
    }) 
    }; 
}); 

嘗試

app.service('Contacts', function($http) { 
    this.all = function() { 
    return $http.get('/contacts'); 
    }; 
}); 

而不是

app.controller('contactsCtrl', function($scope, Contacts) { 
    Contacts.all().query(function(data) { 
    $scope.contacts = data; 
    }); 
}); 

嘗試

app.controller('contactsCtrl', function($scope, Contacts) { 
    Contacts.all().then(function(data) { 
    $scope.contacts = data; 
    }); 
});