Loading HTML templates with Angularjs and Rails

Question

I cannot get my template load in my Rails app with Angularjs. Following is my setup

#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>

and I'm getting the following error

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

But if I use template instead of templateUrl, and give inline HTML it works fine.

I'm using angular-rails-templates-0.1.3 and rails-4.2.0

DRobinson · Accepted Answer · 2015-08-25 00:43:48Z

1

It looks like the version of angular-rails-templates had a bug, which was fixed in 0.1.4 (https://github.com/pitr/angular-rails-templates/issues/95). So updating your gem to a newer version should fix the bug.

Try updating your version of angular-rails-templates

I would not suggest manually placing '/javascripts/templates/home.html' (or the correct form: '/assets/javascripts/templates/home.html'), since this is part of the assets pipeline.

EDIT: If Sprockets 3+ is required -- e.g. for ES6 Javascript syntax -- you will have to look into a different fix. A couple potential fixes are suggested in this thread: https://github.com/pitr/angular-rails-templates/issues/93 . However, the maintainers of the angular-rails-templates project seems to be having some trouble solving this issue.

Though mcasimir's suggestion of replacing angular-rails-templates with a simple Ruby initializer and a few lines of JS code might do the trick, if upgrading angular-rails-templates (/downgrading sprockets) is not an option https://github.com/pitr/angular-rails-templates/issues/93#issuecomment-109953596

edited Aug 25, 2015 at 0:43

answered Aug 25, 2015 at 0:14

DRobinson

4,49124 silver badges32 bronze badges

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

4 Comments

sameera207 Over a year ago

thanks for the answer (and sorry for late acceptance , didnt have a time to work on this) , I followed the issue #95 and I had to downgrade 'sprockets', '2.12.3' and it started working. quick question though, what are your thoughts on depending on a old version of sprockets , going forward ?

DRobinson Over a year ago

It depends on your use-case. Some libraries depend on sprockets 3, so if you need any of those, you might have issues. That said, it looks like angular-rails-templates understands this and is actively trying to push for a fix. I think I'd go with whatever's simplest right now, rather than worry too much about it. Ultimately, it probably wouldn't be too difficult to sub-out angular-rails-templates, or any other middle-ware, if it stops being useful.

DRobinson Over a year ago

That said, if you're really worried, you could always add an App-wide namespace to your template references: templateUrl: appConfig.templatesNamespace + 'home.html', which you could always sub out for something like "/assets/javascripts/templates/". I personally wouldn't go that route, just because it seems too much like a solution waiting for a problem (what's the point?), and also seems like other devs maintaining the code might abuse it.

sameera207 Over a year ago

thanks for the comment, I hear your point . I shouldn't overthink the problem right now , If it ain't broke, don't fix it :D

radius · Accepted Answer · 2015-08-24 23:02:01Z

0

Try changing:

templateUrl: 'home.html'

to:

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

answered Aug 24, 2015 at 23:02

radius

1591 silver badge6 bronze badges

1 Comment

sameera207 Over a year ago

thanks for the answer, but still the same http://localhost:3000/javascripts/templates/home.html 404 (Not Found) ;(

Collectives™ on Stack Overflow

Loading HTML templates with Angularjs and Rails

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related