I'm trying to get Angular to load a template:
var app = angular.module("myApp", ['templates'])
and my html:
<div ng-app="myApp">
<div ng-include="'blah.html'"></div>
</div>
But all I get is a 404 Failed to load resource because, Rails tells me, No route matches [GET] "/blah.html". I understand that this is because of the asset pipeline in Rails. blah.html is in /app/assets/javascripts/templates/blah.html and I am using the angular-rails-templates gem to try to solve the problem. So my application.js has:
//= require angular-rails-templates
//= require_tree ./templates
But I'm not having any luck.
The html generated suggests that angular-rails-templates is loading (it has a script /assets/angular-rails-templates....js) but rails is failing to find blah.html
Versions:
rails 4.2.1
angular-rails-templates 0.1.4
angularjs 1.3.15
This turned out to be a sprockets incompatibility (see here and here)
The short version is:
Add gem 'sprockets', '2.12.3' to your Gemfile
Run bundle update sprockets
[Update]
I'm no expert on this stuff but it does seem that a number of people smarter than I are suggesting using /public/templates. You may want to bear this in mind.
I had a similar issue - In my haste, I neglected to fully read the directions, and missed step 3.
Adding a Dependency in the Angular Application Module solved it for me, and the templates are served through the asset pipeline...
//= require angular-rails-templates
//= require_tree .
angular.module('d-angular', ['templates'])
I put my angular template files under public/templates which is accessible via <site root>/templates without any additional configuration.
After struggling for an hour to get this, I realized that I had a JavaScript file sharing the same name.
For example, these files will cause conflict:
component.js
component.html.haml
So I made sure to rename the JavaScript file to something like:
component-directive.js
component.html.haml
I've been struggling on the same problem today, and I think I have found a solution for this problem.
try
<div ng-include="'assets/blah.html'"></div>
OR
<div ng-include="'assets/templates/blah.html'"></div>
instead of
<div ng-include="'blah.html'"></div>
This solved the problem for me.
Related
I'm writing a rails gem which requires angular, so I added it to my gem's dependencies:
s.add_dependency "angularjs-rails", "~> 1.6.2"
Now, how should I include angular ? I tried to add it directly in my gem's main js script but sprockets fails with this kind of error:
couldn't find file 'angular' with type 'application/javascript'
Checked in these paths:
...
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/javascripts
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/stylesheets
...
When I try to include angular in an application that uses my gem, before including my gem's script, the error is quite the same...
So should I just specify that my gem requires angularjs-rails to be added in the app Gemfile, or is there a better way to do this ?
As Richard Peck proposed, I required angularjs-rails in my gem's module file, and everything went fine:
require 'angularjs-rails'
module GridBuilder
module Rails
require 'grid_builder/rails/engine'
require 'grid_builder/rails/version'
require 'grid_builder/rails/helper'
end
end
And in my gem's js script:
//= require angular
Thank you :)
I'm using I18n-js gem for localiztion of js files. I've installed it with help of gem Readme and it worked for the first time.
The problem is when I add new translations to my translations.js file with rake task rake i18n:js:export translations not showing in my templates - only missing translation (development and production has same situation), although translations.js contents all the new translations.
application.js
//= require i18n
//= require i18n/translations
What did I miss? If you need more information please comment about it. Thanks
Run rake tmp:clear
I faced the same issue and this command solved it.
Unfortunately I haven't found better solution:
Add = javascript_include_tag 'translations' to the view file
remove //= require i18n/translations from application.js
I have been reading some posts related with this issue, but i couldn't get this working.
I tried to use the 'openlayers-rails' gem and also i tried adding the OpenLayers folder to /vendor/assets/javascript/ (with the require //= require OpenLayers/OpenLayers into the /assets/javascript/application.js file). I both scenarios i get "Uncaught ReferenceError: OpenLayers is not defined" as a browser inspector error.
Any help is appreciated!
Thanks
The README for the openlayers-rails gem says that you should include the JS this way:
//= require openlayers-rails
Not with //= require OpenLayers/OpenLayers
My apologies if this has been posted somewhere else, but I'm not exactly sure how to even phrase a search for this problem.
Basically, I've got fullcalendar.js sitting in app/assets/javascripts/. Within my application.js file (in the same folder of course) I've got the following...
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
So, as expected the fullcalender.js gets swept up in the asset compiling process and ends up in the application.js that is then served to the user.
The problem comes in when I try to reference a function defined in fullcalendar.js (and thus defined in application.js after compiling the assets) it throws an error stating TypeError: $(...).fullCalendar is not a function in the js console of firebug, and of course full calendar doesn't render.
Now, however, if I include <%= javascript_include_tag "fullcalendar.js" %> in the layout file after all of the other scripts and stylesheets have been pulled in, it works as expected.
Baffled, I looked into the js in each file and compared them and can't see a difference. Is there something going on with the asset pipeline that I'm not aware of or is this some freaky DOM issue? I just have no idea at this point.
For reference, here are the contents of both the application.js and fullcalendar.js that are linked to in the page source of the site. I've only included the relevant full calendar portion of each, as it's too large for gist or pastebin if I include everything.
What baffles me is that both the sources come from the same file, one is just linked to directly, the other flows through the asset pipeline process.
application.js - http://pastebin.com/byyNErB8
fullcalendar.js - http://pastebin.com/k4p29YmP
Any insight or help would be GREATLY appreciated.
Maybe a dependency error. I'll suggest you to use a better practice for such lib.
Put the fullcalendar scripts into vendor/assets/javascripts
Require this script manually in application.js before the tree and after jquery and any other lib it depends.
/=require 'fullcalendar`
Add
Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.
I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.
I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)
After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.
in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work
In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.