본문 바로가기

Web/Ionic

 (10)
[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..
[Ionic] sidemenu 앱에서 페이지 추가하기 pages > action-sheet 추가 action-sheet.html Action Sheet Page Hello Ionic! action-sheet.ts import { NavController } from 'ionic-angular'; @Component({ templateUrl: 'action-sheet.html' }) export class ActionSheetPage { constructor(public navCtrl: NavController) { } } app.component.ts import { ActionSheetPage } from '../pages/action-sheet/action-sheet'; constructor(public platform: Platform, public ..
[Ionic] 프로젝트 만들기 $ ionic start --v2 componentsDocApp sidemenu $ cd componentsDocApp $ ionic serve -c -l

티스토리툴바