본문 바로가기

Javascript

(81)
Angular 5의 새로운 기능 :보다 쉬운 점진적인 웹 앱 https://www.infoworld.com/article/3213244/javascript/whats-new-in-angular-5-easier-progressive-web-apps.html 각도는 모바일 및 데스크톱 응용 프로그램을 구축하기위한 구글의 인기있는 자바 스크립트 프레임 워크는 , 지난 14 개월 동안 두 가지 주요 업그레이드와 함께, 험난한 한 해를 보냈습니다. 2017 년 11 월 1 일에 Angular 5.0.0이 도착하면서 다음 단계에 도달했습니다. 그러나 Google 기반의 프로그레시브 웹 앱 및 Material Design 기능에 대한 계획된 지원은 2017 년 11 월 말까지 출시 될 예정입니다. Angular 5.0.0 업그레이드 자체는 프레임 워크를 더 빠르고, 작고, 사..
JWPlayer 사용시 가운데 실행 아이콘 삭제해야할 경우 고객사의 요청으로 영상이 끝나면 멈춰달라는 요청이 있었다 그리고 멈추면 실행 아이콘이 생기는데 숨겨야하는 이슈도 던져줬다. 일단 영상이 멈추면 실행아이콘이 jwplayer에서 자동 생성된다 그냥 아이콘 클래스를 jquery로 잡아서 hide하려 했는데 타이밍이 그래서 인지 잡을수가 없습니다. 간단하게 settimeout을 사용했다. jwplayer('player').onTime(function (event) { if (!seeking) { if (renderMode != "html5") maxPlayPosition = event.position - 60 > maxPlayPosition ? (event.position - 60) maxPlayPosition ? event.position : maxPlayP..
Angular Polyfills error IE 또는 모바일 브라우저 Angular4로 프로젝트를 만들었는데 자꾸 에러가 나네요 IE에서는 iterator가 undefined로 나오고 허허 구글을 뒤져보니 간단하게 polyfills.ts파일에 주석처리한 부분을 없애라고 하네요 없애고 cordova로 씌어 해보니 잘 되네요 혹시 cordova와 angular를 같이 쓰시는 분은 아래의 파일을 참조하세요 /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are..
component.css 에서 경로 못찾을때 오늘 컴파일 하는데 신기한 일이 일어났다 svg폴더를 /assets/images/a.svg 로 놓았는데 ng build --prod 하니 에러가 발생한 것이다. 음... 음... 생각하다가... assets/image/a.svg 경로를 절대경로로 /assets/image/a.svg 로 변경하니 빌드가 잘 된다 예상하건데 style optimizing 할때 떨어지는 파일 경로 때문인것같다.. 혹 안되시는분든 경로를 수정해 보면 좋을듯하다.
component에서 Pipe쓰기 음 view단에서 pipe를 쓰는게 아니라 component에서 써야할 경우가 있네요 일단 ngmoudle.ts provider에다가 사용할 pipe를 등록합니다. 전 providers: [DatePipe] 전 이렇게 등록했음 그리고 사용할 컴퍼넌트 생성자 함수에 주입주입시킵니다. constructor(private datePipe: DatePipe) { } 그다음 다음과 같이 쓰면 됩니다. this.date = this.datePipe.transform(new Date(), 'dd-MM-yy');
component 끼리 통신하기 상황 app.component.ts 에서 라우팅 되는 페이지들의 데이터를 받아서 처리해야할때 잘못 구현 된걸 수도 있는데 이런게 있다면 보심 될것같음 base.service.ts 서버스를 만들고 app.module에등록한다. import { Output, EventEmitter, Injectable } from '@angular/core';import { BehaviorSubject } from "rxjs/Rx"; @Injectable()export class BaseService { @Output() asideVisible = new BehaviorSubject(true); @Output() tabNumber = new BehaviorSubject(2); setAside(input: Boolean) {..
angualr2 에서 infinite scroll 사용하기 먼저 npm install angular2-infinite-scroll --save 해당 명령어로 install하시고 아래와 같이 필요한 태그에다가 infinite scroll에 관련된 속성들을 삽입해 줍니다. 그다음으로 ts파일에서 아래와 같이 메서드를 삽입해 주면 끝 onScroll() {console.log('scrolled!!');//로직 들어갑니다.}
angular cli 와 cordova angular cli와 cordova의 조합으로 앱을 만든 경우가 있는데요. (기존 project converting) cordova는 www폴더 이하로 소스구분을 하는데요 www폴더를 생성하기 위해 아래와 같이 .angular-cli.json을 수정해 줍니다. 혹시 external script를 추가할때는 scripts 부분에 배열형식으로 추가해 주시면 됩니다. 끝.