티스토리 뷰

FrontEnd/Angular

Angular 에서 jquery 및 JS사용법

철철22 2018. 6. 1. 16:23
반응형

Angular를 사용하다가 jquery 및 JS 라이브러리를 사용해야할 때가 있다.


그럴 때 구글에 검색하면 여러가지 방법이 있지만 나는 여러가지를 사용해도 안되서 찾다가 결국 해결했다.




1. 일반적인 Angular에서 jquery 사용방법



1) npm에서 jquery 설치 


  1. npm install--savejquery && npm install -D @types/jquery
  2. import* as$ from 'jquery';
  3. 사용할컴포넌트에 declare var $:any;

 2) jquery cdn이나 file import 

  1. Angular cli를 이용해 프로젝트를 생성할 경우 index.html 에다가
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 추가
  2. declare var$: any;




2.  JS library 사용법

     - spa (Single Page Application) 기반에서 각 컴포넌트마다 분리되있어 외부 js파일을 인지하지 못함..


constructor(private elementRef:ElementRef) {};

ngAfterViewInit() {
  var s = document.createElement("script"); 
  s.type = "text/javascript";
  s.src = "http://somedomain.com/somescript";
  this.elementRef.nativeElement.appendChild(s);
}

// 참조 : 
https://stackoverflow.com/questions/34140065/script-tag-in-angular2-template-hook-when-template-dom-is-loaded
http://devstory.ibksplatform.com/2018/02/angular4-js-import.html

이러한 방법이 대부분이지만 나는 이것또한 실행되지 않았다.


나의 경험을 밑에 적어보자면

$(function () {
      // 생략
   });


  function wrapWindowByMask() {
    // 생략
  }

  $(document).ready(function () {
   // 생략
  });


이게 하나의 파일이였다.


근데 여러 방법을 동원해봐도 적용이 되지 않아 결국 하나의 방법으로 해결됬다.



var js = function() {
    $(function () {
        // 생략
     });
 
    function wrapWindowByMask() {
      // 생략
    }
  
    $(document).ready(function () {
     // 생략
    });


이후 제일 먼저 index.html의 body안에 js 추가


<script src="assets/js/js.js"></script>


그다음 사용할 컴포넌트에 변수 선언


declare var js: any;


이후 생명주기 메서드인 onInit()에


new js(); 


끝이다. 이렇게 하면 적용이 잘된다. 정말 잘된다.



만약에 js가 컴포넌트 안이 아닌 global 하게 사용하고 싶을 때는 new js()를 Appcomponent 에다가 구현을 해야한다.


ngAfterViewInit() {
	     $(window).load(  // jquery
	         function() { new js(); }
	     );
       // 또는 window.onload = function() { new js(); }


onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.

또한 <body onload=""> 와 같은attribute 가 설정이 되어 있는 경우에는

attribute의 onload=""만 작동할뿐 window.onload는 동작 하지 않는다

jquery 에서는 이러한onload의 단점들을 보완하는ready() 함수를 제공하는데 위의 코드를jquery 형식으로 바꾸면 다음과 같이 된다.




2018-06-11 추가


1. jquery 를 추가할 때 js에 선언된 이벤트에 try - catch 를 추가해주면 좋다.

   왜냐하면 try - catch를 사용해 주면서 angular에서 에러가 발생할 때 직접적인 처리를 함으로써 이벤트를 처리할 수 있기 때문이다. 





참조 : http://jinolog.com/programming/javascript/2011/03/21/jquery-ready-function.html




반응형

'FrontEnd > Angular' 카테고리의 다른 글

NgModule  (0) 2018.06.07
angular 에서 jquery selector  (0) 2018.06.04
Component Communication  (0) 2018.05.30
for...in  (0) 2018.05.24
ngModelChange  (0) 2018.05.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함