turbolinks와 AngularJS와 사용

나는 turbolinks 내 응용 프로그램에 AngularJS와 프레임 워크를 사용하는 것을 시도하고있다. 페이지 변경 후에는 새로운 이벤트 리스너를 초기화하지 않습니다. 그것을 작동하게 할 수있는 방법이 있나요? 사전에 감사합니다!

해결법

==============================
1.Turbolinks뿐만 아니라 AnguluarJS은 모두 웹 애플리케이션의 응답 속도, 사용자 상호 작용 무엇인가에 대한 응답으로 다시로드와 전체 페이지를 다시 렌더링하지 않고 웹 페이지에서 발생한다는 점에서 확인 할 수 있습니다.

Turbolinks뿐만 아니라 AnguluarJS은 모두 웹 애플리케이션의 응답 속도, 사용자 상호 작용 무엇인가에 대한 응답으로 다시로드와 전체 페이지를 다시 렌더링하지 않고 웹 페이지에서 발생한다는 점에서 확인 할 수 있습니다.

그들은 다음과 같은 점에서 차이가 :

Turbolinks 당신이 손 그냥 코드 루비 / 레일에 의해 아무것도하지 않고이 강력한 AJAX 메커니즘을 사용할 수 있도록 강한 인 경우 응용 프로그램이 성장함에 따라 당신이 그런 AngularJS와 같은 자바 스크립트 프레임 워크를 통합하고 싶은 곳, 무대가 올 수 있습니다.

특히 당신이 연속적으로 한 번에, 응용 프로그램에 하나 개의 구성 요소를 AngularJS와 통합하려는이 매개물 단계에, 완벽하게 함께 각도 JS와 Turbolinks을 실행하는 감지 할 수 있습니다.

당신의 각도 코드에서 다음과 같이 응용 프로그램 모듈, 무엇인가를 정의하는 라인을 가지고 :
```
# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module 'MyApplication', ['ngResource']
```
페이지가로드 될 때이 코드가 실행됩니다. Turbolinks 그냥 페이지 및 방지 전체 페이지로드의 일부를 대체하기 때문에, 당신은 심지어 Turbolinks 수행 등의 일부를 다시로드 한 후, ( "부트 스트랩") 물론, 각 응용 프로그램이 제대로 초기화해야한다. 따라서, 다음의 코드에 의해 상기 모듈 선언 바꾸
```
# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module 'MyApplication', ['ngResource']

$(document).on 'turbolinks:load', ->
  angular.bootstrap document.body, ['MyApplication']
```
당신은 자주 HTML 코드에서 NG-응용 프로그램의 특성을 사용하여 자동으로 각도 응용 프로그램을 부트 스트랩하는 방법을 튜토리얼을 참조하십시오.
```


<html ng-app="YourApplication">
  ...
```
그러나 위의 설명서와 함께 부트 스트랩이 메커니즘을 사용하는 브레이크 애플리케이션 것이다 따라서 회 부트 스트랩 프로그램을 일으킬 것이다.

따라서, 그냥이 NG-응용 프로그램의 속성을 제거 :
```


<html>
  ...
```
==============================
2.Turbolinks 페이지의 최적화 렌더링을 시도 할 AngularJS와의 정상 bootstraping과 충돌.

Turbolinks 페이지의 최적화 렌더링을 시도 할 AngularJS와의 정상 bootstraping과 충돌.

당신은 당신의 응용 프로그램의 일부 장소에서 Turbolinks을 사용하고 일부는 각도를 사용하는 경우. 나는이 우아한 해결책을 제안한다 :

이 속성을 가져야한다 (당신이 겨 - 응용 프로그램 = "응용 프로그램 이름"을 사용) 각 응용 프로그램입니다 페이지로 각 링크 :
```
<a href="/myapp" data-no-turbolink>Say NO to Turbolinks</a>.
```
로드 이벤트 : - 두 번째 유래에 대한 언급은 명시 적으로 페이지를 처리하여 모든 겨-응용 프로그램을 부트 스트랩 / 다시로드됩니다. 그의는하지 당신이 잠재적 따라서 자원을 낭비 페이지에없는 무언가를로드하는 언급, 침입 것이다.

나는 개인적으로 위의 솔루션을 사용했습니다.

희망이 도움이
==============================
3.버그의 경우

버그의 경우

