받아온 값이 없을 경우에는 return 0하고 searchEndIndex를 true로 하기 if(res.length==0) return 0 searchEndIndex=true
HostListener Decorator Component 작성
아래와 같이 호스트의 이벤트를 감지한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
import { HostListener, Inject} from "@angular/core"; import { DOCUMENT } from "@angular/common";
export class LayoutNavComponent implements OnInit { constructor(@Inject(DOCUMENT) private document: Document) { } } @HostListener("window:scroll", ['$event.target']) onWindowScroll() { //we'll do some stuff here when the window is scrolled console.log(this.document.body.scrollHeight); console.log("scrollTop:",this.document.documentElement.scrollTop); let scrollHeight=this.document.documentElement.scrollHeight; let readHeight=this.document.documentElement.scrollTop+this.document.documentElement.clientHeight;
하드웨어 가속이란 그래픽 처리 장치를 이용하여 중앙처리 장치의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다. css 작업에 하드웨어 가속을 활성화하면, 작업처리가 빨라져서 웹페이지의 렌더링을 보다 빠르게 할 수 있다.
특정 엘레멘트에 어떤 지시를 내리면 엘리먼트는 자신의 레이어에 분류되고 페이지에 있는 다른 엘리멘트와 독립되어 렌더링 된다. 결론만 말하면 css에 다음과 같은 속성을 붙이면 하드웨어를 가속화 하여 빨리 렌더링이 가능하다.
1
transform: 3dtransforms(0,0,0)
위 명령어는 3d가 아닌 엘레먼트에 가짜로 3d속성을 주므로써 해당 element의 렌더링을 cpu가 아닌 gpu가 담당하게 하여 렌더링 속도를 높이며, will-change 명령어는 엘레먼트에 어떤 변경을 할 것인지 브라우저에게 미리 알려주므로써 최적화 하는 것이다. 페이지는 순식간에 갱신돼 부드러운 화면처리가 가능하게 된다.
export class PagerService { getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) { // calculate total pages let totalPages = Math.ceil(totalItems / pageSize);
let startPage: number, endPage: number; if (totalPages <= 10) { // less than 10 total pages so show all startPage = 1; endPage = totalPages; } else { // more than 10 total pages so calculate start and end pages if (currentPage <= 6) { startPage = 1; endPage = 10; } else if (currentPage + 4 >= totalPages) { startPage = totalPages - 9; endPage = totalPages; } else { startPage = currentPage - 5; endPage = currentPage + 4; } }
// calculate start and end item indexes let startIndex = (currentPage - 1) * pageSize; let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control let pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view return { totalItems: totalItems, currentPage: currentPage, pageSize: pageSize, totalPages: totalPages, startPage: startPage, endPage: endPage, startIndex: startIndex, endIndex: endIndex, pages: pages }; } }
다음을 클릭할때에는 service.ts의 setPage()를 호출하여 pagedItems를 바꾸어 준다. 만약에 데이터를 index를 통해 나누어 받아오고 싶은 경우에는 setPage()의 if 문에서 범위를 넘는 페이지의 요청에 대해 서버에 요청을 날려 다음 데이터들을 받아올 수 있다.
특정 객체를 선언하도록 ts에서 선언한다. export const export const를 통해 상수 객체를 선언하고 가져다 쓸 수 있따.
Property Binding
프로퍼티 바인딩은 컴포넌트의 property를 any Dom element property로 지정할 수 있게 한다. 여기서 컴포넌트의 property가 업데이트 되면 DOM도 자동으로 업데이트 된다. 하지만 DOM에서 업데이트 되었다고 컴포넌트의 property가 업데이트 되지는 않는다.
Class Binding
[class.name]="property"를 통해 property가 참이면 클래스에 name을 추가할 수 있다.
Event Binding
DOM에서 발생하는 다양한 이벤트들을 처리할 수 있다.
(click)=”func()”
클릭이벤가 발생하면 컴포넌트의 func()를 실행시킨다.
Two Way Binding
[(ngModel)}="property"
이를 통해 two way data binding이 가능하다. 이를 쓰기 위해서는 FormModule을 Import해야 한다.
앵귤러는 npm을 사용하여 다음과 같이 설치한다. 이때 반드시 -g 옵션을 사용하여 global하게 설치를 해 주어야 ng 명령어가 등록이 되며, 앵귤러 cli를 설치하기에 앞서서 typescript기반인 angular를 동작시키기 위한 typescript를 설치해 주어야 한다.
module.ts의 entryComponents는 html내에서 확인되는 태그가 아닌 동적으로만 생성되는 태그를 앵귤러가 알 수 있게 해준다. 앵귤러는 이를 통해 태그를 찾고 컴파일을 수행한다. 만약 html 내에서 확인되는 다른 많은 태그들은 단순히 declarations에만 있으면 된다.
Component
컴포넌트 안에 input 주기
example
undefined
[readonly]=”true”
인풋이 입력되지 않도록 읽기전용으로 바꾼다.
Library
Angular bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
Angular material
code flow
1 2 3 4 5 6 7 8 9 10 11
//앵귤러 매터리얼 설치 npm install --save @angular/material @angular/cdk //매터리얼에 필요한 애니메이션 설치 npm install --save @angular/animations import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; imports: [BrowserAnimationsModule], //달력입력박스를 위한 module.ts에서 임포트 import {MdButtonModule, MdCheckboxModule} from '@angular/material';