Question

将Angular引导到我的Rails项目中

在控制台中，我得到一个＆＃34; exampleApp运行＆＃34;，所以Angular正在运行。下一步是尝试将模板包含到索引文件中。

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

@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'
)

但它没有包含模板。

这是我的结构

应用
- 资产
  - Javascript角
    - 角应用内
      - app.js.coffee
      - 模板

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

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

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

但是我没有看到这个角度应用正在运行＆＃39;控制台中的消息，所以我认为这个文件没有做任何事情。

关于问题是什么的任何想法？

//编辑。

这是我的index.html

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

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

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

//编辑2

将模板的路径更改为nav ul { &:extend(.inline); background: blue; } .inline { color: red; }，包括该文件。

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

Answer 2

如果您不想输入整条长路径，可以使用html5基本标记

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

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

所以不需要一次又一次地输入它。

Answer 3

试试这个：

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

Answer 4

试试这个：

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

并检查你的路径：）

AngularJS不包含模板

4 个答案: