如何使用rails服务器在Angular中获取索引数据
我开始使用Angularjs + rails后端并尝试从服务器获取用户数据 – 相当于rails中的controller/index
操作。
我已经按照几个教程,发现这个代码是最明确的….
问题 1.如何正确地将角度模块链接到视图中? 2.如何使用此post中的typeahead和sample数据获取数据。
这里是代码的plunker版本
代码如下:
意见
Model: {{result | json}}调节器
// ['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; };
我在这里堆叠,因为我收到此错误:
Error: Unknown provider: usersProvider <- users
此代码的目标是使用typehead并向用户提供数据。
我的’/users.json’url如下:
[{"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"}]
您必须注入
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资源