在 Rails 上配置 AngularJS 路由答案

【问题标题】：Configuring AngularJS Routes on Rails在 Rails 上配置 AngularJS 路由
【发布时间】：2014-09-16 21:05:34
【问题描述】：

我很难在 Rails 上配置 AngularJS 路由。我知道这是一个基本概念并已阅读：http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/，但似乎我仍然有点困惑。

我目前有一个 Rails routes.rb 文件，我想将其设置为首先处理 angularRoutes，如果它不是 angularRoutes，则回退到 rails。上面的链接说包括以下两行代码：

 root 'application#index'
 get '*path' => 'application#index'

这会将根页面定向到应用程序控制器的索引方法。在那种情况下，我不太确定 Angular 是如何有机会进行路由的。

我不确定在我的 Rails 项目的 routes.rb 文件中放置什么，以便 Angular 路由首先执行。

我的角度路线：

# Define the carmel application
@carmel = angular.module('carmel',
    'ui.bootstrap',
    'ngRoute',
    'templates',
])

# Define our routes
 @carmel.config([
   '$routeProvider',
   '$locationProvider',
   ($routeProvider, $locationProvider) ->

    console.log("HEre1");

    $routeProvider.when '/',
        templateUrl: '<%= asset_path("production/index.html") %>'
        controller:  'ProductionIndexCtrl'
        resolve: {

        }

    # So we don't have "#" in the url's.  Magic.
    $locationProvider.html5Mode true
])

（我希望根路径指向我的 angular templateURL 和控制器，目前我遇到了错误。）

ActionView::MissingTemplate at /

缺少带有 {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee 的模板应用程序/索引, :haml]}。在以下位置搜索：*“/Users/simon_zhu/Documents/carmel/app/views”*“/Users/simon_zhu/.rvm/gems/ruby-2.1.0/gems/jasmine-rails-0.9.0/app/views” * "/Users/simon_zhu/.rvm/gems/ruby-2.1.0/gems/devise-3.2.4/app/views"

【问题讨论】：

你在哪里定义你的观点？
我试图渲染的视图在 app/assets/templates/production/index.html.erb 下，控制器在 app/assets/javascripts/controllers/ProductionIndexCtrl.js.coffee 下

标签： javascript ruby-on-rails angularjs ruby-on-rails-3

【解决方案1】：

您需要在Application#index 操作中呈现视图。

您的routes.rb 文件正在点击ApplicationController 的#index 操作，如果您没有设置自己的render 或redirect 操作，则默认为render :index。您的错误来自 Rails 无法找到此视图。

最简单的方法是在views 下创建一个application 文件夹并创建一个简单的index.html.erb。这将默认使用app/views/layout 中的application.html.erb 布局文件，该文件应链接您的application.js 清单，该清单应列出您的Angular 文件。

\_ app
  \_ views
    \_ application
     |  - index.html.erb
    \_ layouts
     |  - application.html.erb

只要您的组合 app/views/application/index.html.erb 和 app/views/layout/application.html.erb 定义了 ng-app 和 ng-view，您应该能够看到您的 Angular 代码正在运行。

【讨论】：