각 1.2.x를 업그레이드 한 후 당신은 수정 문제에 아래 사용할 수 있습니다.
```
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);
  });
});
```
변경 angular.bootstrap에 angular.bootstrap (문서 [ '내 애플리케이션']) ( "본체", [ '내 애플리케이션']) 그러나 이전에 제안 포스트 @nates 이것은 컴파일되지 않은 콘텐츠의 플래시시킨다.
==============================
4.Turbolinks는 꽤 클라이언트 측 MVC 프레임 워크 이해가되지 않습니다. Turbolinks는 서버 응답에서 모든하지만 시체를 제거하는 데 사용됩니다. 클라이언트 측 MVC와 함께 당신은 클라이언트가 아닌 HTML로 JSON을 통과해야한다.

Turbolinks는 꽤 클라이언트 측 MVC 프레임 워크 이해가되지 않습니다. Turbolinks는 서버 응답에서 모든하지만 시체를 제거하는 데 사용됩니다. 클라이언트 측 MVC와 함께 당신은 클라이언트가 아닌 HTML로 JSON을 통과해야한다.

어떤 경우에도, turbolinks는 자신의 콜백을 만듭니다.
```
page:load
page:fetch
page:restore
page:change
```
==============================
5.jquery.turbolinks 모듈을 통해 NG-응용 프로그램 지침의 CAN 트리거 부트 스트랩 플러그인. btstrpd 오류 : 수동으로 모듈을 부트 스트랩하려는 경우, jquery.turbolinks는 겨 발생할 수 있습니다. 새로운 페이지 별 <스크립트> 전에 태그가 실행 완료를 트리거 할 수있는로드 이벤트 : 내가 찾은 한 가지주의해야 할 점은 jquery.turbolinks 페이지에 의존한다는 것이다. 당신이 외부 application.js의 모듈 정의를 포함하는 경우 nomod 오류 :이 $ 인젝터로 이어질 수 있습니다. 당신이 정말로 특정 페이지에 포함되어 별도의 자바 스크립트 파일에 정의하여 모듈을하려는 경우, 수있는 데이터 노 turbolink를 통해 그 특정 페이지에 대한 링크에 불과 비활성화 turbolinks.

jquery.turbolinks 모듈을 통해 NG-응용 프로그램 지침의 CAN 트리거 부트 스트랩 플러그인. btstrpd 오류 : 수동으로 모듈을 부트 스트랩하려는 경우, jquery.turbolinks는 겨 발생할 수 있습니다. 새로운 페이지 별 <스크립트> 전에 태그가 실행 완료를 트리거 할 수있는로드 이벤트 : 내가 찾은 한 가지주의해야 할 점은 jquery.turbolinks 페이지에 의존한다는 것이다. 당신이 외부 application.js의 모듈 정의를 포함하는 경우 nomod 오류 :이 $ 인젝터로 이어질 수 있습니다. 당신이 정말로 특정 페이지에 포함되어 별도의 자바 스크립트 파일에 정의하여 모듈을하려는 경우, 수있는 데이터 노 turbolink를 통해 그 특정 페이지에 대한 링크에 불과 비활성화 turbolinks.
==============================
6.응용 프로그램에 다음 이벤트 처리기를 추가합니다.

응용 프로그램에 다음 이벤트 처리기를 추가합니다.

커피 스크립트 :
```
bootstrapAngular = ->
  $('[ng-app]').each ->
    module = $(this).attr('ng-app')
    angular.bootstrap(this, [module])

$(document).on('page:load', bootstrapAngular)
```
자바 스크립트 :
```
function bootstrapAngular() {
  $('[ng-app]').each(function() {
    var module = $(this).attr('ng-app');
    angular.bootstrap(this, [module]);
  });
};
$(document).on('page:load', bootstrapAngular);
```
이는 각 페이지 Turbolinks에 의해로드 된 후 각 응용 프로그램이 시작되는 원인이됩니다.

https://gist.github.com/ayamomiji/4736614에 신용
==============================
7.나는 기존의 응용 프로그램이있는 경우 내가 본 의견을 바탕으로, 각도 (예 : 나는 라우팅의 일부를 처리 할 각도 수있는 곳으로) Turbolinks과 충돌하는 방식으로 모두 함께를 사용하는 경우에만 유효 시나리오입니다 I ' m은 각도에 포트에 노력.

나는 기존의 응용 프로그램이있는 경우 내가 본 의견을 바탕으로, 각도 (예 : 나는 라우팅의 일부를 처리 할 각도 수있는 곳으로) Turbolinks과 충돌하는 방식으로 모두 함께를 사용하는 경우에만 유효 시나리오입니다 I ' m은 각도에 포트에 노력.

