En utilisant angularjs avec turbolinks

Je suis en train d'utiliser Angularjs cadre de mon application avec turbolinks. Après le changement de page n'est pas d'initialiser de nouveaux eventlisteners. Est-il de toute façon pour le faire fonctionner? Merci à l'avance!

Serait-ce une bonne idée d'utiliser turbolinks avec le framework MVC sur le client. Est turbolinks pas question de réduire le Javascript pour mettre à nu le minimum pour obtenir un avantage de codage seulement en Ruby pour servir des pages du client ainsi que l'exécution de code serveur ?

InformationsquelleAutor Pavel | 2013-02-10

125

AngularJS vs Turbolinks

Turbolinks ainsi que AnguluarJS peut à la fois être utilisé pour réaliser une application web de réagir plus rapidement, dans le sens que, en réponse à une interaction de l'utilisateur que quelque chose se passe sur la page web sans recharger et de nouveau rendu de la page entière.

Ils diffèrent dans la suite de propos:
- AngularJS vous aide à construire un riche de l'application côté client, où vous écrire beaucoup de code JavaScript qui s'exécute sur la machine client. Ce code rend le site interactif de l'utilisateur. Il communique avec le serveur-côté backend, c'est à dire avec l'application Rails, à l'aide d'une API JSON.
- Turbolinks, d'autre part, contribue à rendre le site interactif sans vous demander de code JavaScript. Il vous permet de en tenir à la Ruby/Rails de code exécuter sur le serveur-côté et encore, "comme par magie", l'utilisation d'AJAX pour le remplacer, et donc rerender, seules les parties de la page qui ont changé.
Où Turbolinks est forte en vous permettant d'utiliser ce puissant AJAX mécanisme sans rien faire à la main et du code Ruby/Rails, il pourrait venir d'un stade, en tant que votre demande se développe, où vous souhaitez intégrer un framework JavaScript comme AngularJS.

Surtout dans cette étape intermédiaire, où vous souhaitez intégrer successivement AngularJS dans votre application, un seul composant à la fois, il peut faire parfaitement sens pour exécuter Angular JS et Turbolinks ensemble.

Comment utiliser AngularJS et Turbolinks ensemble

Utiliser le callback manuellement bootstrap Angulaire

Dans votre Angulaire de code, vous avez une ligne de la définition de votre module d'application, quelque chose comme ceci:
```
# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module 'MyApplication', ['ngResource']
```
Ce code est exécuté lorsque la page est chargée. Mais depuis Turbolinks remplace simplement une partie de la page et empêche tout un chargement de la page, vous devez prendre soin de, l'angulaire de l'application est correctement initialisé ("bootstrap"), même après que ces partielle de la recharge effectuée par Turbolinks. Ainsi, remplace le module de déclaration par le code suivant:
```
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']

$(document).on 'turbolinks:load', ->
  angular.bootstrap document.body, ['MyApplication']
```
Ne pas bootstrap automatiquement

Vous voyez souvent dans les tutoriels comment bootstrap Angulaire app automatiquement en utilisant le ng-app attribut dans votre code HTML.
```


<html ng-app="YourApplication">
  ...
```
Mais l'utilisation de ce mécanisme avec le manuel de bootstrap illustré ci-dessus pourrait entraîner l'application de bootstrap deux fois et, par conséquent, frein à l'application.

