CodePoetPro / ionic-conference-app

A conference app built with Ionic 2 to demonstrate Ionic 2

Ionic 2 Conference Application

This is purely a demo of Ionic v2.0 alpha and is still in development. There is not an actual Ionic Conference at this time.

Table of Contents

• Getting Started
• App Preview
• iPhone 6
• Nexus 5
• Use Cases
• File Structure of App
• Coming Soon

Getting Started

• Clone this repository.
• Run npm install --production on project root.
• Install the ionic-cli if not already (npm install -g ionic@alpha)
• Run ionic serve in project root.
• Profit

App Preview

iPhone 6

Nexus 5

Use Cases

• Menu - [ template | code ]
• Tabs - [ template | code ]
• Segments - [ template | code ]
• Search bar - [ template | code ]
• Sliding items with buttons - [ template | code ]
• Modals - [ template | code ]
• Action Sheet - [ template | code ]
• Toggle / switches - [ template ]
• Cards - [ template ]
• Sticky headers - [ template ]
• Grid - [ template ]
• Using Angular HTTP for JSON - [ code | usage ]
• Adding an attribute (no-lines) dynamically - [ template | code ]
• Using Config - [ code ]

File Structure of App

ionic-conference-app/
├── node_modules/                      * Node dependencies
|
├── platforms/                         * Cordova generated native platform code
|
├── plugins/                           * Cordova native plugins go
|
├── resources/                         * Images for splash screens and icons
|
├── www/                               * Folder that is copied over to platforms www directory
│   ├── app/                           * Contains our application code
│   │   ├── about/                     * About tab page
│   │   │    ├── about.html            * AboutPage template
│   │   │    └── about.js              * AboutPage code
│   │   │    └── about.scss            * AboutPage stylesheet
│   │   │
│   │   │── data/                      * Contains all app data
│   │   │    ├── categories.json       * Category data
│   │   │    └── info.json             * Conference data
│   │   │    └── schedule.json         * Schedule data
│   │   │    └── speakers.json         * Speakers data
│   │   │
│   │   │── date-format/               * DateFormat component
│   │   │    └── date-format.js        * DateFormat component
│   │   │
│   │   │── login/                     * Login page
│   │   │    ├── login.html            * LoginPage template
│   │   │    └── login.js              * LoginPage code
│   │   │    └── login.scss            * LoginPage stylesheet
│   │   │
│   │   │── map/                       * Map tab page
│   │   │    ├── map.html              * MapPage template
│   │   │    └── map.js                * MapPage code
│   │   │    └── map.scss              * MapPage stylesheet
│   │   │
│   │   │── pipes/                     * Contains all pipes
│   │   │    ├── convert-date.js       * ConvertDate pipe
│   │   │
│   │   │── schedule/                  * Schedule tab page
│   │   │    ├── schedule.html         * SchedulePage template
│   │   │    └── schedule.js           * SchedulePage code
│   │   │    └── schedule.scss         * SchedulePage stylesheet
│   │   │
│   │   │── service/                   * Contains all services
│   │   │    ├── data.js               * DataService code
│   │   │
│   │   │── session-detail/            * Session Detail page
│   │   │    ├── session-detail.html   * SessionDetailPage template
│   │   │    └── session-detail.js     * SessionDetailPage code
│   │   │    └── session-detail.scss   * SessionDetailPage stylesheet
│   │   │
│   │   │── session-filter/            * Session Filter page
│   │   │    ├── session-filter.html   * SessionFilterPage template
│   │   │    └── session-filter.js     * SessionFilterPage code
│   │   │    └── session-filter.scss   * SessionFilterPage stylesheet
│   │   │
│   │   │── session-list/              * Session List page
│   │   │    ├── session-list.html     * SessionListPage template
│   │   │    └── session-list.js       * SessionListPage code
│   │   │    └── session-list.scss     * SessionListPage stylesheet
│   │   │
│   │   │── signup/                    * Signup page
│   │   │    ├── signup.html           * SignupPage template
│   │   │    └── signup.js             * SignupPage code
│   │   │
│   │   │── speaker-detail/            * Speaker Detail page
│   │   │    ├── speaker-detail.html   * SpeakerDetailPage template
│   │   │    └── speaker-detail.js     * SpeakerDetailPage code
│   │   │    └── speaker-detail.scss   * SpeakerDetailPage stylesheet
│   │   │
│   │   │── speaker-list/              * Speakers tab page
│   │   │    ├── speaker-list.html     * SpeakerListPage template
│   │   │    └── speaker-list.js       * SpeakerListPage code
│   │   │    └── speaker-list.scss     * SpeakerListPage stylesheet
│   │   │
│   │   │── tabs/              * Tabs page
│   │   │    ├── tabs.html     * TabsPage template
│   │   │    └── tabs.js       * TabsPage code
│   │   │
│   │   ├── app.html                   * Application template
│   │   ├── app.js                     * Main Application configuration
│   │   └── app.scss                   * Sass imports
│   │   
│   ├── build/                         * Contains compiled content
│   │     ├── css                      * Compiled CSS
│   │     ├── fonts                    * Copied Fonts
│   │     └── js                       * ES5 compiled JavaScript
│   │
│   ├── img/                           * App images
│   │
│   └── index.html                     * Main entry point
|
├── .gitignore                         * Example git ignore file
├── package.json                       * Our javascript dependencies
├── README.md                          * This file
├── tsconfig.json                      * Configures the TypeScript compiler
├── config.xml                         * Cordova configuration file
├── ionic.config.js                    * Ionic configuration file
└── webpack.config.js                  * Webpack configuration file

Coming Soon

We'll also be showing how to use native plugins:

• Camera access
• Geolocation