2

私は Angularjs + rails バックエンドから始めて、サーバーからユーザー データを取得しようとしています - controller/indexRails でのアクションと同等です。

私はいくつかのチュートリアルに従いましたが、このコードが最も明確なものであることがわかりました....

質問 1.Angularモジュールをビューに適切にリンクする方法は? 2. タイプアヘッドを使用してデータをフェッチする方法と、この投稿のサンプル データ。

ここにコードのプランカーバージョンがあります

コードは次のとおりです。

ビュー

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

このエラーが発生しているため、ここにスタックしています。

Error: Unknown provider: usersProvider <- users

このコードの目的は、タイプヘッドを使用してユーザーにデータを提供することです。

私の「/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"}]
4

1 に答える 1

6

Usersnotを挿入する必要がありusersます。大文字と小文字が区別されます。

補足:

2 つのモデルを作成する必要はありません。以下を置き換えます。

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 リソース

于 2013-08-19T11:47:54.223 に答える