ruby-on-rails - AngularJS 没有显示我的 ng-view

Question

我正在尝试用 Rails 做一个简单的 Angular 应用程序。出于某种原因，我的 <div ng-view></div> html标签显示为<!-- ngView: -->当我查看检查器时。我在控制台中没有收到任何错误。我是 Angularjs 的新手，我不明白为什么会这样。下面是我的代码，希望我已经包含了所有内容来给你一个想法。我正在使用“angular-rails-templates”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>

app.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' })
])

indexCtrl.js.coffee

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

index.html

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

编辑 1

我有一条 Rails 路线，它是 http://localhost:3000/user/:slug/我想在这个页面上使用 Angular.js 和我的讨论路线，所以它最终会是 http://localhost:3000/user/:slug/#/discussions .设置 Angular.js 路由的正确方法是什么？最好存储 :slug在我的 Angular 的讨论 Controller 中。

Answer 1

您的代码应该适用于discussion 路线。

我会检查两件事:

1. 您的otherwise 路由有一个redirectTo:/discussions。这是一条空白路线，因为您定义的唯一其他路线是 /discussion(无 s)。如果您没有导航到 discussion，那么您将看到一个空 View 。

2. 仔细检查您的模板 gem 生成的 javascript 代码是否填充了 'angular/templates/discussions/index.html' 的 templateCache。我使用了类似的东西，其中包括 .haml 扩展名。还要确认您在 Angular 应用程序之前加载模板 javascript。

3. 如果以上两项都正确，您能否确认您看到控制台打印了 "hello"？

对 EDIT 1 的回应

重要的是要记住，angular 是一个单页应用程序 (SPA) 框架。它处理一个 html 页面。因此，如果 http://localhost:3000/user/:slug/ 的示例 url 提供完全相同的页面(例如 application.html)会更好作为 http://localhost:3000/ 和 http://localhost:3000/anything/else/:id，剩下的由你的 Angular 路由器完成。

为此，我会通过将其添加到您的 .config() block 中来在位置提供程序中打开 html 5 模式:

$locationProvider.html5Mode(true)

这意味着您的 URL 不再使用 #，因此 /#/discussions 将变为 /discussions。这将立即起作用，但您会注意到，如果您刷新页面，您的服务器将以 404 响应。要解决此问题，您需要使任何非 api 路由返回相同的 application.html 页面(不过，不是重定向到 /，只是返回页面)。 Angular 会自动查看路径并计算出它应该显示的路线。

然后，在您的路由提供者配置中，您可以指定:

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

你可以使用 $routeParams在您的 Controller 中访问相关信息。

来自文档的片段:

// 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'}

P.S 当我第一次进行这种转换时，我将 API 路由与普通路由混合在一起，因此 /users 会返回 JSON，/login 将返回一个 html 页面。我发现将所有 API 路由放在 /api 下MUCH 更清晰，所以 /users 变成了 /api/users。这使得返回 application.html 的任务变得微不足道，而不会破坏您的 API:如果它不是以 /api 开头，则返回 application.html.