AngularJS 不包含模板答案

【问题标题】：AngularJS does not include a templateAngularJS 不包含模板
【发布时间】：2015-07-30 20:28:01
【问题描述】：

我已经使用 this guide 将 Angular 引导到我的 Rails 项目中

在控制台中，我得到了一个“正在运行的 exampleApp”，所以 Angular 正在运行。下一步是尝试在索引文件中包含一个模板。

我已将此添加到 index.html.erb

<div ng-include="'templates/header.html'"></div>

但它不包括模板。

这是我的结构

应用程序
- 资产
  - javascript
    - 角应用
      - app.js.coffee
      - 模板

这是我的 app.js.coffee 文件的内容

@app = angular.module('app', [
  # additional dependencies here, such as restangular
  'templates'
])

# for compatibility with Rails CSRF protection

@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])

@app.run(->
  console.log 'angular app running'
)

但我没有在控制台中看到“angular app running”消息，所以我认为这个文件没有做任何事情。

对问题所在有什么想法吗？

// 编辑。

这是我的 index.html

<div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
  <p>Value from ExampleCtrl:</p>
  <p>{{ exampleValue }}</p>
</div>

<div ng-include="'templates/header.html'"></div>

我意识到我没有在 ng-app 中加载模板，所以很明显它不起作用。

我在 ng-app 中移动了包含，现在我收到 404 错误。所以至少它试图包含该文件。

//编辑2

通过将模板的路径更改为<div ng-include="'assets/angular-app/templates/header.html'"></div>，它包含了文件。

【问题讨论】：

打开控制台，你看到了什么，404为模板请求？
控制台中的 ng-include 命令没有反馈。在 HTML 中，它显示为空的 '
'。就像我说的那样，问题似乎出在路由模板的 app.js.coffe 文件上，因为如果我删除该文件，项目中没有任何变化。
模板路径应该相对于您的索引页面。什么是索引页路径？
对，模板文件夹与您的索引文件所在的文件夹相同吗？
没有模板文件夹在 angular-app 文件夹内。 app.js.coffe 文件（包括模板路径）也在 angular-app 文件夹中。

标签： angularjs coffeescript

【解决方案1】：

问题是您的 ngInclude 在 Angular 应用程序之外，因此它永远不会被渲染和处理。

应该是：

<div ng-app='app.exampleApp' ng-controller='ExampleCtrl'>
  <p>Value from ExampleCtrl:</p>
  <p>{{ exampleValue }}</p>

  <div ng-include="'templates/header.html'"></div>
</div>

或者您可以将ng-app='app.exampleApp' 放在一些最常见的父容器上，例如body 或html。

【讨论】：

我已经看到了（见我的编辑），现在的问题是路径。我在日志中收到 404 错误。
检查资源选项卡并注意 pass app.js 是从中加载的。如果是localhost:3000/some/path/app.js，那么您还需要对 ngInclude src="'some/path/tempalates/header.html'" 使用类似的东西。
你是对的。<div ng-include="'assets/angular-app/templates/header.html'"></div> 确实加载了模板。但我宁愿每次都输入templates/header.html 然后输入路径。有没有办法设置模板路径？
您需要在 index.html 中设置基本路径。添加到标题部分<base href="assets/angular-app">。然后应用程序中的所有相对路径，如 image src、link href 将相对于 base 解析。

【解决方案2】：

如果你不想输入完整的长路径，你可以使用 html5 基础标签

<base href="assets/angular-app" target="_blank">

这样您将基本资源路径更改为 /assets/angular-app。

所以不需要一遍又一遍地输入。

【讨论】：

【解决方案3】：

试试这个：

<div ng-include src="'templates/header.html'"></div>

【讨论】：

【解决方案4】：

试试这个：

<ng-include src="'./templates/header.html'"> </ng-include>

并检查您的路径:)

【讨论】：

它现在正在尝试加载模板文件，因为我试图在 ng-app div 之外加载文件，所以 rails 只输出 html。但我在控制台日志中收到 404 消息。 'GET localhost:3000/templates/header.html 404（未找到）'
试试这样：