AngularJS does not include a template

Question

I've bootstrapped Angular onto my Rails project using this guide

And in the console I get a "exampleApp running", So Angular is working. Next step was to try and include a template into the index file.

I've added this to the index.html.erb

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

But it doesn't include the template.

This is my structure

app
- assets
  - javascripts
    - angular-app
      - app.js.coffee
      - templates

This is the content of my app.js.coffee file

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

But I'm not seeing the 'angular app running' message in the console, so I think this file isn't doing anything.

Any ideas on what the problem is?

// edit.

This was my 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>

And I realized that I wasn't loading the template in the ng-app so obviously it wasn't working.

I moved the include in the ng-app and now I'm getting a 404 error. So at least its trying to include the file.

// edit 2

By changing the path to the template to <div ng-include="'assets/angular-app/templates/header.html'"></div> it's including the file.

There's no feedback from the ng-include command in the console. In the HTML it shows '<div ng-include="'templates/header.html'"></div>' which is just empty. Like I said it looks like the problem is with the app.js.coffe file which routes the templates because if I remove that file nothing changes in the project. — Peter Boomsma
– Peter Boomsma, Commented Jul 30, 2015 at 11:57
template path should be relative to your index page. What is index page path? — dhavalcengg
– dhavalcengg, Commented Jul 30, 2015 at 12:00
right, is templates folder in same folder where your index file is? — dhavalcengg
– dhavalcengg, Commented Jul 30, 2015 at 12:04
No the template folder is inside the angular-app folder. And the app.js.coffe file (which includes the template path) is also inside the angular-app folder. — Peter Boomsma
– Peter Boomsma, Commented Jul 30, 2015 at 12:07

dfsq · Accepted Answer · 2015-07-30 12:08:49Z

1

The problem is that your ngInclude is outside of the Angular app so it's never rendered and processed.

It should be:

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

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

or you can put ng-app='app.exampleApp' on some topmost common parent container like body or html.

edited Jul 30, 2015 at 12:08

answered Jul 30, 2015 at 12:07

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Boomsma Over a year ago

I allready saw that (see my edit), the problem now is the path. I'm getting a 404 error in the log.

dfsq Over a year ago

Check resources tab and note that pass app.js was loaded from. If it's localhost:3000/some/path/app.js then you also need to use something like this for ngInclude src="'some/path/tempalates/header.html'".

Peter Boomsma Over a year ago

You're right.<div ng-include="'assets/angular-app/templates/header.html'"></div> does load the template. But I would rather type templates/header.html then the path everytime. Is there a way to set a template path?

dfsq Over a year ago

You need to set base path in index.html. Add to head section <base href="assets/angular-app">. Then all relative paths in the app like image src, link href will resolve relative to the base.

dhavalcengg · Accepted Answer · 2015-07-30 12:28:01Z

1

If you do not want to type whole long path you can use html5 base tag

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

This way you are changing base resource path to /assets/angular-app.

So no need to type it again and again.

answered Jul 30, 2015 at 12:28

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Comments

Aravinder · Accepted Answer · 2015-07-30 11:54:30Z

0

Try this:

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

answered Jul 30, 2015 at 11:54

Aravinder

5034 silver badges8 bronze badges

Comments

Prasanth Bendra · Accepted Answer · 2015-07-30 12:25:33Z

0

Try this :

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

and check your path :)

edited Jul 30, 2015 at 12:25

answered Jul 30, 2015 at 12:03

Prasanth Bendra

33.2k9 gold badges56 silver badges74 bronze badges

2 Comments

Peter Boomsma Over a year ago

It's trying to load the template file now, because I was trying to load the file outside the ng-app div so rails just output the html. But I'm getting a 404 message in the console log. 'GET localhost:3000/templates/header.html 404 (Not Found)'

Prasanth Bendra Over a year ago

Try it like this : <ng-include src="'./templates/header.html'"> </ng-include>

Collectives™ on Stack Overflow

AngularJS does not include a template

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest