使用angularjs与turbolinks [英] Using angularjs with turbolinks
问题描述
我想在我和turbolinks的应用程序使用Angularjs框架。页面更改后它不会初始化新的事件监听器。这是任何方式，使其工作？在此先感谢！
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!
推荐答案
Turbolinks 以及 AnguluarJS 都可以用来做Web应用程序响应速度更快，在响应用户交互有事网页上的感无需重新加载和重新描绘整个页面。
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 帮助您打造的丰富的客户端应用程序，你写了很多的客户机上运行的JavaScript code的。这code使得现场互动给用户。它与服务器端的后端，即具有Rails应用程序进行通信，使用JSON的API。
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 ，在另一方面，有助于使网站的互动，而不需要您code的JavaScript。它可以让你的固守的Ruby / Rails code 在服务器端运行，仍然，神奇，使用AJAX来代替，因此重新呈现，只有网页的部分即已经改变了。
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.
在哪里Turbolinks力量雄厚，允许你使用这个功能强大的AJAX机制没有做手工什么，只是code的Ruby / Rails，有可能出现一个阶段，随着应用的增长，在那里你想整合JavaScript框架如AngularJS。
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.
特别是在这个中间阶段，在那里你想在同一时间AngularJS先后集成到应用程序，一个组件，它可以使完全意义运行角JS和Turbolinks在一起。
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.
在您的角code，你必须定义你的应用程序模块的线路，是这样的：
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("YourApplication", ["ngResource"])
这code是当页面加载运行。但由于Turbolinks刚刚替换页和prevents整个页面负载，您必须确保的一部分，棱角分明的应用程序正常初始化（自举），甚至Turbolinks做过这样局部重载之后。因此，通过以下code替换上面的模块声明：
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("YourApplication", ["ngResource"])
$(document).on('ready page:load', ->
angular.bootstrap(document, ['YourApplication'])
)
不要引导自动
您经常在教程看到如何在你的HTML code。使用 NG-应用属性自动引导的角度应用程序。
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.
因此，只要删除该 NG-应用属性：
Thus, just remove this ng-app attribute:
<!-- app/views/layouts/my_layout.html.erb -->
<!-- with turbolinks -->
<html>
...
进一步阅读
- AngularJS引导： http://docs.angularjs.org/guide/bootstrap
- 在Turbolinks Railscasts（说明回调）：<一href=\"http://railscasts.com/episodes/390-turbolinks\">http://railscasts.com/episodes/390-turbolinks
- AngularJS bootstrapping: http://docs.angularjs.org/guide/bootstrap
- Railscasts on Turbolinks (explains callbacks): http://railscasts.com/episodes/390-turbolinks
Further Reading
这篇关于使用angularjs与turbolinks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
