Julien Noyer DWS-paris

🎯

Focusing on educational engineering

Le progrès ne vaut que s'il est partagé par tous, Aristote aurait adoré le World Wide Web

DWS-paris / app.component.ts

Created December 6, 2016 14:45

Configuration générale du composant principal #ionic2

	import { Component, ViewChild } from '@angular/core';
	import { Platform, MenuController, Nav } from 'ionic-angular';
	import { StatusBar, Splashscreen } from 'ionic-native';


	// Décorateur du composant principal de l'application
	@Component({
	templateUrl: 'app.html'
	})

DWS-paris / app.html

Created December 6, 2016 14:47

Vue du composant principal #ionic2

	<!-- Utilisation de la directive pour créer un burger menu / https://goo.gl/YnrqgP -->
	<ion-menu [content]="content">
	...
	</ion-menu>

	<!-- Utilisation de la directive pour afficher les vues de différentes routes / https://goo.gl/PAHKZR -->
	<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

DWS-paris / app.component.ts

Created December 6, 2016 14:52

Configuration de la navigationet du burger menu #ionic2

	import { Component, ViewChild } from '@angular/core';
	import { Platform, MenuController, Nav } from 'ionic-angular';
	import { StatusBar, Splashscreen } from 'ionic-native';

	// Import des RXJS pour gérer les promesses
	import './rxjs-operators';

	// Import des composants à utiliser dans le burger menu
	import { AppHomepage } from '../pages/app-homepage/app.homepage';
	import { AppDashboard } from '../pages/dashboard/dashboard';

DWS-paris / app.html

Created December 6, 2016 14:53

Affichage des routes dans la vue du composant principal #ionic2

	<!-- Utilisation de la directive pour créer un burger menu / https://goo.gl/YnrqgP -->
	<ion-menu [content]="content">

	<!-- Utilisation de la directive pour créer le header du burger menu -->
	<ion-header>
	<ion-toolbar>
	<ion-title>Menu</ion-title>
	</ion-toolbar>
	</ion-header>

DWS-paris / app.module.ts

Created December 6, 2016 15:08

Configuration du module de l'application #ionic2

	// Class principales du module
	import { NgModule, ErrorHandler } from '@angular/core';
	import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

	// Import des composants de l'application
	import { MyApp } from './app.component';
	import { AppHomepage } from '../pages/app-homepage/app.homepage';
	import { AppDashboard } from '../pages/dashboard/dashboard';

DWS-paris / app.homepage.ts

Created December 6, 2016 15:34

Contrôleur d'une page type #ionic2

	// Import de la class permettant de créer un composant
	import { Component } from '@angular/core';

	// Décorateur du composant
	@Component({
	selector: 'home-page',
	templateUrl: 'app.homepage.html'
	})

	// Export de la class du composant

DWS-paris / app.homepage.html

Created December 6, 2016 15:35

Vue d'une page type #ionic2

	<!-- Utilisation de la directive pour créer le header de la page -->
	<ion-header>

	<!-- Utilisation de la directive pour créer la barre de navigation de la page -->
	<ion-navbar>

	<!-- Utilisation de la directive pour créer bouton burger menu -->
	<button ion-button menuToggle>
	<ion-icon name="menu"></ion-icon>
	</button>

DWS-paris / dashboard.ts

Last active December 6, 2016 16:07

Controleur utilisant des routes dynamiques #ionic2

	import { Component, OnInit } from '@angular/core';

	// Import du composant à utiliser dans la route dynamique
	import { MemoList } from '../memo-list/memo.list';


	// Décorateur du composant AppDashboard
	@Component({
	selector: 'dashboard-page',
	templateUrl: 'dashboard.html',

DWS-paris / dashboard.html

Created December 6, 2016 16:09

Vue appelant des routes dynamiques #ionic2

	<!-- Utilisation de la directive pour créer le header de la page -->
	<ion-header>

	</ion-header>

	<!-- Utilisation de la directive pour afficher le contenu de la page -->
	<ion-content>

	<!-- Utilisation de la directive permettant de générer des listes / https://goo.gl/knE6Rx -->
	<ion-list>

DWS-paris / multiStepForm.html

Created September 20, 2017 08:53

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Multistep Form</title>
	</head>
	<body>
	<!-- multistep form -->