角注入（未知的提供者）

Question

I am trying to get some json data from my server api. The url is /contacts. I am getting an error about unknown provider but I don't understand what I am doing wrong here. I have amended the code again but it seems to happen again.

 (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

Angular modules work by injecting them into your application here.

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

What you need to do would look like this.

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

Here is an example of a working http request I'm currently using in a project of mine.

  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 2

You are currently injecting Contacts as a new module here:

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

You don't need this as Contacts is a service and part of the same module. Update this line to:

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

Answer 3

The problem is you're trying to inject $scope into your service .

Scope is the glue between application controller and the view.

Please have a look at the documentation .

Instead of

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

Try

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

Instead of

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

Try

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