Rails 产量和 AngularJs 路由器答案

【问题标题】：Rails yield and AngularJs routerRails 产量和 AngularJs 路由器
【发布时间】：2013-08-05 10:36:56
【问题描述】：

我正在使用带有 Rails 的 angularJs，并且我使用这种布局：

!!! 5
%html(lang="en"){"ng-app"=>"MyApp"}
  %head
    %meta(charset="utf-8")
    %meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
    %title= content_for?(:title) ? yield(:title) : "MyApp"
    = csrf_meta_tags
    / Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"

    /[if lt IE 8]
      = stylesheet_link_tag "application-ie", :media => "all"

    = stylesheet_link_tag "application", :media => "all"
    %link(href="assets/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144")
    %link(href="assets/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114")
    %link(href="assets/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72")
    %link(href="assets/apple-touch-icon.png" rel="apple-touch-icon-precomposed")
    %link(href="assets/favicon.ico" rel="shortcut icon")


  %body
    .container.content
      .row-fluid.notifications
        - if alert || notice
          .span12
            - if alert
              .alert.alert-error= alert
            - if notice
              .alert.alert-info= notice


      .row-fluid
        .span12{"ng-view" => ""}
          = yield

    = javascript_include_tag "application"
    = yield :javascript

我的问题是：当我对 rails url 执行操作时（例如：设计登录 url）Angular js 删除了我的收益的所有内容，因为没有 AngularJs 路由与当前路由匹配：

window.App = angular.module('MyApp', ['ngResource', 'ng-rails-csrf','ui.bootstrap']).config(['$routeProvider', '$locationProvider' ,
($routeProvider, $locationProvider) ->
  #$locationProvider.hashPrefix('');
  $locationProvider.html5Mode true
  $routeProvider.when("/applications",
    controller: 'ApplicationListCtrl'
    templateUrl: '/applications.html?l=false'
  )
])

我该如何管理？

【问题讨论】：

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

【解决方案1】：

这可能比它的价值多一点工作，但我对这个问题的 hacky 解决方案是渲染基本上是空的 rails 视图，除了带有 ng-view 或 ui-view 指令的简单 div 标记之外什么都没有。例如，不要将ng-view 放在application.html.erb 中，而是将其放在show.html.erb 中，您希望Angular 模板填充视图而不是rails 视图。

所以你的application.html.erb 可能看起来像：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>My Application</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>

然后您的login.html.erb 将充满rails 逻辑和正常的erb 模板。但是当你的用户登录时，你可以将他们重定向到我提到的那个基本上是空的模板，它只包含一个ng-view。

所以如果他们被重定向到users/show show.html.erb 看起来像：

<section ng-view>

</section>

【讨论】：

【解决方案2】：

在我们的应用程序中，我们在控制器中使用类级别变量来识别页面是否应该包含角度挂钩。这样我们就可以打开和关闭它们。在我们的例子中，默认行为是关闭的，我们专门为我们网站的有角度的区域打开它（因为我们的大多数网站都不是有角度的）。在大多数网站都是有角度的情况下，您可以反向使用该变量。

class MyController < ApplicationController
  def angular_page
    @use_angular = true
  end
  def non_angular_page
    # do nothing
  end
end

在 layouts/application.html.erb 中

  .row-fluid
    -if @use_angular
      .span12{"ng-view" => ""}
        = yield
    -else
      .span12
        = yield

【讨论】：