如何使用Rails服務器在Angular中獲取索引數據

Question

我從Angularjs + rails後端開始嘗試從服務器獲取用戶數據 - 相當於在rails中的controller/index動作。

我已經跟着幾個教程，發現這個代碼是最明確的一個....

問題 1.如何正確鏈接角模塊插入看法？ 2.如何在本文中使用typeahead和示例數據獲取數據。

這裏是plunker version of the code

代碼如下：

意見

<div ng-app='users'> 
    <div class='container-fluid' ng-controller="UsersIndexCtrl"> 
    <pre>Model: {{result | json}}</pre> 
    <input type="text" ng-model="result" typeahead="suggestion for suggestion in users($viewValue)"> 
    </div> 
</div> 

控制器

<script> 

    // ['ui.bootstrap', 'ngResource']) 

var app = angular.module('users', ['ui.bootstrap', 'ngResource']); 


// factory - resources users 
// equivalent to rails users/index 
      app.factory('Users', function($resource) { 
       return $resource('/users.json', {}, { 
        index: { method: 'GET', isArray: true} 
       }); 
      }); 

// factory - user resource 
// equivalent to users show, update 
      app.factory('User', function($resource) { 
       return $resource('/users/:user_id.json', {}, { 
        show: { method: 'GET' }, 
        update: { method: 'PUT' } 
       }); 
      }); 

// controller - users/ index 
// equivalent to rails controller rails/index 

    var UsersIndexCtrl = function($scope, users) { 

     $scope.users = users; 
    }; 

</script> 

，我堆了她e，因爲我收到此錯誤：

Error: Unknown provider: usersProvider <- users 

此代碼的目標是使用打印頭並向用戶提供數據。

我 '/users.json' 網址如下：

[{"full_name":"Lia Cartwright","id":1,"image_url":"no-icon.jpg"},{"full_name":"Hilton Turner","id":2,"image_url":"no-icon.jpg"},{"full_name":"Aubrey Barrows","id":3,"image_url":"no-icon.jpg"},{"full_name":"Donnie Kris","id":4,"image_url":"no-icon.jpg"},{"full_name":"Eryn Rath","id":5,"image_url":"no-icon.jpg"},{"full_name":"Caden Fay","id":6,"image_url":"no-icon.jpg"},{"full_name":"Arlie Tromp","id":7,"image_url":"no-icon.jpg"},{"full_name":"Rico Klein","id":8,"image_url":"no-icon.jpg"},{"full_name":"Gudrun Dare","id":9,"image_url":"no-icon.jpg"},{"full_name":"Nathan Langworth","id":10,"image_url":"no-icon.jpg"},{"full_name":"Deanna Stroman","id":11,"image_url":"no-icon.jpg"},{"full_name":"Shania Stroman","id":12,"image_url":"no-icon.jpg"},{"full_name":"Lupe Harvey","id":13,"image_url":"no-icon.jpg"},{"full_name":"Constance Armstrong","id":14,"image_url":"no-icon.jpg"},{"full_name":"Reagan Tremblay","id":15,"image_url":"no-icon.jpg"},{"full_name":"Murray Sipes","id":16,"image_url":"no-icon.jpg"},{"full_name":"Dandre Klocko","id":17,"image_url":"no-icon.jpg"},{"full_name":"Haylee Monahan","id":18,"image_url":"no-icon.jpg"},{"full_name":"Florence Harber","id":19,"image_url":"no-icon.jpg"},{"full_name":"Norberto Hoppe","id":20,"image_url":"no-icon.jpg"}] 

Answer 1

你必須注入Users不users，它是區分大小寫的。

---

旁註：

無需創建兩個型號，替代：

app.factory('Users', function($resource) { 
    return $resource('/users.json', {}, { 
    index: { method: 'GET', isArray: true} 
    }); 
}); 

app.factory('User', function($resource) { 
    return $resource('/users/:user_id.json', {}, { 
    show: { method: 'GET' }, 
    update: { method: 'PUT' } 
    }); 
}); 

有：

app.factory('User', function($resource) { 
    return $resource("users/:id", { id: '@id' }, { 
    index: { method: 'GET', isArray: true, responseType: 'json' }, 
    show: { method: 'GET', responseType: 'json' }, 
    update: { method: 'PUT', responseType: 'json' } 
    }); 
}) 

其他的東西，在你的控制器，請：

var UsersIndexCtrl = function($scope, User) { 
    $scope.users = User.index(); 
}; 

最後一件事，考慮使用：Angular Rails resource