다른 페이지에 각도 앱을 삽입 하시겠습니까?

Question

저는 제어 할 수없는 다른 페이지에서 호출되는 자바 스크립트 앱을 작성하고 있습니다. Angular JS 앱을 삽입 할 수는 있지만 URL을 수정하지 않고 라우팅을 처리하려면 어떻게해야합니까? 이 시나리오에서 테스트 (즉, e2e)는 어떻게 작동합니까?

편집 : 응용 프로그램은 Wordpress 대시 보드에 오버레이 된 WordPress 플러그인이므로 URL 및 페이지 기록을 수정할 수 없습니다. 앱은 페이지에 삽입 된 div에 바인딩되며 CSS를 사용하여 기존 콘텐츠 위에 오버레이됩니다.

Answer 1

AngularJS와 앱을 조회하고 필요한 HTML을 제공하기 위해 후크를 사용할 수 있다고 생각합니다. 참고 사항 :

• URL을 변경할 수 없으므로 라우터를 HTML5 모드 대신 레거시 모드 (URL 해시 사용)로 사용해야합니다.

• 생성 된 URL에서 실행 중이므로 templateURL을 동적으로 작성해야합니다.

  <script>var MY_PLUGIN_BASE = '<?php echo plugins_url(); ?>'</script> 
  

  그리고 나중에 경로를 정의하고 templateURL 일정한 것을 사용 :

  이 작동

  $routeProvider 
      .when('/', { 
      templateUrl: MY_PLUGIN_BASE+'my-plugin/views/main.html', 
      controller: 'Main' 
      }) 
  

  , 그러나 일반적으로 내가 피할 예를 들어 , 당신의 플러그인 폴더에 URL에 대한 스크립트 태그를 OUPUT 그러한 상황에서 경로를 사용합니다. 이로 인해 컨트롤러와 지시문에서 더 많은 작업이 발생하지만 페이지에 다른 클라이언트 측 MVC 응용 프로그램이있을 수 있기 때문에 더 안전합니다.

• ng-app은 body 대신보기의 루트 요소에 연결됩니다. 보다 일반적인 임베디드 AngularJS와 응용 프로그램에 대한

  ---

는 (내 경험 : 북마크), 당신은 필요에 :

• 를 주입 AngularJS와 (window.angular 확인) 필요한 경우, CSS와 HTML.

• 앱의 JS 파일을 삽입하십시오. 하나의 ng-app가 자동 bootstraped 될 것입니다 때문에, 수동으로 templateURL에 대한 angular.bootstrap

  angular.bootstrap(document.getElementById('my-app'), ['MyApp']) 
  

• 사용 절대 URL을 사용하여 응용 프로그램을 부트 스트랩 및 URL은 CORS가 활성화했는지 확인합니다.

• 가능한 경우 경로를 사용하지 마십시오. Wordpress 플러그인의 경우, 라우팅을 위해 해시를 사용하는 다른 앱이 없다고 확신합니다 (Wordpress는 백본을 사용하지만 경로가 표시되지 않음). 일반적으로 이미 라우팅을 처리하는 페이지에 MVC 앱이 있습니다. .