A demo of the Ionic 2 framework - using TypeScript and Azure App Services.
TypeScript HTML CSS JavaScript
Clone or download
Jordan Matthiesen
Latest commit e0b55b4 Oct 25, 2016


Ionic 2 Conference Application

This is purely a demo of Ionic 2 with TypeScript and Azure App Services. It is still in development and originally forked from https://github.com/driftyco/ionic-conference-app.


There is not an actual Ionic Conference at this time. This project is just to show off Ionic 2 components in a real-world application. Please go through the steps in CONTRIBUTING.md before submitting an issue.

Table of Contents

Visual Studio Support

  • Install Visual Studio 2015 Update 3, this will include Tools for Apache Cordova Update 10
  • Open the file ionic-conference-app.jsproj
  • VS will restore all packages for you
  • Use the task runner explorer to execute gulp tasks

Getting Started

  • Clone this repository.
  • Want to use TypeScript? Both the master branch and the typescript branch now use TypeScript.
  • Run npm install from the project root.
  • Install the ionic CLI (npm install -g ionic@beta)
  • Run ionic serve in a terminal from the project root.
  • Profit

Note: Is your build slow? Update npm to 3.x: npm install -g npm.



Use Cases

App Preview

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

File Structure of App

β”œβ”€β”€ .github/                           * GitHub files
β”‚   β”œβ”€β”€ CONTRIBUTING.md                * Documentation on contributing to this repo
β”‚   └── ISSUE_TEMPLATE.md              * Template used to populate issues in this repo
β”œβ”€β”€ app/                               * Working directory
β”‚   β”œβ”€β”€ 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
β”‚   β”‚   β”‚
β”‚   β”‚   │── 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
β”‚   β”‚   β”œβ”€β”€ app.core.scss              * App Shared Sass Imports
β”‚   β”‚   β”œβ”€β”€ app.ios.scss               * iOS Sass Imports & Variables
β”‚   β”‚   β”œβ”€β”€ app.md.scss                * Material Design Sass Imports & Variables
β”‚   β”‚   β”œβ”€β”€ app.variables.scss         * App Shared Sass Variables
β”‚   β”‚   └── app.wp.scss                * Windows Sass Imports & Variables
β”‚   β”‚
β”‚   β”œβ”€β”€ app.html                       * Application template
β”‚   └── app.ts                         * Main Application configuration
β”œβ”€β”€ node_modules/                      * Node dependencies
β”œβ”€β”€ platforms/                         * Cordova generated native platform code
β”œβ”€β”€ plugins/                           * Cordova native plugins
β”œβ”€β”€ resources/                         * Images for splash screens and icons and screenshots of this app
β”œβ”€β”€ typings/                           * Contains type definitions
β”œβ”€β”€ www/                               * Folder that is copied over to the platform's www directory
β”‚   β”‚   
β”‚   β”œβ”€β”€ build/                         * Contains auto-generated compiled content
β”‚   β”‚     β”œβ”€β”€ css/                     * Compiled CSS
β”‚   β”‚     β”œβ”€β”€ fonts/                   * Copied Fonts
β”‚   β”‚     β”œβ”€β”€ js/                      * ES5 compiled JavaScript
β”‚   β”‚     β”œβ”€β”€ pages/                   * Copied html pages
β”‚   β”‚     └── app.html                 * Copied app entry point
β”‚   β”‚
β”‚   β”œβ”€β”€ data/                          * Contains data used for the app
β”‚   β”‚     └── data.json                * App data
β”‚   β”‚
β”‚   β”œβ”€β”€ img/                           * App images
β”‚   β”‚
β”‚   └── index.html                     * Main entry point
β”œβ”€β”€ .editorconfig                      * Defines coding styles between editors
β”œβ”€β”€ .gitignore                         * Example git ignore file
β”œβ”€β”€ LICENSE                            * Apache License
β”œβ”€β”€ README.md                          * This file
β”œβ”€β”€ config.xml                         * Cordova configuration file
β”œβ”€β”€ gulpfile.js                        * Contains the build tasks for our app
β”œβ”€β”€ 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
└── typings.json                       * Defines the external type definitions