Commit b71ef761 authored by Cédric Moreau's avatar Cédric Moreau


# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
root = true
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
trim_trailing_whitespace = false
\ No newline at end of file
# Specifies intentionally untracked files to ignore when using Git
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.gchangeui725107" version="0.0.1" xmlns="" xmlns:cdv="">
<description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework" href="">Ionic Framework Team</author>
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://ionic.local/*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
<plugin name="cordova-plugin-console" spec="1.0.5"/>
<plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
<plugin name="cordova-plugin-device" spec="1.1.4"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
\ No newline at end of file
"name": "gchange-ui",
"app_id": "",
"v2": true,
"typescript": true
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "^4.0.2",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"co": "^4.6.0",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
"cordovaPlugins": [
"cordovaPlatforms": [],
"description": "gchange-ui: An Ionic project"
import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
templateUrl: 'app.html'
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage = HelloIonicPage;
pages: Array<{title: string, url: string, component: any}>;
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
public router: Router
) {
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', url: '/', component: HelloIonicPage },
{ title: 'My First List', url: '/theList', component: ListPage }
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
openPage(page) {
// close the menu when clicking a link from the menu;
// navigate to the new page if it is not the current page
// this.nav.setRoot(page.component);
// this.router
<ion-menu [content]="content">
<button ion-item *ngFor="let p of pages" routerLink="{{ p.url }}" (click)="menu.close()">
<!--<ion-nav [root]="rootPage" #content swipeBackEnabled="false">-->
<router-outlet #content swipeBackEnabled="false"></router-outlet>
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { ItemsResolver } from '../pages/list/list-resolver.service';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
const appRoutes: Routes = [
path: '',
component: HelloIonicPage,
data: { title: 'Heroes List' }
path: 'theList',
component: ListPage,
data: { title: 'Heroes List' }
declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
{provide: APP_BASE_HREF, useValue: '/#/'},
{provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
They're what make intellisense work and make Typescript know all about your code.
A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
provide their own type declarations.
To learn more about using third party libraries in an Ionic app, check out the docs here:
For more info on type definition files, check out the Typescript docs here:
declare module '*';
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
if ('serviceWorker' in navigator) {
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
<link href="build/main.css" rel="stylesheet">
<!-- Ionic's root component and where the app will load -->
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
\ No newline at end of file
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-title>Hello Ionic</ion-title>
<ion-content padding>
<h3>Welcome to your first Ionic app!</h3>
This starter project is our way of helping you get a functional app running in record time.
Follow along on the tutorial section of the Ionic docs!
<button ion-button color="primary" menuToggle>Toggle Menu</button>
import { Component } from '@angular/core';
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
export class HelloIonicPage {
constructor() {
<button menuToggle *ngIf="!selectedItem">
<ion-icon name="menu"></ion-icon>
<ion-title>Item Details</ion-title>
<h3 text-center *ngIf="selectedItem">
<ion-icon [name]="selectedItem.icon"></ion-icon>
<h4 text-center *ngIf="selectedItem">
You navigated here from <b>{{selectedItem.title}}</b>
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
selector: 'page-item-details',
templateUrl: 'item-details.html'
export class ItemDetailsPage {
selectedItem: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item');
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { co } from 'co';
export class ItemsResolver implements Resolve<any> {
resolve(): Promise<any> {
let icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
'american-football', 'boat', 'bluetooth', 'build'];
let items = [];
for(let i = 1; i < 11; i++) {
title: 'Item ' + i,
note: 'This is item #' + i,
icon: icons[Math.floor(Math.random() * icons.length)]
return co(function*() {
return yield new Promise((res) => setTimeout(() => {
}, 1000))
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-title>My First List</ion-title>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
<div class="item-note" item-right>
import { Component } from '@angular/core';
import { ItemsResolver } from './list-resolver.service';
// import { ItemDetailsPage } from '../item-details/item-details';
selector: 'page-list',
templateUrl: 'list.html',
providers: [ItemsResolver]
export class ListPage {
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(private itemsResolver:ItemsResolver/*public navCtrl: NavController, public navParams: NavParams*/) {
this.items = [];
itemsResolver.resolve().then((items) => {
this.items = items;
itemTapped(event, item) {
// this.navCtrl.push(ItemDetailsPage, {
// item: item
// });
* Check out for
* more info on how to use sw-toolbox to custom configure your service worker.
'use strict';
self.toolbox.options.cache = {
name: 'ionic-cache'
// pre-cache our key assets
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;
\ No newline at end of file
// Ionic Variables and Theming. For more info, please see:
$font-path: "../assets/fonts";
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see: