2013-08-05 18 views
0

我使用和Rails angularJs我用这个布局: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标志)角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' 
) 
]) 

如何管理的?

回答

0

可能超过其价值多一点的工作,但我的哈克解决这个问题已经基本呈现什么也没有空轨的意见,但一个简单的div标签与ng-viewui-view指令。因此,例如,不要将ng-view放在application.html.erb中,而只是将它放在show.html.erb中,您希望使用Angular模板填充视图而不是导轨视图。

所以你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将充满轨道逻辑和正常ERB模板。但是,当用户登录时,可以将它们重定向到我提到的基本上为空的模板,它只包含一个ng-view

所以,如果他们被重定向到users/showshow.html.erb会是什么样子:

<section ng-view> 

</section> 
0

在我们的应用程序,我们使用一个类级别的变量在我们的控制器,以确定一个页面是否应该包括角钩与否。这样我们就可以打开和关闭它们。在我们的例子中,默认行为是关闭的,我们专门打开我们网站的角度区域(因为我们大多数网站不是角度的)。在大多数站点是角度的情况下,您可以反向使用该变量。

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

在布局/ application.html.erb

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