Rails gem with javascript dependency - javascript

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 :)

Related

gettext_i18n_rails_js not working

I already have these two gems in my application
gem 'faraday'
gem 'gettext_i18n_rails'
i wanted to get translations in my js file which resides in assets folder.
so i added gem
gem "gettext_i18n_rails_js", "~> 1.2.0"
and followed the guidelines in https://github.com/webhippie/gettext_i18n_rails_js. I didn't add any config files since i follow window.__ function. i called like this
window.__('sign_in.twitter')
in my js file but its throwing
Uncaught TypeError: window.__ is not a function
this error. Tried adding the config files as given in the documentation. Still not working. Please help.
Did you add following line to your js manifest?
//= require gettext/all
gettext/all.js is the file where window.__ function is defined. Check if it is really loaded.

Incorporating vendor js files (from wrap bootstrap) into Rails 4

I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.
Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.

angular-rails-templates Failed to load template

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.

Rails I18n-js: missing translation

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

use javascript in rails 3.2 without coffeescript

I'm using Rails 3.2, It's set up for coffeescript. I know Coffeescript is an awesome language and it's not too hard to learn, but i'm JUST starting to wrap my head around Javascript and jQuery. So my question is this: Is there an easy way to set rails 3.2 up to use Javascript instead?
At the moment, my jQuery is in <script></script> tags in my view (timeline/index.html.erb). I'd like to move it into a .js file. I tried changing the name of my timeline.js.coffee to just timeline.js and putting the jQuery in there, but I get Uncaught SyntaxError: Unexpected token ILLEGAL.
What should I do besides the obvious answer of "learn coffeescript"?
I was on the right track. To switch to javascript in rails 3.2 you only need to remove the .coffee extension. However, you also need to make sure you use // for comments instead of #
//# Place all the behaviors and hooks related to the matching controller here.
//# All this logic will automatically be available in application.js.
//# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
Manifest Files and Directives
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
add js files in app/assets/javascripts, then add the files in application.js
your js file
alert("here");
application.js
//= require_tree .
or
//= require your_js_file_name
then, it will be picked up from the code below in your app/views/layouts/application.html.erb
<%= javascript_include_tag "application" %>
$ rails -v
Rails 3.2.11
how about this?
http://bit.ly/VHEnBX
git clone it
cd js_test
bundle
rails s -d
open http://localhost:3000
# stop the detached server
kill -9 `cat tmp/pids/server.pid`
you should see here alert from the browser.
it's just a simple js file. no .coffee extension or whatsoever.
http://bit.ly/UPe2mp
you can simply comment out gem 'coffee-rails' in your Gemfile

Categories