All Projects → kristofferandreasen → Simple Ionic 3 App

kristofferandreasen / Simple Ionic 3 App

A simple Ionic 3 app with get requests to a local JSON file. It showcases how to set up a simple service and provides some nice components for your own application.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Simple Ionic 3 App

Ionic Img Viewer
Ionic 2+ component providing a Twitter inspired experience to visualize pictures.
Stars: ✭ 291 (+393.22%)
Mutual labels:  cordova, ionic-framework, ionic2
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (-1.69%)
Mutual labels:  cordova, ionic-framework, ionic2
ionic-hockeyapp
Need HockeyApp in your Ionic application, add this package!
Stars: ✭ 19 (-67.8%)
Mutual labels:  cordova, ionic-framework, ionic2
todo-list
TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.
Stars: ✭ 18 (-69.49%)
Mutual labels:  cordova, ionic-framework, ionic2
Wooionic3
An eCommerce App for WooCommerce stores using Ionic 3.
Stars: ✭ 208 (+252.54%)
Mutual labels:  cordova, ionic-framework, ionic2
Awesome Ionic2 Components
Should help you to get awesome components and plugins for Ionic2
Stars: ✭ 209 (+254.24%)
Mutual labels:  cordova, ionic-framework, ionic2
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+1254.24%)
Mutual labels:  cordova, ionic-framework, ionic2
ionic-workflow-guide
Create a full and powerful worflow with Ionic (Unit Testing, Environment variables, Automatic documentation, Production App Server, Automatic deployment)
Stars: ✭ 46 (-22.03%)
Mutual labels:  ionic-framework, ionic2
ionic-uber-clone
Ionic 4 Taxi Booking script
Stars: ✭ 34 (-42.37%)
Mutual labels:  ionic-framework, ionic2
keyonic-v2
A Keycloak Mobile Implementation using Angular v4 and Ionic v3
Stars: ✭ 23 (-61.02%)
Mutual labels:  cordova, ionic-framework
cordova-plugin-today-widget
Add a today widget app extension target to your cordova project.
Stars: ✭ 51 (-13.56%)
Mutual labels:  cordova, ionic2
ionic2-geofence
Ionic2 Geofencing Sample Project
Stars: ✭ 96 (+62.71%)
Mutual labels:  ionic-framework, ionic2
Ioniclub
❤️ Ioniclub is hybird mobile app of https://cnodejs.org
Stars: ✭ 35 (-40.68%)
Mutual labels:  cordova, ionic2
fireblogger
Ionic 2 social media microblogging platform built with firebase 3 as backend
Stars: ✭ 54 (-8.47%)
Mutual labels:  ionic-framework, ionic2
ionic-native-sms-retriever-plugin-master
Cross-platform plugin for Cordova / PhoneGap to Retrieve SMS. Available for Android.
Stars: ✭ 16 (-72.88%)
Mutual labels:  cordova, ionic-framework
Ionic-ElastiChat-with-Images
Ionic Magic Chat with Angular Elastic, Autolinker.js and more!
Stars: ✭ 66 (+11.86%)
Mutual labels:  cordova, ionic-framework
ionicfirebaseauth
Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase
Stars: ✭ 18 (-69.49%)
Mutual labels:  ionic-framework, ionic2
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-62.71%)
Mutual labels:  ionic-framework, ionic2
Ionic Audio
An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
Stars: ✭ 332 (+462.71%)
Mutual labels:  ionic-framework, ionic2
ionic-video-chat-support
Ionic 3 Video and Group Text Chat
Stars: ✭ 19 (-67.8%)
Mutual labels:  ionic-framework, ionic2

Ionic 3 Starter Template

This template is the tabs-starter with some additional work. It contains a set of different custom components and a simple http call to a JSON file. Furthermore, it has search implemented with a loader that shows up before the data has been rendered. There is no platform specific styling on any component other than the basic differences implemented in Ionic 3.

Imgur

Getting Started

To begin using this template, choose one of the following options to get started:

Project Structure

.
 ├── resources                    # Build files on the specific platforms (iOS, Android) and app icon + splash
 ├── src                          # This is where the app lives - *the main folder*
 ├── .editorconfig                # A helper file to define and maintain coding styles across environments
 ├── .gitignore                   # Specifies intentionally untracked files to ignore when using Git
 ├── .io-config.json              # Ionic ID
 ├── config.xml                   # Ionic config file
 ├── .ionic.config.json           # Global configuration for your Ionic app
 ├── package.json                 # Dependencies and build scripts
 ├── readme.md                    # Project description
 ├── tsconfig.json                # TypeScript configurations
 └── tslint.json                  # TypeScript linting options

src directory

.
   ├── ...
   ├── src                       
   │   ├── app                    # This folder contains global modules and styling
   │   ├── assets                 # This folder contains images and the *data.json*
   |   ├── pages                  # Contains all the individual pages (home, tabs, category, list, single-item)
   |   ├── services               # Contains the item-api service that retrieves data from the JSON file
   |   ├── theme                  # The global SCSS variables to use throughout the app
   |   ├── declarations.d.ts      # A config file to make TypeScript objects available in intellisense
   |   ├── index.html             # The root index app file - This launches the app
   |   ├── manifest.json          # Metadata for the app
   │   └── service-worker.js      # Cache configurations
   └── ...

Start the project

The project is started with the regular ionic commands.

  1. Run npm install to install all dependencies.
  2. Run ionic serve to start the development environment.
  3. To build the project run ionic build android or ionic build ios. In order for you to build an iOS app, you need to run on MacOS.

An alternative is to emulate the app on a device or upload it to the ionic cloud. From here you can download the ionic view app and use the app on all devices.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on Github.

Creator

The template was created by and is maintained by Kristoffer Andreasen

Copyright and License

Copyright 2017 Kristoffer Andreasen. Code released under the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].