How to get index data in Angular using rails server

Question

I start with the Angularjs + rails backend and try to get user data from the server, which is equivalent to the controller/index action in rails.

I followed several tutorials and found this code most clear.

questions 1. How to properly connect the angular module with views? 2. How to get data using type data and sample data in this message.

here is the version of the code plunker

The code is as follows:

view

 <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> 

controller

 <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> 

and I came across here since I get this error:

 Error: Unknown provider: usersProvider <- users 

The purpose of this code is to use typehead and provide data to the user.

The URL of my '/users.json' is as follows:

 [{"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

You must enter Users not Users , it is case sensitive.

---

Side notes:

No need to create two models, replace:

 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' } }); }); 

from:

 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' } }); }) 

Another thing in your controller:

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

Last, consider using Angular Resource Rails