본문 바로가기

전체 글

 (123)
[Ionic] 프로젝트 폴더구조 src 폴더프로그래밍 작업 폴더페이지를 만드는 컴포넌트나 서비스, 파이프 등의 코드 등 app 폴더 - 앱을 어떻게 시작하고 초기화면을 어떻게 표시하는지 그리고 앱의 전반적인 정보를 보관assets 폴더 - 앱에서 사용되는 이미지나 폰트와 같은 정보를 담는 폴더pages 폴더 - 앱에서 표시하는 페이지들을 저장하는 곳. 일반적으로 pages 내에서 많은 소스 코드를 작성하게 된다theme 폴더 - scss 소스 코딩을 하는 곳. scss파일을 꼭 theme폴더에 넣을 필요는 없음. pages폴더의 각 페이지 폴더 아래에 임의로 scss 파일을 만들어 넣으면 자동으로 사용된다index.html - 웹 브라우저에서 처음으로 보여질 웹 페이지 www 폴더ionic serve와 같이 앱을 실행하면 src 폴더의..
[Ionic] 디자인 컴포넌트와 변수의 연결 – ngModel, ngIf action-sheet.html Action Sheet Page Hello, {{name}} Welcome Show Action Sheet action-sheet.ts import { Component } from '@angular/core'; import { ActionSheetController } from 'ionic-angular'; @Component({ templateUrl: 'action-sheet.html' }) export class ActionSheetPage { name: string = ""; constructor(public actionSheetCtrl: ActionSheetController) { } presentActionSheet() { let actionSheet = thi..
[Ionic] Components Cards app.component.ts this.pages = [ { title: 'Action Sheet', component: ActionSheetPage }, { title: 'Alerts', component: AlertsPage }, { title: 'Buttons', component: ButtonsPage }, { title: 'Cards', component: CardsPage} ]; app.module.ts import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.compo..
[Ionic] Components Buttons buttons.html Buttons Like Comment Inner Button Outline Left Icon Button Left Icon buttons.ts import { Component } from '@angular/core'; @Component({ templateUrl: 'buttons.html' }) export class ButtonsPage { constructor() { } }
[Ionic] Components Alerts alerts.html Alerts Show Basic Alert Show Prompt Alert Show Radio Alert alerts.ts import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ templateUrl: 'alerts.html' }) export class AlertsPage { constructor(public alertCtrl: AlertController) { } showBasicAlert() { let alert = this.alertCtrl.create({ title: 'Basic Alert!', subTitle: 'This is an ui co..
[Ionic] Components Action Sheets action-sheet.html Action Sheet Page Show Action Sheet action-sheet.ts import { Component } from '@angular/core'; import { ActionSheetController } from 'ionic-angular'; @Component({ templateUrl: 'action-sheet.html' }) export class ActionSheetPage { constructor(public actionSheetCtrl: ActionSheetController) { } presentActionSheet() { let actionSheet = this.actionSheetCtrl.create({ title: 'action s..
Object.assign() Object를 할당하면 프로퍼티가 연동 됨 한 쪽의 프로퍼티 값을 바꾸면 다른 곳도 바뀜 연동되지 않게 하려면 별도 처리 필요 Object.assign()으로 복사, 연동 방지 Object.assign(target, ...sources) 객체 복제하기 var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 } 객체 병합하기 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1,..
티스토리 Highlight.js 적용하기 1. Highlight.js 설치 https://highlightjs.org/ 2. HTML/CSS 편집 3. Highlight.js 사용법 편집기 HTML 모드 사용 ...

티스토리툴바