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

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

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

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

Answer 1

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

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

1. 首先创建用户资源。 我们不会创建任何视图，所以要小心

    rails g resource user name:string 

2. 然后转到route.rb并检查是否有创建的路由，并创建带有索引操作的Home控制器，我们将使用它作为单页面应用程序，我们的输出将是yield。

    rails g controller home index root to: "home#index" 

3. 在终端上输入此命令，您将看到我们的7条路线。 我们从不使用new和edit方法，因为new和edit不响应json。

    rake routes 

4. 现在我们希望所有用户都具有唯一名称，因此请转到create_user migration并取消注释该行，然后我们将迁移数据库。

    add_index :users, :name, unique: true rake db:migrate 

5. 现在修改我们的控制器，以便所有数据获取和插入都将以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了

6. 转到application.html.erb替换标记行

7. 现在在asses / javascripts中添加angular.js文件，从http://angularjs.org/下载

8. 现在我们将创建一个控制器来处理我们的角度应用程序路由，然后知道这个控制器需要我的东西。 所以在终端上键入

    mkdir -p app/assets/javascripts/angular/controllers 

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

10. 在控制器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方法将新用户记录插入到数据库中）

11. 创建一个视图，用于从用户那里获取输入，在home / index.html.erb中编写此代码。

     
     
     Enter Name  Submit 
      
    All users
      {{c.name}}
       

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

Answer 2

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

分享几点：

• 包含angular.js文件的简单方法：

  1. 将gem 'angularjs-rails'放入你的Gemfile中;

  2. 然后在app/assets/javascripts/application.js文件中输入//= require angular 。

  3. 您很可能需要//= require angular-resource以便您可以使用ngResource服务从服务器端访问rails应用程序提供的RESTful API。 有关示例， 请参阅此页面 。

• 以这种方式在布局中包含Rails-controller特定的javascript代码：

  1. 在<%= 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. 删除//= 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