marcelopspereira / angular2-ionic-custom-real-estate-listings-app

ionic2 framework with angular2 and typescript

Ionic 2 Modified Conference Application

Experiments in preparation of a client app using the great ionic2 framework complete with angular2 internals, no jquery.

thank you.

current work is focused around learning and demonstrating best practices for routing and ion-slider approaches in ionic2

new typescript branch beinbg updated and added, which has proper data services for the maps and listings, working on how to handle route or object queries via typescript.

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