CODEWITHSUNDEEP
angularjscoffeescript
Peter Boomsma
Peter Boomsma

Reputation: 9808

AngularJS does not include a template

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

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.

Upvotes: 1

Views: 293

Answers (4)

dhavalcengg
dhavalcengg

Reputation: 4713

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.

Upvotes: 1

Prasanth Bendra
Prasanth Bendra

Reputation: 32740

Try this :

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

and check your path :)

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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.

Upvotes: 1

Aravinder
Aravinder

Reputation: 503

Try this:

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

Upvotes: 0

Related Questions