Note: Just starting on this example

What is this?

I'm trying to build a template Ionic app that has the following:

1. Tabs
2. Sidemenu
3. Version number at the bottom of the sidemenu
4. Basic About page
5. Support page
6. Virtual Scroll

Most code is copied from https://github.com/jarodms/ionic3-sidemenu-tabs

...and the Ionic Conference App seemed like a good place to start. I'm starting with the Conference app and stripping a lot of it away, plus adding a few things.

Get Moving with this Example:

1. npm i
2. npm run ionic:serve

Latest

• 07/09/2018: Remove requirement for Firebase since this is an example of using Virtual Scroll (100 records)

• 06/25/2018: Configuring project for testing with Karma and Jasmine following the tutorial at https://leifwells.github.io/2017/08/27/testing-in-ionic-configure-existing-projects-for-testing/

• 06/04/2018: using specific versions of npm packages Firebase and AngularFirebase2 to pull from a list. Read more on how to setup your Firebase Project: https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1#93a4

• 03/14/18: during postinstall (npm i), version number is pulled from package.json and placed into assets\version.ts; Thanks to https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d

Ionic Conference Application

This is the official Ionic demo app, showcasing a variety of Ionic Framework components and native features.

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
• Contributing
• Use Cases
• App Preview
• File Structure of App

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

Try it live

All app preview screenshots were taken by running ionic serve --lab on a retina display.

• Schedule Page

  

• About Page

  

• 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 the www 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
• 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