使用 Angularjs 和 Rails 加载 HTML 模板答案

【问题标题】：Loading HTML templates with Angularjs and Rails使用 Angularjs 和 Rails 加载 HTML 模板
【发布时间】：2015-08-24 22:40:41
【问题描述】：

我无法使用 Angularjs 在我的 Rails 应用程序中加载模板。以下是我的设置

#app/assets/javascripts/app.js
app = angular.module('app', ['ui.router', 'templates'])
app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/home");
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html'
    })
});

#app/assets/javascripts/templates/home.html
<h1>abc</h1>

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-ui-router/release/angular-ui-router
//= require angular-rails-templates
//= require_tree ./templates
//= require_tree .

#app/views/layouts/application.html.erb
<body ng-app="app">
<div ui-view=''></div>

我收到以下错误

http://localhost:3000/home.html 404 (Not Found)

但如果我使用template 而不是templateUrl，并提供内联HTML，它就可以正常工作。

我正在使用angular-rails-templates-0.1.3 和rails-4.2.0

【问题讨论】：

标签： angularjs templates ruby-on-rails-4

【解决方案1】：

angular-rails-templates 的版本似乎有一个错误，该错误已在 0.1.4 (https://github.com/pitr/angular-rails-templates/issues/95) 中修复。因此，将您的 gem 更新到较新的版本应该可以修复该错误。

尝试更新您的angular-rails-templates 版本

我不建议手动放置 '/javascripts/templates/home.html'（或正确的形式：'/assets/javascripts/templates/home.html'），因为这是资产管道的一部分。

编辑：如果需要 Sprockets 3+ - 例如对于 ES6 Javascript 语法——你将不得不寻找不同的修复方法。此线程中建议了几个潜在的修复：https://github.com/pitr/angular-rails-templates/issues/93。然而，angular-rails-templates 项目的维护者似乎在解决这个问题时遇到了一些麻烦。

虽然 mcasimir 建议用简单的 Ruby 初始化程序和几行 JS 代码替换 angular-rails-templates 可能会解决问题，但如果升级 angular-rails-templates (/downgrading sprockets) 不是一个选项 https://github.com/pitr/angular-rails-templates/issues/93#issuecomment-109953596

【讨论】：

感谢您的回答（很抱歉迟到了，没有时间处理这个问题），我关注了问题 #95，我不得不降级 'sprockets', '2.12.3' 并且它开始工作了。快速提问，你对旧版本的 sprockets 有什么看法？
这取决于您的用例。一些库依赖于 sprockets 3，所以如果你需要其中的任何一个，你可能会遇到问题。也就是说，看起来angular-rails-templates 理解这一点并正在积极尝试推动修复。我想我现在会选择最简单的方法，而不是太担心它。最终，如果 angular-rails-templates 或任何其他中间件不再有用，它可能不会太难。
也就是说，如果您真的很担心，您可以随时将应用程序范围的命名空间添加到您的模板引用中：templateUrl: appConfig.templatesNamespace + 'home.html'，您可以随时将其替换为"/assets/javascripts/templates/"。我个人不会走那条路，只是因为它看起来太像等待问题的解决方案（有什么意义？），而且似乎其他维护代码的开发人员可能会滥用它。
感谢您的评论，我明白了。我现在不应该过度思考这个问题，If it ain't broke, don't fix it:D

【解决方案2】：

尝试改变：

templateUrl: 'home.html'

到：

templateUrl: '/javascripts/templates/home.html'

【讨论】：

谢谢你的回答，但还是一样http://localhost:3000/javascripts/templates/home.html 404 (Not Found) ;(