Question

我正在尝试用rails做一个简单的角度应用程序。由于某些原因，当我查看检查器时，我的<div ng-view></div> html标记显示为。我在控制台中没有收到任何错误。我是Angularjs的新手，我无法弄清楚为什么会这样。下面是我的代码，希望我已经包含了一些给你一个想法。我正在使用'angular-rails-templates'宝石，它允许我在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

我有一个http://localhost:3000/user/:slug/的rails路由，我想在此页面上使用Angular.js和我的讨论路由，因此最终会成为http://localhost:3000/user/:slug/#/discussions。设置Angular.js路由的正确方法是什么？将:slug存储在我的Angular的讨论控制器中会很好。

Answer 1

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

我要检查两件事：

您的otherwise路由有redirectTo: /discussion s 。这是一条空白路线，因为您定义的唯一其他路线是/discussion（否）。如果您没有导航到discussion，那么您将获得一个空视图。
仔细检查模板gem生成的javascript代码是否为'angular/templates/discussions/index.html'填充templateCache。我使用了类似的内容，包括.haml扩展名。同时确认您在角度应用程序之前加载模板javascript。
如果上述两种方法都正确无误，您是否可以确认您是否已将"hello"打印到控制台？

对编辑1的回应

重要的是要记住angular是单页面应用程序（SPA）框架。它处理一个 html页面。因此，如果http://localhost:3000/user/:slug/的示例网址提供与application.html和http://localhost:3000/完全相同的页面（例如http://localhost:3000/anything/else/:id），并且您的角度路由器执行其余部分。

要执行此操作，我会在位置提供程序中将html 5模式添加到您的.config()块中：

$locationProvider.html5Mode(true)

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

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

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

片段：

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

P.S 当我第一次进行此转换时，我将API路由与正常路由混合在一起，因此虽然// 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'}将返回JSON，但/users将返回一个html页面。我发现在/login下将所有API路由放在一起更加清晰 MUCH ，因此/api变为/users。这样就可以在不破坏API的情况下返回/api/users琐碎的任务：如果它不是以application.html开头，则返回/api。

AngularJS没有显示我的ng-view

1 个答案: