Programming/Angular (26) 썸네일형 리스트형 [Angular] 저장되지 않은 파일이 있는데 뒤로 가기를 누른 경우 경고 알럿 띄우기 안녕하세요. 명동섞어찌개 입니다. 오늘은 Angular 페이지에서 문서 (form) 작성 중 또는 무언가를 등록하다가, 저장하지 않고 브라우저 뒤로가기 버튼을 눌렀을 때 '저장하지 않은 파일이 있습니다. 페이지를 나가시겠습니까?'라고 묻는 알럿 띄우는 기능을 만들려고 합니다. 일반적으로 이런 기능은 javascript 에서는 popstate 이벤트 리스너를 사용해서 구현합니다. (모바일에서도 사용한 기억이 있습니다.) 1 2 3window.addEventListener('popstate', (event) => { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); }); 하지만 Angular 에.. [Angular] File Upload > Drag and Drop 만들기 안녕하세요. 명동섞어찌개입니다. 오늘은 Angular 를 이용한 파일 업로드 기능 개발 시 편리한 사용성을 위해 Drag and Drop 드래그 앤 드랍 기능을 추가하는 방법을 알아볼건데요, vanila javascript (순수 자바스크립트) 로 개발하면 익스플로러와 크롬 브라우저 등 브라우저 별 예외처리가 필요해서 시간이 꽤 걸리는 일이지만 (개인적으로 0 부터 시작해서 개발했을 때 다른 업무 처리하면서 일주일 정도 걸렸습니다..) Angular 는 directive 를 사용해서 간편하게 개발할 수 있더라구요. Angular Version: 8 결과화면 1. 먼저 drag-and-drop directive 를 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .. [Angular] HttpInterceptor를 사용하여 Token 만료 검증하기 안녕하세요. 남산돈가스입니다. 이번 포스팅에서는 Angular 프로젝트 환경에서 API를 요청하실 경우, 가장 보편적으로 사용하시는 HttpClientModule에서 Http 요청을 가로채 특정 처리를 할 수 있도록 도와주는 HttpInterceptor 인터페이스에 대해서 작성해보겠습니다. 우선 HttpInterceptor는 Angular 4.3부터 추가 된 기능으로, 위에서 말한 것처럼, HttpClientModule을 이용한 API 호출 시 그 중간의 요청을 가로채어 특정 처리를 진행할 경우에 사용합니다. 저희 팀에서 Angular를 진행하는 프로젝트에서는 이 Interceptor를 API 호출 시 OAuth Token을 만료인지 유효한 지 검증하기 위한 용도로 사용되고 있습니다. 이번 포스팅에서 예.. Angular2+ 에서 넘치는 글자 말줄임표(...) 처리하기 Angular2+ 에서 말줄임(...) 처리는 크게 세 가지로 할 수 있습니다. 1. Pipe 로 템플릿 단에서 처리 2. 스크립트 처리 3. CSS 로 처리 1줄일 경우, 2줄 이상일 경우 다른 방법이 쓰입니다. 이 세 가지에 대해 간단한 핵심 소스를 공유 드립니다. 1. Pipe *.ts str:string = '일이삼사오육칠팔구십' *.html {{ (str.length>6)? (str | slice:0:6)+'...':(str) }} 결과화면 일이삼사오육... 2. 스크립트 사용 *.ts var limitLen = 6; if (str.length > length) { str = str.substr(0, limitLen) + '...'; } *.html {{ str }} 결과화면 일이삼사오육... .. ionic 하이브리드 앱 개발 - #6 ionic native Ionic Native는 Cordova 플러그인 TypeScript 개발도구로써 Ionic 모바일 어플리케이션에 필요한 기본 기능을 손쉽게 추가 할 수 있습니다. Promises 와 ObservablesIonic Native는 Promise 또는 Observable에서 플러그인 콜백을 통하여 모든 플러그인에 공통 인터페이스를 제공하고 네이티브 이벤트가 Angular로 변경 감지하도록 보장합니다.import { Geolocation } from '@ionic-native/geolocation'; import { Platform } from 'ionic-angular'; class MyComponentOrService { constructor(private platform: Platform, private .. angular4에서 외부 js파일 import 하기 안녕하세요. 남산돈가스입니다. angular 기반의 웹을 구축하면서, 외부의 js 소스를 import하여 사용해야하는 경우가 생기는데요. 기존의 웹 개발 방식은 각각의 페이지 별로 태그가 만들어졌다고 이해하시면 됩니다.그리고 script태그의 src에 접근하여 (1)의 url를 할당하고, type에 접근하여 'text/javascript' 타입을 지정한 뒤, async를 통해 비동기 처리 여부를 설정합니다. 여기까지 설정한 내용은 html의 와 동일한 내용입니다.마지막으로 요소에 접근할 수 있는 ElementRef의 el객체의 자식노드로 해당 script를 append 해줌으로서 컴포넌트 내 html에서 외부 js소스가 import되게 됩니다. (6) - 마지막으로, (5)에서 생성한 loadDaumAp.. ionic 하이브리드 앱 개발 - #5 navigation 네비게이션 ionic3에서는 모바일 환경을 중심으로 단순화되고 있으며, ionic3에서는 향상된 네비게이션 기능을 위해 @IonicPage 데코레이터가 도입되었습니다. 먼저 네이게이션 기능을 살펴보도록 하겠습니다. 기본 네비게이션src/app/app.html 파일을 열고 내용을 살펴보면, 아래와 같은 내용을 확인할 수 있습니다. ion-nav는 NavController의 하위 클래스 이며, 네이게이션 스택과 작업하기 위한 용도로 사용됩니다. ion-nav가 제대로 동작하려면 루트 페이지가 @component 인, 루트페이지를 초기에 로드하도록 설정해야 합니다. import {StartPage} from 'start' @Component({ template: '' }) class MyApp { // First pag.. ionic 하이브리드 앱 개발 - #4 Component 그리드 뷰의 레이아웃을 정밀하게 제어하기 위해 컴포넌트를 페이지에 배치하거나 정렬하기 위해 ionic에서는 그리드 시스템을 사용합니다. FlexBox기반으로 CSS Flexible Box Layout Module을 사용하여 구현합니다. 장점으로는 열을 고정시키지 않고 행안에 원하는 만큼의 자동으로 너비를 지정해서 만들 수 있습니다. 그리드 시스템은 12 개의 열로 구성되며 각 열은 col- 속성을 설정하여 크기를 조정할 수 있습니다. 소스보기 버튼버튼은 앱과 상호 작용하고 탐색하는 필수적인 방법이며 사용자가 탭을 클릭 한 후에 어떤 작업이 발생하는지 명확하게 알려야합니다. 버튼은 텍스트 및 / 또는 아이콘으로 구성 될 수 있으며 다양한 속성으로 향상 될 수 있습니다. 접근성을 위해 버튼은 표준 요소를 사.. 이전 1 2 3 4 다음