| # Your init script | |
| # | |
| # Atom will evaluate this file each time a new window is opened. It is run | |
| # after packages are loaded/activated and after the previous editor state | |
| # has been restored. | |
| # | |
| # An example hack to log to the console when each text editor is saved. | |
| # | |
| # atom.workspace.observeTextEditors (editor) -> | |
| # editor.onDidSave -> |
삽질을 거듭하다가 결국 부족함을 채워야 함을 깨닫고 augular 프로젝트에 투입되었을 때 알아야할 것들에 대해서 빠르게 그리고 요점만 정리한다.
뷰(html)와 모델을 연결, 모델을 변경하면 자동으로 뷰(html)이 바뀌거나 뷰를 바꾸어도 자동으로 모델이 변경되는 편리한 프레임워크.
모델을 정의하는 scope가 있고 뷰와 연결시켜주는 데이터 바인딩이 있고 변경을 감지하는 방법이 주요 배울 사항이다.
컨트롤러나 디렉티브의 유효범위 내에서 저장공간이라고 이해하면 쉽다 뷰는 scope 를 통해서 컨트롤러 내부에 정의된 모델(데이터)이나 핸들러 함수에 접근할 수 있다.($ctrl처럼 뷰 자체에도 만들 수가 있는데 차이점은??)
| <div style="padding: 10mm; background-color: rgb(245, 245, 245); width: calc(170mm); height: calc(110mm);"> | |
| <div data-page-number="1" style="padding: 20mm 10mm; margin: 0px 0px 10mm; width: 150mm; height: 70mm; background-color: rgb(255, 255, 255);"> | |
| <div class="page-body" contenteditable="true" style="outline: 0px; height: 100%; border: 1px dashed black;"> | |
| <p><br/></p> | |
| </div> | |
| </div> | |
| </div> |
| /** | |
| * Find a first exceed paragraph | |
| * @param {HTMLElement} pageBodyElement - page body element | |
| * @param {number} pageBodyBottom - page bottom | |
| * @returns {HtmlElement} a first exceed paragraph | |
| */ | |
| _findExceedParagraph(pageBodyElement, pageBodyBottom) { | |
| const paragraphs = pageBodyElement.querySelectorAll('p'); | |
| const {length} = paragraphs; | |
| for (let i = 0; i < length; i += 1) { |
| /** | |
| * Get all exceed paragraphs | |
| * @param {HTMLElement} pageBodyElement - page body element | |
| * @param {number} pageBodyBottom - page bottom | |
| * @returns {Array.<HTMLElement>} all exceed paragraph array | |
| */ | |
| _getExceedAllParagraphs(pageBodyElement, pageBodyBottom) { | |
| const paragraphs = pageBodyElement.querySelectorAll('p'); | |
| const {length} = paragraphs; | |
| const exceedParagraphs = []; |
| // Remain a bigger paragraph than page height. | |
| if (paragraphs.length === exceedParagraphs.length) { | |
| exceedParagraphs.shift(); | |
| } |
| /** | |
| * Insert paragraphs to body at first | |
| * @param {HTMLElement} pageBodyElement - page body element | |
| * @param {Array.<HTMLElement>} paragraphs - paragraph array | |
| */ | |
| _insertParagraphsToBodyAtFirst(pageBodyElement, paragraphs) { | |
| if (pageBodyElement.firstChild) { | |
| // merge split paragraphs before. | |
| paragraphs.slice().reverse().forEach(paragraph => { | |
| const splitParagraphId = paragraph.getAttribute(SPLIT_PARAGRAPH_ID); |
| /** | |
| * Layout pages | |
| */ | |
| async _layout() { | |
| let pageNumber = 1; | |
| while (pageNumber <= this.pageBodyElements.length) { | |
| pageNumber = await this._layoutPage(pageNumber); | |
| } | |
| } |
| /** | |
| * Layout a page and return next page number | |
| * @param {number} pageNumber - page number | |
| * @returns {Promise} promise | |
| */ | |
| _layoutPage(pageNumber = 1) { | |
| const promise = new Promise((resolve, reject) => { | |
| const pageIndex = pageNumber - 1; | |
| const totalPageCount = this.pageBodyElements.length; | |
| if (pageNumber > totalPageCount || pageNumber > 100) { |
| /** | |
| * Layout a page and return next page number | |
| * @param {number} pageNumber - page number | |
| * @returns {Promise} promise | |
| */ | |
| _layoutPage(pageNumber = 1) { | |
| .... | |
| let allExceedParagraphs, nextPageBodyElement; | |
| if (exceedParagraph) { | |
| this._splitParagraph(exceedParagraph, pageBodyBottom); |