Ruby on rails AngularJS未显示我的ng视图

我正在尝试用rails做一个简单的角度应用程序。由于某些原因，当我查看检查器时，我的

html标记显示为

。我在控制台中没有收到任何错误。我是Angularjs的新手，我不明白为什么会发生这种情况。下面是我的代码，希望我已经包括了一切给你一个想法。我正在使用“AngularRails模板”gem，它允许我在angular的模板缓存中添加html模板

application.html.haml

!!! 5
%html{'ng-app'=>'AD'}
  %head
    = stylesheet_link_tag "application", media: "screen", "data-turbolinks-track" => true
    = javascript_include_tag "application", "angular/discussions_app", "data-turbolinks-track" => true
  %body
   .col-sm-12
     :plain
       <div ng-view></div>

indexCtrl.js.coffee

#= require_self
#= require_tree ./controllers
#= require_tree ./directives
#= require_tree ./filters
#= require_tree ./services

# Creates new Angular module called 'AD'
@AD = angular.module('AD', ['ngRoute', 'templates'])

# Sets up routing
@AD.config(['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when('/discussion', { templateUrl: 'angular/templates/discussions/index.html', controller: 'DiscussionsIndexCtrl' } )
    .otherwise({ redirectTo: '/discussions' })
])

@AD.controller 'DiscussionsIndexCtrl', ($scope) ->
   console.log 'hello'

index.html

<h1 class="text-center">Hello World</h1>

你好，世界

编辑1

---

我有一条铁路路线是

http://localhost:3000/user/:slug/

我想在这个页面上使用Angular.js和我的讨论路线，这样它最终会成为

http://localhost:3000/user/:slug/#/discussions

。设置Angular.js路由的正确方法是什么？最好将

：slug

存储在my Angular的讨论控制器中。

您的代码应该适用于

讨论

路线

我要检查两件事：

您的

否则

路线有一个

重定向到：/discussion

s

。这是一条空白路线，因为您定义的唯一其他路线是

/discussion

（无）。如果您没有导航到

讨论

，则会得到一个空视图

仔细检查模板gem生成的javascript代码是否正在填充

'angular/templates/discussions/index.html'

的templateCache。我使用了类似的东西，包括

.haml

扩展。还要确认您正在angular应用程序之前加载javascript模板

如果以上两项都正确，您是否可以验证您是否看到控制台上打印的

“hello”

对编辑1的响应

记住angular是一个单页应用程序（SPA）框架，这一点很重要。它处理onehtml页面。因此，如果

http://localhost:3000/user/:slug/

提供与

http://localhost:3000/

和

http://localhost:3000/anything/else/:id

，其余部分由您的角度路由器完成

为此，我将在位置提供程序中打开html 5模式，方法是将其添加到

.config（）

块中：

$locationProvider.html5Mode(true)

这将意味着您的URL不再使用

，因此

/\35;/discussions

将变成

/discussions

。这将立即起作用，但您会注意到，如果刷新页面，服务器将以404响应。要解决此问题，您需要使任何非api路由返回相同的

application.html

页面（但不是重定向到

/

，只需返回页面即可）。Angular自动查看路径并计算出它应该显示的路径

然后，在routeprovider配置中，可以指定：

.when('/user/:slug/discussions', 
  { 
    templateUrl: 'angular/templates/discussions/index.html', 
    controller: 'DiscussionsIndexCtrl' 
  } 
)

您可以在控制器中使用来访问相关信息

文档中的代码片段：

---

p.S当我第一次进行此转换时，我将API路由与普通路由混合在一起，因此当

/users

返回JSON时，

/login

将返回html页面。我发现将所有API路由放在

/API

下更加清晰，因此

/users

变成了

/API/users

。这样，在不破坏API的情况下返回

application.html

的任务就变得很简单了：如果它不是以

/API

开头的，那么返回

application.html

您导航到的URL是什么？您好，谢谢，选项1成功了…有时是小问题。谢谢你指出这一点。就记录而言，我已经做了2次，但在控制台中没有看到

hello

。你能帮我修改我的

编辑1

吗？如果我的答案有帮助，请接受/投票：）。我现在将尝试回复您的编辑..p.s。由于问题1，您无法看到hello：您走错了路线，因此未使用模板或控制器。谢谢，非常有用！

api

路由是一个很好的提示。问题是我只想在这个页面上使用Angularjs，这样我就可以开发一个讨论组件，而不是整个页面将只使用Angularjs的讨论组件。因此，当用户登录此页面时

http://localhost:3000/user/:slug/

组件将通过Angularjs加载。当然，如果我只为这个页面提供

application.html

，它会破坏网站中的其他页面，因为这些页面使用rails方式，或者可能我还不太明白你想说什么？也许Angularjs不是我要找的？如果我理解正确，你只想使用Angularjs进行讨论，那么你是对的，你不需要像我详细介绍的那样使用routeprovider。相反，必须使用正则表达式和

$location

访问

：slug

的值。

// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}