I'm trying to use angular-moment (https://github.com/urish/angular-moment) in an Angular/Rails applicaton.
I've installed angular-moment and angular with bower.
Angular works and is being used in the app, but angular-moment crashes the app as soon as I add it as a dependency in the angular module.
Proposed solution:
I thought the solution might be to add angular-moment to the rails manifest file, application.js. But its also not working.
Application.js
//= require angular
//= require angularMoment
Bower.json
"dependencies": {
"angular": "^1.5.5",
"angular-moment": "^0.10.3"
}
App.js
angular.module('App', ['angularMoment'])
Is there a known reason why this might not work?
Or some alternative you would recommend?
Solution
Use //= require angular-moment in the manifest file, not //= require angularMoment.
Note to self - required file in application.js should match the file name in bower.json, not the name used in the Angular injection.
Related
I've added the webpacker gem, bundled, installed and edited all my javascript_include tags to javascript_pack.
What happens with the existing javascript? I have lots of it under app/assets/javascripts and vendor/assets/javascripts. It doesn't seem to pick it up automatically.
Some of this javascript is required into application.js.erb and some other files load directly into various parts of the application, eg:
app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init
Then I also have:
app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index
Some of these files are small Vue apps, I've placed their templates under Rails views. Now after this webpacker business I have app/assets/javascripts (which contains all my actual code but is ignored), then app/javascript which I don't know what it is, and app/javascripts where I'm supposed to put my Vue apps. Or the other way around. Or something.
How do I get all this to work with webpacker? None of the tutorials I've found cover migrating existing code to webpacker and to be honest I don't understand much from all those javascript snippets they just dump there but don't explain what it actually does and how.
By default, adding webpack doesn't change anything. For example, if you leave javascript_include_tag 'application' in your layout, it will continue to work the same as it did before adding webpack.
The files in the javascript/packs folder are entry points for javascript. If you are doing a single page app, you will likely have a single pack like application.js which boots up your entire application. If you are doing a conventional app, you will likely have a main application.js file that loads all global scripts, plus other page or component level scripts like settings.js or calendar.js. These scripts are loaded with javascript_pack_tag 'application'.
If you move your files out of the assets folder into the javascript folder you can then add them to your pack file like so:
import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';
window.addEventListener('DOMContentLoaded', (event) => {
console.log('do init stuff here');
// use bootstrap here
});
I've installed the ckeditor gem and everything is working except for my custom toolbar definition. I'm working in the development environment. Checking the inspector in Chrome I see that my custom.js file is being requested BEFORE the ckeditor gem's config and as a result is probably being overwritten. I think I found a crappy solution here, but I was wondering if anyone else has found a better solution.
Here is a sample of my current application.js config:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require ckeditor/init
//= require_tree ./ckeditor
//= require_directory .
I have the config.js file nested in assets-javascripts-ckeditor. I am also using the parameter :ckeditor => {:uiColor => "#D6A11A", :toolbar => "admin"} in my cktext_area form method. I know it is being read because the uiColor changes accordingly.
I never really figured this one out. Upgrading to the latest version of ckeditor-rails gem and following all of the installation instructions to the letter has fixed this issue. Also, if you have any custom .js config files used by ckeditor, make sure you add them to your precompile assets paths in application.rb.
I'm trying to integrate bootstrap into a current rails project and am having a difficult type installing. Specifically, I seem to be having a problem with the javascript. I have added to application.js:
//= require bootstrap
But I get the following error:
These are referenced in bootstrap.js.coffee and I can get rid of the errors by clearing this file out. Here are the contents:
jQuery ->
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
There is discussion about loading the individual modules but it's not clear to me if I should be doing this or whether I need to be doing this. https://github.com/thomas-mcdonald/bootstrap-sass
I'd really like to be able to add bootstrap to this currently existing project. Any help is appreciated.
thx
You should make sure you have bootstrap.js or bootstrap.min.js from the Twitter Bootstrap Docs and then require it as you did. I think your issue is that you have yet another file named bootstrap.js.coffee. Try changing the name of it and requiring it along with //=require bootstrap.
First of all bootstrap requires jQuery. For Rails you can use the jquery-rails gem which provides the latest version of jQuery.
Then within your application.js you can load the required Javascripts with
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require_self
As neon mentions the load order of the scripts is important. You should load jquery first, then load bootstrap. At this point you can load all other scripts in the current directory with require_tree . (which probably contains your bootstrap.js.coffee).
Man, WTH is going on with this stuff. You know what that line actually does in Rails 3.1?
<script src="/assets/defaults.js" type="text/javascript"></script>
As they say on ESPN, "Come on, man."
I know that assets are no longer treated as second-class citizens. But it seems as if they are unable to even receive a green card in this release candidate. In the new app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Sooooo. Am I supposed to download jquery? What do I do? Because there's nothing in that javascripts directory except application.js.
Aggravating. And yet it's free, so how am I complaining? Anyway, these issues seem pretty basic, but I would appreciate any help you can offer.
In Rails 3.1 there is no longer a "defaults" as such, but rather what is specified in your application.js file are the "defaults". You would include this file using this line:
javascript_include_tag "application"
The jquery and jquery_ujs files come with the jquery-rails gem which is in the default Rails 3.1 Gemfile.
The //= require line in that file tells Sprockets that you want to require a file which in this case would be jquery.js from within jquery-rails, where the //= require_tree . will require all other JavaScript files in the same directory as application.js and concatenate them all into one file.
You can read more about the asset pipeline here.
I have just upgraded to Rails 3.1, and I am having an issue with loading my Javascripts with the new asset pipeline.
I have copied the js files (both the files themselves and their .min variants) into my /app/assets/javascripts directory, and my application.js manifest is as follows:
//= require jquery
//= require jquery_ujs
//= require jquery-easytabs
//= require jquery-hashchange.min
//= require_tree .
But this does not appear to be working; Easytabs is not being loaded correctly. Strangely, when I look in the console at the application.js file that is compiled, I can see the Easytabs code, but it is not working.
I have found that if i paste the code directly into the application.js file, it works as expected, so I know that the script is working. This is not, however, the intended use of the application.js file.
I would appreciate any guidance on where to go next in order to ensure the correct loading of the js files.
Thanks!
Try moving all your plugins (like easytabs) into the vendor directory.
vendor/assets/javascripts/
Then change your application.js file to this:
//= require jquery
//= require jquery_ujs
//= require_tree ../../../vendor/assets/javascripts
//= require_tree .
You should (if you aks me) only place code that you have written for a specific controller in your app/assets/javascripts directory, everything else, like plugins should go in the vendors dir.
I managed to get to the bottom of this - it seems that the require order is alphabetical, so jquery_easytabs was getting compiled before jquery_ujs. I fixed this by renaming to jquery_zeasytabs - not the cleanest, but it does work.