ruby-on-rails - 如何将 Rails 视图与 angularjs ng-view 集成？

Question

我创建了 Rails 视图（ERB）。但是，我想将它集成到 angularjs$routeProvider中，但我不知道应该填写什么 urltemplateUrl才能给我适当的 rails 视图。例如，我试过：

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

但结果显示为空白页。这两个功能甚至可以集成吗？还是我必须创建新.html文件，而不是使用预先存在的.html.erb

score 16 · Accepted Answer

Angular js 提供了自己的路由。当您想将视图与数据库（CRUD）连接时，将始终使用 rails 路线。那是与 angular.js 的数据绑定，现在我将向您展示如何将它与 rails 一起使用...

我想使用 Angular js 视图添加新用户并列出所有用户。我将使用 rails 作为后端将用户存储在数据库中，因此我将创建 user_controller

首先创建用户资源。我们不会创建任何视图，所以要小心
```
rails g resource user name:string
```
然后转到 route.rb 并检查是否创建了一个路由，并创建带有 index 操作的 Home 控制器，我们将用作我们的单页应用程序，我们的输出将是 yield。
```
rails g controller home index
root to: "home#index"
```
在终端上输入此命令，您将看到我们的 7 条路线。我们从不使用 new 和 edit 方法，因为 new 和 edit 不响应 json。
```
rake routes
```
现在我们希望所有用户都有一个唯一的名称，所以转到 create_user 迁移并取消注释这一行，然后我们将迁移数据库。
```
add_index :users, :name, unique: true
rake db:migrate
```
现在修改我们的控制器，以便所有数据的获取和插入都以 json 格式完成。所以将此代码放在 users_controller.rb 中，如果您使用的是 rails 4，请遵循此代码，否则不要。属性将在模型中调整。
```
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">
```
现在在 asses/javascripts 中添加 angular.js 文件，从http://angularjs.org/下载
现在我们将创建一个控制器来处理我们的 Angular 应用程序路由，然后知道这个控制器想要我的东西。所以在终端上输入这个
```
mkdir -p app/assets/javascripts/angular/controllers
```
现在让我们自己创建控制器文件。我将此控制器称为“userCtrl”，因此我们的文件名将是 app/assets/javascripts/angular/controllers/userCtrl.js.coffee

在控制器用户Ctrl

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>

运行应用程序并观察输出。

score 1 · Accepted Answer

在这个页面中，它给出了一个 Angularjs + Rails 脚手架的“Hello World”示例。（请忽略附加功能的额外部分。）当您输入任何名称时，会为他显示一条 Hello 消息，您就有了一个功能性的 Angularjs + rails 应用程序。

分享几点：

包含 angular.js 文件的简单方法：
1. 放入gem 'angularjs-rails'您的 Gemfile；
2. 然后放入//= require angular你的app/assets/javascripts/application.js文件。
3. 您很可能需要//= require angular-resource使用 ngResource 服务从服务器端访问 rails applicaiton 提供的 RESTful API。有关示例，请参见此页面。

以这种方式在布局中包含特定于 Rails 控制器的 javascript 代码：

在该行之后将以下代码添加到app/views/layouts/applications.html.erb文件中<%= yield %>：

<%= page_specific_js = "#{params[:controller]}_#{params[:action]}" %>
<%= javascript_include_tag page_specific_js if Rails.application.assets.find_asset page_specific_js %>
<%= stylesheet_link_tag  page_specific_js if Rails.application.assets.find_asset page_specific_js %>

//= require_tree .从 application.js 中删除。

在 config/initializers/assets.rb 中包含以下代码，用于预编译 js 和 css 文件：

Rails.application.config.assets.precompile << Proc.new do |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path).to_path
    app_assets_path = Rails.root.join('app', 'assets').to_path
    if full_path.starts_with? app_assets_path
      puts "including asset: " + full_path
      true
    else
      puts "excluding asset: " + full_path
      false
    end
  else
    false
  end
end

ruby-on-rails - 如何将 Rails 视图与 angularjs ng-view 集成？

2 回答 2

Related

Reference