AngularJS 没有显示我的 ng-view

Question

我正在尝试使用rails 做一个简单的角度应用程序。出于某种原因，当我查看检查器时，我的 <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 的讨论控制器中。

Answer 1

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

我会检查两件事：

1. 你的otherwise 路由有一个redirectTo: /discussions。这是一条空白路由，因为您定义的唯一其他路由是/discussion（没有）。如果您没有导航到discussion，那么您将看到一个空视图。

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

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

对 EDIT 1 的回应

请务必记住，Angular 是一个单页应用程序 (SPA) 框架。它处理一个 html 页面。因此，如果http://localhost:3000/user/:slug/ 的示例网址与http://localhost:3000/ 和http://localhost:3000/anything/else/:id 提供完全相同的页面（例如application.html）会更好，并且您的角度路由器会完成其余的工作。

为此，我将在位置提供程序中打开 html 5 模式，方法是将其添加到您的 .config() 块中：

$locationProvider.html5Mode(true)

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

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

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

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

来自文档的片段：

// 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。