나는 처음부터이 작업을 수행하는 경우 개인적으로, 나는 최선의 해결책은 그와 라우팅 및 스틱을 처리해야할지 결정하는 것입니다 생각합니다. 각도가, Turbolinks 없애보다 경우 -> 당신을 위해 많은 일을하지 않습니다 당신은 단일 페이지 응용 프로그램에 뭔가 가까이있는 경우. 당신은 레일 라우팅을 처리 할 경우, 단지 템플릿을 제공 할 때 서버가 처리 할 수없는 클라이언트 측 동작을 구성 할 각도를 사용합니다.

여기, 시나리오 실종? Turbolinks 페이지를 새로 고치거나 새로운 경로로 이동보다 각도, 다른 방해하는 다른 시나리오가 있는가 ... 심지어 대형 응용 프로그램에서 다른 프레임 워크 사이의 라우팅 책임을 분할하려고 나에게 우아하지 않는 것?
==============================
8.하나는 좋은 대답을 @fiedl합니다. 페이지와 콘서트의 변화 :하지만 내 취향은 페이지의 메이크업에 사용하는 하중이 때문에 복스 유연성 : 동일한 콜백 불을 갖고 싶어되지 않을 수도 있습니다, turbolinks 이외의 다른 소스에서로드 이벤트 : DOM을이 페이지를받을 수 있습니다.

하나는 좋은 대답을 @fiedl합니다. 페이지와 콘서트의 변화 :하지만 내 취향은 페이지의 메이크업에 사용하는 하중이 때문에 복스 유연성 : 동일한 콜백 불을 갖고 싶어되지 않을 수도 있습니다, turbolinks 이외의 다른 소스에서로드 이벤트 : DOM을이 페이지를받을 수 있습니다.

페이지에 대한보고 : 변경 한 다음 페이지를 : 부하가 전적으로 turbolinks-사주 이벤트에 콜백 동작을 제한해야합니다.
```
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();
```
(AngularJS와 함께 작업 할 때 정상으로, 당신의 HTML에 NG-응용 프로그램 선언을 유지하도록 요구 / 수 있습니다.)
==============================
9.https://github.com/turbolinks/turbolinks#turbolinks

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

그래서, 대신 요소에 APPEND 겨 - 응용 프로그램 지침, 우리는 단지 요소에 그것을 할 수 있습니다.
```
<html>
  <body ng-app=“yourApplicationModuleName">
  </body>
</html>
```

from https://stackoverflow.com/questions/14797935/using-angularjs-with-turbolinks by cc-by-sa and MIT license

'RUBY-ON-RAILS' 카테고리의 다른 글

[RUBY-ON-RAILS] 선택 도우미 난간 - 기본 방법, 값을 선택? (0)	2020.02.21
[RUBY-ON-RAILS] 협회를 통해 belongs_to (0)	2020.02.21
[RUBY-ON-RAILS] 3 마이그레이션 레일 : 참조 열을 추가? (0)	2020.02.21
[RUBY-ON-RAILS] 어떻게 JSON에 루비 해시 객체를 변환하는? (0)	2020.02.21
[RUBY-ON-RAILS] 어떻게 독립적 인 로그 파일에 레일에 뭔가를 기록하려면? (0)	2020.02.21

복붙노트

[RUBY-ON-RAILS] turbolinks와 AngularJS와 사용

turbolinks와 AngularJS와 사용

해결법

1.Turbolinks뿐만 아니라 AnguluarJS은 모두 웹 애플리케이션의 응답 속도, 사용자 상호 작용 무엇인가에 대한 응답으로 다시로드와 전체 페이지를 다시 렌더링하지 않고 웹 페이지에서 발생한다는 점에서 확인 할 수 있습니다.

2.Turbolinks 페이지의 최적화 렌더링을 시도 할 AngularJS와의 정상 bootstraping과 충돌.

3.버그의 경우

4.Turbolinks는 꽤 클라이언트 측 MVC 프레임 워크 이해가되지 않습니다. Turbolinks는 서버 응답에서 모든하지만 시체를 제거하는 데 사용됩니다. 클라이언트 측 MVC와 함께 당신은 클라이언트가 아닌 HTML로 JSON을 통과해야한다.

6.응용 프로그램에 다음 이벤트 처리기를 추가합니다.

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

'RUBY-ON-RAILS' 카테고리의 다른 글

티스토리툴바