Now I have used couple of hours to integrate rails work together with angular, and I am about to give up. I am following this tutorial:
link to tutorial
'
and I made it even simpler
In my application.js I require the following :
//= require jquery
//= require jquery_ujs
//= require angular
in my main.js.coffe I ask to get the following js files :
#= require_self
#= require_tree ./controllers/main
and in my app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee I have the same lines as he does in tutorial :
#IndexCtrl = ($scope) ->
$scope.title = "My blog"
So here is the funny part :
my "Master" view is exactly the same as in tutorial :
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
So in theory when I run my app at http://localhost:3000/main/Index I should get the exact same result as he does, but no.
I am getting Runtime error, which says that it has failed at (in /app/assets/javascripts/main.js.coffee) and nothing else. I really can't figure out what exactly is going wrong. If I switch controller_name with some random string like 'hugabuga' page loads and of course angular wont work because there are no link to the controller Index.
I am not very experienced with cofee script, but maybe the way controller is defined is not correct?
In another tutorial I had to add another Gem
gem 'angular-rails-templates'
And also amend the application.js to include:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .
The order that the JS is listed is also important. Make sure you have the same in your file as what is shown in the video.
Related
When in responsive mode, bootstrap dropdown works on intial page visit/refresh but when another page is visited (via the dropdown link or any page link) it drops down but doesn't go back up. This happens when the <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> is placed at the bottom of the body tag. Everything works fine when the javascript tag is moved to the head but this is not best practice as regards js files and DOM load. My bootstrap files are added manually and not with a gem. Why is this happening this way? Is there something I am missing?
Here is my application.js file arrangement
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
It's because of turbolinks.
Try "data-no-turbolink"
%ul.dropdown-menu{:role => 'menu', :'aria-labeledby' => "something", "data-no-turbolink" => true}
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
I import my own javascript in my application.js like this:
//= require 'overlay'
then I include application in my application.html.erb like this:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
then I find that in my page I got
<script src="/assets/overlay-4f9aec59c40642be0f9be34f4dac3fdf.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1" data-turbolinks-track="true"></script>
in /assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1 also iclude the overlay.js which means overlay.js is included in my page for twice.
such as I write this in overlay.js:
$('#ele').click(function() {console.log 'overlay.js';})
when I click the button, I will get two line overlay.js, how can I solve this?
Put your js file under the folder assets/javascripts
Doing this you don't need to write this
//= require 'overlay' Instead of this write
//= require_tree . in your application.js file. Hope it will work.
Im trying to make basic structure of my project to work out. In my "Master" file i have a line which call main.js.coffee script file:
<%= javascript_include_tag "application", 'main' %>
in my main i have call to the next js files :
#= require_self
#= require_tree ./controllers/main/
./controllers/main/ contains just 1 single file mainIndexCtrl.js.coffee
so here is the structure:
So on call of url:port/main/index application.html.erb is called which call to main.js.coffee which than call to mainIndexCtrl.js.coffee, or more like that what i think it does, because doesnt matter what i do i cant get rid of folowing error:
I am VERY new to Rails, so basicly i really dont know what to do because this error doesnt exactly saying anything to me.
Main.js.coffee :
# 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://coffeescript.org/
#= require_self
#= require_tree ./controllers/main/
application.js
//= require jquery
//= require jquery_ujs
//= require angular
There is an error in your main.js.coffe file. Either correct the syntax/code error in the file or remove it from your javascript_include_tag (like: <%= javascript_include_tag "application" %>) Also, it would make sense to include this file in your application.js, if it is to be used, to take full advantage of the asset pipeline....
I'm in the process of intergrating Ember.js into an existing Rails app. Would like to begin by using Ember for just a single controller action dashboard#index. From there, I'm planning to integrate the rest of the site into the ember application, probably on a per controller basis.
But I'm having trouble managing the ember URLs, because I'm not yet ready to cede control of the Rails root route to Ember.
For example, I'd like the following routes to be handled by rails, w/o Ember:
/
/login
/logout
while:
/dashboard
should trigger the Ember application. Then, there would be various ember dashboard routes such as /dashboard/#/favorites and dashboard/#/upcoming
I've got alternate Rails layouts and paths through the asset pipeline set up just fine, but I'm finding the Ember router doesn't play nice if the ember routes are tacked on after a prefix such as /dashboard/.
Is there a clean way to set this up?
Thanks
inside your dashboard controller set layout false so that it ignores your application layout.
Then make your dashboard/index.html.erb file to create its own layout and include the ember application. It should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>ember app</title>
<%= stylesheet_link_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "ember_app" %>
</body>
</html>
then in your assets/javascripts/ you should have a file ember_app.js that looks like this:
//= require handlebars
//= require ember
//= require ember-data
//= require_self
//= require ./store
//= require_tree ./models
//= require_tree ./controllers
//= require_tree ./views
//= require_tree ./helpers
//= require_tree ./components
//= require_tree ./templates
//= require_tree ./routes
//= require ./router
//= require helpers
# for more details see: http://emberjs.com/guides/application/
window.DashboardApp = Ember.Application.create()
A good resource i used is the ember-rails gem. It has good documentation as well.