ruby-on-rails - Railsビューをangularjs ng-viewと統合するには?

Question

Rails View (ERB) を作成しました。ただし、 angularjs に統合したいのですが、適切なレールビューを表示するに$routeProviderはどの URL を入力すればよいかわかりません。templateUrlたとえば、私は試しました：

$routeProvider.when('/pages/foo', {
templateUrl: "/pages/foo",                  
controller: "PageFoo"
                })

しかし、結果は空白のページとして表示されます。2 つの機能は統合可能ですか? .htmlまたは、既存のファイルを使用する代わりに、新しいファイルを作成する必要がありますか?.html.erb

score 16 · Accepted Answer

Angular js は独自のルートを提供します。ビューをデータベース (CRUD) に接続する場合は、常に rails ルートが使用されます。これは angular.js を使用したデータバインディングです。レールで使用する方法を説明します...

angular js ビューを使用して新しいユーザーを追加し、すべてのユーザーを一覧表示したいと考えています。Rails をバックエンドとして使用してユーザーをデータベースに保存するので、user_controller を作成します。

最初にユーザーのリソースを作成します。ビューは作成しないので注意してください
```
rails g resource user name:string
```
次に、route.rb に移動し、ルートが作成されていることを確認し、出力が生成される単一ページアプリケーションとして使用するインデックスアクションを含むホームコントローラーを作成します。
```
rails g controller home index
root to: "home#index"
```
ターミナルでこのコマンドを入力すると、7 つのルートが表示されます。new と edit は json に応答しないため、new と edit メソッドは使用しません。
```
rake routes
```
ここで、一意の名前を持つすべてのユーザーが必要なため、create_user migration に移動し、この行のコメントを解除してから、データベースを移行します。
```
add_index :users, :name, unique: true
rake db:migrate
```
すべてのデータのフェッチと挿入が json 形式で行われるように、コントローラーを変更します。Rails 4を使用している場合は、このコードをusers_controller.rb内に配置してください。それ以外の場合は、これに従ってください。属性はモデルで調整できます。
```
class UsersController < ApplicationController
  respond_to :json

  def index
    respond_with User.all
  end

  def create
    respond_with User.create(user_params)
  end

  private
    def user_params
      params.require(:user).permit(:name)
    end
end
```
Railsアプリケーションでangulajsを使用する時が来ました
application.html.erb に移動し、タグ行をこれに置き換えます
```
 <html ng-app="userApp">
```
ここで、angular.js ファイルを asses/javascripts に追加し、http: //angularjs.org/ からダウンロードします。
次に、Angular アプリケーションルートを処理するコントローラーを作成して、このコントローラーが私から何かを要求していることを認識します。ターミナルでこれを入力します
```
mkdir -p app/assets/javascripts/angular/controllers
```
それでは、コントローラーファイル自体を作成しましょう。このコントローラーを「userCtrl」と呼んでいるため、ファイル名は app/assets/javascripts/angular/controllers/userCtrl.js.coffee になります。

コントローラー内 userCtrl

app = angular.module("userApp", ["ngResource"])

@userCtrl = ($scope, $resource) ->
  User = $resource("/users", {id: "@id"}, {update: {method: "PUT"}})
  $scope.users = User.query()

  $scope.createUser = ->
    user = User.save($scope.newUser)
    $scope.users.push(user)

(これにより、createUser メソッドを作成して、データベースに新しいユーザーレコードが挿入されます)

ユーザーから入力を取得するためのビューを作成し、このコードを home/index.html.erb に記述します。

<div ng-controller="userCtrl">
  <form ng-submit="createUser()">
    <label>Enter Name</label>
    <input type="text" placeholder="Enter user name" ng-model="newUser.name" />
    <button ng-click="createUser()" class="button tiny">Submit</button>
  </form>


  <!-- List all usres -->
  <h4 ng-show="users.$resolved && users.length > 1">All users</h4>
    <span ng-repeat="c in users">
      {{c.name}}<br>
    </span>
</div>

アプリケーションを実行し、出力を監視します。

ruby-on-rails - Railsビューをangularjs ng-viewと統合するには?

2 に答える 2

Related

Reference