Ionic Conference Application
This is purely a demo of Ionic with TypeScript. It is still in development.
Important!
There is not an actual Ionic Conference at this time. This project is just to show off Ionic components in a real-world application. Please go through the steps in CONTRIBUTING.md before submitting an issue.
Table of Contents
Getting Started
- Download the installer for Node.js 6 or greater.
- Install the ionic CLI globally:
npm install -g ionic
- Clone this repository:
git clone https://github.com/ionic-team/ionic-conference-app.git
. - Run
npm install
from the project root. - Run
ionic serve
in a terminal from the project root. - Profit. π
Note: You may need to add βsudoβ in front of any global commands to install the utilities.
Contributing
See CONTRIBUTING.md ππ
Use Cases
- Action Sheet - [ template | code ]
- Alert - [ code ]
- Cards - [ template ]
- Datetime - [ template ]
- Grid - [ template ]
- Inputs - [ template ]
- Items (Sliding) - [ template | code ]
- Menu - [ template | code ]
- Modal - [ template | code ]
- Searchbar - [ template | code ]
- Segment - [ template | code ]
- Slides - [ template |
- Sticky headers - [ template ]
- Tabs - [ template | code ]
- Toggle - [ template ] code ]
- Using Angular HTTP for JSON - [ code | usage ]
App Preview
All app preview screenshots were taken by running ionic serve --lab
on a retina display.
-
To see more images of the app, check out the screenshots directory!
Deploying
- PWA - Un-comment this, run
npm run ionic:build --prod
and then push thewww
folder to your favorite hosting service - Android - Run
ionic cordova run android --prod
- If you are deploying to Android 4.4 or below we recommend adding crosswalk:
cordova plugin add cordova-plugin-crosswalk-webview
- If you are deploying to Android 4.4 or below we recommend adding crosswalk:
- iOS - Run
ionic cordova run ios --prod
File Structure of App
ionic-conference-app/
β-- .github/ * GitHub files
β βββ CONTRIBUTING.md * Documentation on contributing to this repo
β βββ ISSUE_TEMPLATE.md * Template used to populate issues in this repo
|
|-- resources/
|
|-- src/
| |-- app/
| | βββ app.component.ts
| | βββ app.module.ts
| | βββ app.template.html
| | βββ main.ts
| |
| |-- assets/
| | βββ data/
| | | βββ data.json
| | |
| | βββ fonts/
| | | βββ ionicons.eot
| | | βββ ionicons.svg
| | | βββ ionicons.ttf
| | | βββ ionicons.woff
| | | βββ ionicons.woff2
| | |
| | βββ img/
| |
| |-- pages/ * Contains all of our pages
β β βββ about/ * About tab page
β β β βββ about.html * AboutPage template
β β β βββ about.ts * AboutPage code
β β β βββ about.scss * AboutPage stylesheet
β β β
β β βββ account/ * Account page
β β β βββ account.html * AccountPage template
β β β βββ account.ts * AccountPage code
β β β βββ account.scss * AccountPage stylesheet
β β β
β β βββ login/ * Login page
β β β βββ login.html * LoginPage template
β β β βββ login.ts * LoginPage code
β β β βββ login.scss * LoginPage stylesheet
β β β
β β βββ map/ * Map tab page
β β β βββ map.html * MapPage template
β β β βββ map.ts * MapPage code
β β β βββ map.scss * MapPage stylesheet
β β β
β β βββ schedule/ * Schedule tab page
β β β βββ schedule.html * SchedulePage template
β β β βββ schedule.ts * SchedulePage code
β β β βββ schedule.scss * SchedulePage stylesheet
β β β
β β βββ schedule-filter/ * Schedule Filter page
β β β βββ schedule-filter.html * ScheduleFilterPage template
β β β βββ schedule-filter.ts * ScheduleFilterPage code
β β β βββ schedule-filter.scss * ScheduleFilterPage stylesheet
β β β
β β βββ session-detail/ * Session Detail page
β β β βββ session-detail.html * SessionDetailPage template
β β β βββ session-detail.ts * SessionDetailPage code
β β β
β β βββ signup/ * Signup page
β β β βββ signup.html * SignupPage template
β β β βββ signup.ts * SignupPage code
β β β
β β βββ speaker-detail/ * Speaker Detail page
β β β βββ speaker-detail.html * SpeakerDetailPage template
β β β βββ speaker-detail.ts * SpeakerDetailPage code
β β β βββ speaker-detail.scss * SpeakerDetailPage stylesheet
β β β
β β βββ speaker-list/ * Speakers tab page
β β β βββ speaker-list.html * SpeakerListPage template
β β β βββ speaker-list.ts * SpeakerListPage code
β β β βββ speaker-list.scss * SpeakerListPage stylesheet
| | |
β β βββ support/ * Support page
β β β βββ support.html * SupportPage template
β β β βββ support.ts * SupportPage code
β β β βββ support.scss * SupportPage stylesheet
β β β
β β βββ tabs/ * Tabs page
β β β βββ tabs.html * TabsPage template
β β β βββ tabs.ts * TabsPage code
β β β
β β βββ tutorial/ * Tutorial Intro page
β β βββ tutorial.html * TutorialPage template
β β βββ tutorial.ts * TutorialPage code
β β βββ tutorial.scss * TutorialPage stylesheet
| |
β βββ providers/ * Contains all Injectables
β β βββ conference-data.ts * ConferenceData code
β β βββ user-data.ts * UserData code
β βββ theme/ * App theme files
| | βββ variables.scss * App Shared Sass Variables
| |
| |-- index.html
|
|-- www/
| βββ assets/
| | βββ data/
| | | βββ data.json
| | |
| | βββ fonts/
| | | βββ ionicons.eot
| | | βββ ionicons.svg
| | | βββ ionicons.ttf
| | | βββ ionicons.woff
| | | βββ ionicons.woff2
| | |
| | βββ img/
| |
| βββ build/
| βββ index.html
|
βββ .editorconfig * Defines coding styles between editors
βββ .gitignore * Example git ignore file
βββ LICENSE * Apache License
βββ README.md * This file
βββ config.xml * Cordova configuration file
βββ ionic.config.json * Ionic configuration file
βββ package.json * Defines our JavaScript dependencies
βββ tsconfig.json * Defines the root files and the compiler options
βββ tslint.json * Defines the rules for the TypeScript linter