I am trying to use Angularjs framework in my app with turbolinks. After page change it do not initialize new eventlisteners. Is it any way to make it work? Thanks in advance!
AngularJS vs. Turbolinks
Turbolinks as well as AnguluarJS can both be used to make a web application respond faster, in the sense that in response to a user interaction something happens on the web page without reloading and rerendering the whole page.
They differ in the following regard:
AngularJS helps you to build a rich client-side application, where you write a lot of JavaScript code that runs on the client machine. This code makes the site interactive to the user. It communicates with the server-side backend, i.e. with the Rails app, using a JSON API.
Turbolinks, on the other hand, helps to to make the site interactive without requiring you to code JavaScript. It allows you to stick to the Ruby/Rails code run on the server-side and still, "magically", use AJAX to replace, and therefore rerender, only the parts of the page that have changed.
Where Turbolinks is strong in allowing you use this powerful AJAX mechanism without doing anything by hand and just code Ruby/Rails, there might come a stage, as your application grows, where you would like to integrate a JavaScript framework such as AngularJS.
Especially in this intermedium stage, where you would like to successively integrate AngularJS into your application, one component at a time, it can make perfectly sense to run Angular JS and Turbolinks together.
How to use AngularJS and Turbolinks together
Use callback to manually bootstrap Angular
In your Angular code, you have a line defining your application module, something like this:
# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
#app = angular.module 'MyApplication', ['ngResource']
This code is run when the page is loaded. But since Turbolinks just replaces a part of the page and prevents an entire page load, you have to make sure, the angular application is properly initialized ("bootstrapped"), even after such partial reloads done by Turbolinks. Thus, replace the above module declaration by the following code:
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
#app = angular.module 'MyApplication', ['ngResource']
$(document).on 'turbolinks:load', ->
angular.bootstrap document.body, ['MyApplication']
Don't bootstrap automatically
You often see in tutorials how to bootstrap an Angular app automatically by using the ng-app attribute in your HTML code.
<!-- app/views/layouts/my_layout.html.erb -->
<!-- without turbolinks -->
<html ng-app="YourApplication">
...
But using this mechanism together with the manual bootstrap shown above would cause the application to bootstrap twice and, therefore, would brake the application.
Thus, just remove this ng-app attribute:
<!-- app/views/layouts/my_layout.html.erb -->
<!-- with turbolinks -->
<html>
...
Further Reading
AngularJS bootstrapping: http://docs.angularjs.org/guide/bootstrap
Railscasts on Turbolinks (explains callbacks): http://railscasts.com/episodes/390-turbolinks
Demo application: https://github.com/fiedl/rails-5-angular-and-turbolinks-demo
Turbolinks attempt to optimize rendering of pages and would conflict with normal bootstraping of AngularJS.
If you are using Turbolinks in some places of your app and some parts use Angular. I propose this elegant solution:
Each link to a page that is angularapp (where you use ng-app="appname") should have this attribute:
<a href="/myapp" data-no-turbolink>Say NO to Turbolinks</a>.
The second - mentioned on Stackoverflow is explicitly reloading/bootstrapping every ng-app by handling page:load event. I would that's intrusive, not to mention you're potentially loading something that isn't on a page hence wasting resources.
I've personally used the above solution.
Hope it helps
In case of bug
Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this
Element 'document'
after upgrade to angular 1.2.x you can use below to fix problem.
angular.module('App').run(function($compile, $rootScope, $document) {
return $document.on('page:load', function() {
var body, compiled;
body = angular.element('body');
compiled = $compile(body.html())($rootScope);
return body.html(compiled);
});
});
In previous post #nates proposed to change angular.bootstrap(document, ['YourApplication']) to angular.bootstrap("body", ['YourApplication']) but this causes a flash of uncompiled content.
Add the following event handler to your application.
Coffeescript:
bootstrapAngular = ->
$('[ng-app]').each ->
module = $(this).attr('ng-app')
angular.bootstrap(this, [module])
$(document).on('page:load', bootstrapAngular)
Javascript:
function bootstrapAngular() {
$('[ng-app]').each(function() {
var module = $(this).attr('ng-app');
angular.bootstrap(this, [module]);
});
};
$(document).on('page:load', bootstrapAngular);
This will cause the angular application to be started after each page loaded by Turbolinks.
Credit to https://gist.github.com/ayamomiji/4736614
Turbolinks doesn't quite make sense with an client side MVC framework. Turbolinks is used to to strip out the all but the body from server response. With client-side MVC you should just be passing JSON to the client, not HTML.
In any event, turbolinks creates its own callbacks.
page:load
page:fetch
page:restore
page:change
The jquery.turbolinks plugin can trigger bootstrapping of modules via ng-app directives. If you're trying to manually bootstrap your modules, jquery.turbolinks can lead to ng:btstrpd errors. One caveat I've found is that jquery.turbolinks relies on the page:load event, which can trigger before any new page-specific <script> tags finish running. This can lead to $injector:nomod errors if you include module definitions outside of the application.js. If you really want your modules defined in separate javascript files that are only included on certain pages, you could just disable turbolinks on any links to those specific pages via data-no-turbolink.
Based on the comments I've seen, the only valid scenario for using both together in a way where Angular would conflict with Turbolinks (such as where I allow Angular to handle some of the routing) is if I have an existing application that I'm trying to port to Angular.
Personally, if I were to do this from scratch, I think the best solution would be to decide what should handle the routing and stick with that. If Angular, than get rid of Turbolinks -> it won't do much for you if you have something close to a single-page app. If you allow Rails to handle the routing, then just use Angular to organize client-side behavior that can't be processed by the server when serving up the templates.
Am I missing a scenario, here? It doesn't seem elegant to me to try to split the routing responsibilities between different frameworks, even in a large application... Is there some other scenario where Turbolinks would interfere with Angular other than refreshing the page or navigating to a new route?
Using Turbolinks and AngularJS together
+1 to #fiedl for a great answer. But my preference is to make use of page:change in concert with page:load because this affords some flexibility: the DOM can receive a page:load event from sources other than turbolinks, so you might not want to have the same callback fire.
Watching for a page:change, then a page:load should restrict your callback behaviour to solely turbolinks-instigated events.
function boostrapAngularJS () {
angular.bootstrap(document.body, ['My Application']);
addCallbackToPageChange();
}
function addCallbackToPageChange() {
angular.element(document).one('page:change', function () {
angular.element(this).one('page:load', boostrapAngularJS);
});
}
addCallbackToPageChange();
(This will allow/require you to keep your ng-app declaration in your html, as normal when working with AngularJS.)
Turbolinks automatically fetches the page, swaps in its <body>, and merges its <head>, all without incurring the cost of a full page load.
https://github.com/turbolinks/turbolinks#turbolinks
So, instead of append ng-app directive on the <html> element, we can just do it on the <body> element.
<html>
<body ng-app=“yourApplicationModuleName">
</body>
</html>
Related
so the problem is this, I made a carousel with bootstrap and I just put bootstrap.js for javascript. But why does slide carousel not work? whereas if I put jquery, then it can work !! Is not there a javascript in the bootstrap.js file to call the carousel? any solutions? I want to create a carousel using bootstrap.js without using jquery.js
Bootstrap's JavaScript components depend on jQuery:
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
The quick start guide also states that jQuery is required:
Add our optional JavaScript plugins, jQuery, and Popper.js) near the end of your pages, right before the closing </body> tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use jQuery’s slim build in our docs, the full version is also supported.
You cannot get around this. If you want a carousel without jQuery, you should forget Bootstrap's carousel and look for another option. (For example here)
This is the first line of code from the bootstrap.js file for v3.3.7
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
the next line of code states that you need a minimum version of jquery 1.9.1 and a maximum of jquery 4 to be able to use bootstraps javascript
If I have an application that uses PJAX or Turbolinks then I am seeing a problem when new code is deployed to the server - say Heroku. The issue is that users who are accessing the application will continue to use the Javascript from the previous version of the application (since it is already loaded into the browser), but will get the HTML pages from the new version. Sometimes the new HTML code assumes the new Javascript is loaded so things don't work properly.
Have others noticed this problem? What do you do about it? It seems like this would be a common problem for single-page Javascript applications (like those based on Backbone and Ember) too. Meteor at least seamlessly upgrades the code in the client, as a way to deal with this problem.
https://github.com/rails/turbolinks/#asset-change-detection looks like the answer. In your script tags, put data-turbolinks-track. Then I assume what happens is that when turbolinks loads a page, it looks for that script tag, and if the URL has changed (it will change automatically if you use the asset pipeline) then it reloads the whole page for you.
taking pivotaltracker as an example, they check for the client connection and force the user to reload their clients if a new version arrived.
as long as you don't provide backwards compatibility within your app, there is nothing else you can do.
If you're using Pjax, you can add
<meta http-equiv="x-pjax-version" content="v123">
to your header. You can use a server defined value for the content attribute, and then before you deploy, just make sure that value is updated. Once it's deployed, subsequent Pjax requests will see this header has been updated, cancel it's Ajax request, and pull down a full page reload.
For Turbolinks 5, you can add data-turbolinks-track="reload" to your script and stylesheet links in the header. Turbolinks will watch these files for changes on each request. Then upon deployment, just like Pjax, it will request a full page reload.
Classic Turbolinks just requires the attribute data-turbolinks-track instead.
You can read more and see other functions on Pjax's GitHub page: https://github.com/defunkt/jquery-pjax or Turbolinks: https://github.com/turbolinks/turbolinks.
For Turbolinks Classic: https://github.com/turbolinks/turbolinks-classic
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
I wish to implement angularjs with jquery mobile all works fine except that the jquery mobile css is not applied.
It works when I don't use routing in angularjs but with routing, the css stops working.
What do I do? I also included the jquery-mobile-angular-adapter still it's not working.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
To solve this problem you have to tell JQuery to initialize all plugins after Angular loads the content, you can do this in your controller.
$scope.$on('$viewContentLoaded', function() {
$(document).trigger('create'); //$(document) or just the part that was loaded with ajax
});
I don't know jquery-mobile-angular-adapter, so I can't help with that.
I'm preparing a very basic Backbone application using jQuery Mobile for the UI and Backbone (with RequireJS) for the rest.
I used the following project as a base:
https://github.com/fiznool/mobile-backbone-boilerplate
And used Christophe Coenraets guide for using jQuery Mobile along with Backbone:
http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
And found a couple of good information, for example in here:
jquery mobile require.js and backbone
However, I'm having a lot of issues with new generated content and styles: more with pages that have more than one uri segment (for example: /movie/1).
My method that changes the view looks like the following:
var changeView = function(newView) {
newView.render();
newView.$el.addClass("ui-page").attr('data-role', 'page');
$(container).append(newView.$el);
$.mobile.changePage(newView.$el, {changeHash:false});
};
The page is actually changed, but it looks without any style. I found a solution by using the following code on the jquery.mobiile.config.js file:
$(document).bind('pagechange', function(e) {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active').page("destroy").page();
});
However, the styles are applied really late (after the page is rendered, like 500ms after).
Is there a better solution for this?
Well, I opted by removing jQuery Mobile and just style my components on my own.
I love jQuery Mobile and I used it in a couple of applications before, but the decision was more likely because the application felt too heavy when using jQuery Mobile and I just needed like 10% of jQuery Mobile.