Ainsi, il suffit de retirer cette ng-app attribut:
```


<html>
  ...
```
Lecture
- AngularJS amorçage: http://docs.angularjs.org/guide/bootstrap
- Railscasts sur Turbolinks explique les rappels): http://railscasts.com/episodes/390-turbolinks
- De démonstration de l'application: https://github.com/fiedl/rails-5-angular-and-turbolinks-demo
- Un a donné la technique de bootstrap de l'essayer. Cependant j'ai rencontré un problème lorsque plusieurs événements sont en train de créer sur mes directives. Par exemple, si turbolinks charges de vue avec: ng-click="save()" puis recharge la vue... ma méthode save() maintenant le feu à trois reprises. Des idées?
- J'ai été en mesure de résoudre les multiples problèmes et peut-être d'autres buggy scénarios par le déplacement Angulaire dans le <head> section de notre admin (donc, la prévention de plusieurs instanciations de mes scripts). Ce n'est pas un public en face de l'expérience donc je ne suis pas trop préoccupé par les pièges de chargement JS dans le code html de la section de la tête.
- Cette méthode a très bien fonctionné pour moi avec angularjs 1.0.6. Mais après la mise à niveau à angularjs 1.2.0.rc3, j'obtiens ceci dans la console une fois de naviguer vers une nouvelle page via turbolinks: Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'. Apparemment, un élément ne peut être démarré une fois. Changer angular.bootstrap(document, ['YourApplication']) à angular.bootstrap("body", ['YourApplication']) semble fonctionner sans aucun problème.
- le "corps" n'a pas de travail pour moi, mais le document.le corps n'. Merci!
- J'ai dû utiliser "corps", mais aussi supprimer le "prêt" de la $(document).on ligne, et a ajouté une $ -> au lieu
- J'ai utilisé "corps", mais a ajouté unless $('body').hasClass('ng-scope') (coffeescript!) après angulaire.bootstrap
- Super réponse! Si vous utilisez Turbolinks 5, le nom de l'événement doit être modifié pour $(document).on "turbolinks:load", -> …. Merci!
- Ne fonctionne pas, et pourquoi êtes-vous à l'aide de coffeescript au lieu de js? Pour l'usage général, javascript serait préférable, donc je n'ai pas à le convertir.
- Confirmé travailler sur des Rails/Turbolinks 5 et Angulaire 1.5.8 à l'aide de $(document).on('turbolinks:load', function() { angular.bootstrap(document.body, ['myApp']); }) Merci!
- J'ai mis à jour la réponse pour les rails 5 (turbolinks 5) et angulaire 1.5.8, et j'ai ajouté un démonstration de l'application sur github. Hésitez pas à inspecter les commet pour voir les étapes.
- J'ai juste rencontré un problème avec cette méthode. J'ai eu un intervalle d'exécution dans un service et cela a provoqué pour démarrer un nouvel intervalle à chaque chargement de page, et la vieille ne voulait pas mourir, ce qui leur pile. Est venu avec une très sale solution, mais j'aimerais entendre d'autres idées. stackoverflow.com/questions/41206111/turbolinks-with-angular/...
InformationsquelleAutor fiedl
9

Turbolinks tenter d'optimiser le rendu des pages et serait en conflit avec la normale ou initier d'AngularJS.

Si vous utilisez Turbolinks dans certains endroits de votre application et certaines parties Anguleuses. Je propose cette solution élégante:

Chaque lien vers une page qui est angularapp (où vous utilisez ng-app="appname") devrait avoir cet attribut:
```
<a href="/myapp" data-no-turbolink>Say NO to Turbolinks</a>.
```
La deuxième sur Stackoverflow est explicitement rechargement/amorçage chaque ng-app par la page de traitement:la charge de l'événement. Je voudrais que l'intrusif, ne pas mentionner que vous êtes potentiellement chargement de quelque chose qui n'est pas sur une page où le gaspillage des ressources.

J'ai personnellement utilisé la solution ci-dessus.

Espère que cela aide
- Il est utile dans un très grand app pour minimiser le conflit
- Appréciez les commentaires 🙂
InformationsquelleAutor jeveloper
4

En cas de bug

Erreur non interceptée: [ng:btstrpd] App Déjà Amorcé avec ce
L'élément "document"

après la mise à niveau vers angulaire 1.2.x vous pouvez utiliser ci-dessous pour résoudre le problème.
```
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);
  });
});
```
Dans le précédent post @nates proposé de modifier angular.bootstrap(document, ['YourApplication']) à angular.bootstrap("body", ['YourApplication']) mais cela provoque un flash de non contenu.

InformationsquelleAutor Artur Trzop
1

Turbolinks n'est pas tout à fait faire du sens avec un framework MVC côté client. Turbolinks est utilisé pour foirer le tout, mais le corps de la réponse du serveur. Côté client MVC, vous devriez juste être de passage JSON pour le client, pas en HTML.

Dans tous les cas, turbolinks crée ses propres rappels.
```
page:load
page:fetch
page:restore
page:change
```
- Je suis avec angular js uniquement sur quelques pages de mon application. Et je pense qu'il n'ya aucun moyen de le faire sans abandonnant turbolinks
- Avez-vous essayé d'accrochage dans l'un de ces rappels?
- J'ai essayé d'accrochage dans les rappels, il provoque des problèmes avec la fenêtre.l'histoire et l'emplacement. Je vais avoir un moment difficile d'articuler entre eux, mais je peux vous dire que la mise en œuvre n'est pas anodin et la désactivation de turbolinks résout le problème, réf: stackoverflow.com/questions/30804236/...
InformationsquelleAutor cpuguy83
1

