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:
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:
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:
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
<!-- app/views/layouts/my_layout.html.erb --> <!-- with turbolinks --> <html> ...
- 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