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

I have created rails view (ERB). However, I want to integrate it into angularjs $routeProvider, but I don't know what url should I fill into templateUrl to give me the appropriate rails view. For example, I tried:

我创建了rails视图(ERB)。但是,我想将它集成到angularjs $ routeProvider中,但我不知道我应该填写什么url到templateUrl中以给我相应的rails视图。例如,我尝试过:

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

But the result appears as a blank page. Are the two features even integrateable? Or do I have to create new .html files, instead of using preexisting .html.erb

但结果显示为空白页面。这两个功能是否可以整合?或者我是否必须创建新的.html文件,而不是使用预先存在的.html.erb

2 个解决方案

#1

Angular js provides its own routes. rails routes will always be used when you want to connect your views with database(CRUD). that is data binding with angular.js now i will show you how to use it with rails...

Angular js提供自己的路线。当您想要将视图与数据库(CRUD)连接时,将始终使用rails路由。这是与angular.js的数据绑定现在我将向您展示如何使用rails ...

I want to add new user using angular js views and list all users. i will use rails as backend to store users in database so i will create user_controller

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

First Create resource of user. we will not create any views so be carefull for that

首先创建用户资源。我们不会创建任何视图,所以要小心
```
rails g resource user name:string
```
Then go to route.rb and check there is a route created, and create Home controller with index action that we will use as our single page application where our output will be yield.

然后转到route.rb并检查是否有创建的路由,并创建带有索引操作的Home控制器,我们将使用它作为单页面应用程序,我们的输出将是yield。
```
rails g controller home index
root to: "home#index"
```
type this command on terminal where you will see our 7 routes. we never use new and edit method, because new and edit don't respond to json.

在终端上输入此命令,您将看到我们的7条路线。我们从不使用new和edit方法,因为new和edit不响应json。
```
rake routes
```
Now we want all user with a unique name so go to create_user migration and uncomment this line and then we will migrate the database.

现在我们希望所有用户都具有唯一名称,因此请转到create_user migration并取消注释该行,然后我们将迁移数据库。
```
add_index :users, :name, unique: true
rake db:migrate
```
Now modify our controller so that all data fetching and insertion will be done with json format. so put this code inside users_controller.rb, if you are using rails 4 then follow this otherwise not. attributes will be adjustable in model.

现在修改我们的控制器,以便所有数据获取和插入都将以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
```
Its time to use angulajs in our rails application

是时候在我们的rails应用程序中使用angulajs了
Go to application.html.erb replace tag line with this

转到application.html.erb替换标记行
```
 <html ng-app="userApp">
```
Now add angular.js file in asses/javascripts, download it from http://angularjs.org/

现在在asses / javascripts中添加angular.js文件,从http://angularjs.org/下载
Now we will create a controller to handle our angular application routes to know then that this controller wants something from me. so type this on terminal

现在我们将创建一个控制器来处理我们的角度应用程序路由,然后知道这个控制器需要我的东西。所以在终端上键入
```
mkdir -p app/assets/javascripts/angular/controllers
```
Now let's create the controller file itself. I'm calling this controller the "userCtrl", Thus our filename will be app/assets/javascripts/angular/controllers/userCtrl.js.coffee

现在让我们自己创建控制器文件。我将此控制器称为“userCtrl”,因此我们的文件名将是app / assets / javascripts / angular / controllers / userCtrl.js.coffee

In controller userCtrl

在控制器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)

(This will insert new user record into database, by creating createUser method)

(这将通过创建createUser方法将新用户记录插入到数据库中)

Create a view for taking input from user write this code in home/index.html.erb.

创建一个视图,用于从用户那里获取输入,在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>

Run application and watch output.

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

#2

In this page, it gives a 'Hello World' example of scaffolding Angularjs + Rails. (Please ignore the extra parts for additional functions.) When you type any name,then get a Hello message displayed for him, you've got a functional Angularjs + rails app.

在这个页面中,它给出了一个脚手架Angularjs + Rails的“Hello World”示例。 (请忽略附加功能的额外部分。)当您键入任何名称,然后显示为他显示的Hello消息时,您有一个功能强大的Angularjs + rails应用程序。

A couple of points to share:

分享几点:

A simple way to include angular.js file:

包含angular.js文件的简单方法:
1. Put gem 'angularjs-rails' in your Gemfile;
  
  将gem'angularjs-rails'放入你的Gemfile中;
2. Then put //= require angular in your app/assets/javascripts/application.js file.
  
  然后在app / assets / javascripts / application.js文件中输入// = require angular。
3. Very likely you will need //= require angular-resource so that you can use ngResource services to access the RESTful API provided by rails applicaiton from server end. See this page for examples.
  
  您很可能需要// = require angular-resource,以便您可以使用ngResource服务从服务器端访问rails应用程序提供的RESTful API。有关示例,请参阅此页面。
Include Rails-controller-specific javascript codes in layout this way:

以这种方式在布局中包含Rails-controller特定的javascript代码:
1. Add the following codes to app/views/layouts/applications.html.erb file after the line <%= yield %>:
  
  在<%= yield%>行之后将以下代码添加到app / views / layouts / applications.html.erb文件中:
```
<%= 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 %>
```
2. Remove //= require_tree . from application.js.
  
  删除// = require_tree。来自application.js。

Include the following codes in config/initializers/assets.rb for precompiling js and css files:

在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

#1