La jquery.turbolinks plugin peut déclencher l'amorçage de modules via ng-app directives. Si vous essayez de les faire manuellement bootstrap vos modules, jquery.turbolinks peut conduire à la ng:btstrpd erreurs. Une mise en garde que j'ai trouvé est que jquery.turbolinks s'appuie sur la page:load de l'événement, ce qui peut déclencher avant toute nouvelle page spécifique <script> les balises de fin de l'exécution. Cela peut conduire à $injector:nomod erreurs si vous incluez module de définitions à l'extérieur de la application.js. Si vous voulez vraiment les modules définis dans la séparer les fichiers javascript qui ne sont inclus sur certaines pages, vous pouvez simplement désactiver turbolinks sur tous les liens vers ces pages via data-no-turbolink.
- J'aurais dû lire cela de plus près avant que j'ai posté, ce, au moins partiellement, répond à ma question dans le post. Est-il autre chose utile à savoir sur la façon Turbolinks fonctionne lorsque j'ai une application qui rend l'utilisation d'un frontal cadre?
InformationsquelleAutor Gabe Martin-Dempesy
1

Ajouter le gestionnaire d'événement suivant votre demande.

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);
```
Ce sera la cause de l'angle de l'application pour être démarré après chaque page chargée par Turbolinks.

De crédit à https://gist.github.com/ayamomiji/4736614
- Vraiment beaucoup de mal à adopter Coffeescript! Le non-café de la version de c'est beaucoup plus clair pour moi.
- Cela fonctionne pour moi, sauf si vous allez directement à la page. suce!
- Oui, pour être plus clair, il ne concerne que les pages chargées par Turbolinks. Vous aurez également besoin d'inclure $(document).on('ready', bootstrapAngular).
- Non, je vous suis TOUS les battre. Vous DEVEZ être à l'écoute prêt à l'emploi ET à la page:la charge, MAIS vous ne devriez PAS utiliser ng-app. Lorsque angulaire voit ng-app, il va essayer de charger votre module, mais il est trop tôt. Utiliser un autre attribut personnalisé, comme "mon application" au lieu de "ng-app" pour éviter ce problème. Mon problème était qu'il était en train de charger mon module, AVANT que la précédente code chargé dans mon module.
- J'ai trouvé cela a fonctionné pour moi avec ready et page:change
- Cela fonctionne mieux que la solution retenue. Vous obtenez downvote pour ne pas utiliser de javascript et un upvote pour la bonne solution.
InformationsquelleAutor Robin Daugherty
0

Sur la base des commentaires que j'ai vu, la seule valable scénario pour l'utilisation à la fois dans une voie où Angulaire serait en conflit avec Turbolinks (comme l'endroit où je me permettre Angulaire pour gérer certains de routage) est si j'ai une application que je suis en train de port Angulaire.

Personnellement, si je devais le faire à partir de zéro, je pense que la meilleure solution serait de décider de ce qui doit gérer le routage et le bâton avec qui. Si Angulaire, que de se débarrasser de Turbolinks -> il n'a pas beaucoup de sens pour vous, si vous avez quelque chose à proximité d'une seule page de l'app. Si vous vous permettez de Rails pour gérer le routage, alors il suffit d'utiliser Angulaire d'organiser comportement côté client ne peuvent pas être traitées par le serveur au moment de servir les modèles.

Ai-je raté un scénario, ici? Il ne semble pas élégant à moi pour essayer de diviser le routage des responsabilités entre les différents cadres, même dans une grande demande... Est-il un autre scénario où Turbolinks pourrait interférer avec Angulaire autre que l'actualisation de la page ou de naviguer vers une nouvelle route?

InformationsquelleAutor josiah
0

À l'aide de Turbolinks et AngularJS ensemble

+1 pour @fiedl pour une grande réponse. Mais ma préférence est de faire usage de page:change de concert avec page:load parce que cela offre une certaine souplesse: le DOM peut recevoir un page:load événement à partir de sources autres que turbolinks, de sorte que vous pourriez voulez pas avoir le même rappel de feu.

Regarder pour un page:change, puis un page:load devrait restreindre votre rappel de comportement uniquement turbolinks-à l'instigation des événements.
```
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();
```
(Cela permettra de/vous obliger à garder votre ng-app déclaration dans votre code html, comme d'habitude lorsque l'on travaille avec AngularJS.)

InformationsquelleAutor JellicleCat
0

Turbolinks récupère automatiquement la page, les swaps sur son <body>, et fusionne ses <head>, tous sans encourir le coût d'un plein chargement de la page.

https://github.com/turbolinks/turbolinks#turbolinks

Ainsi, au lieu d'ajouter ng-app directive sur la <html> élément, on peut juste le faire sur le <body> élément.
```
<html>
  <body ng-app=“yourApplicationModuleName">
  </body>
</html>
```
InformationsquelleAutor Repolês

Vous devez vous connecter pour publier un commentaire.

AngularJS vs Turbolinks

Comment utiliser AngularJS et Turbolinks ensemble

Utiliser le callback manuellement bootstrap Angulaire

Ne pas bootstrap automatiquement

Lecture

À l'aide de Turbolinks et AngularJS ensemble