ionic-framework
Test de l'application ionique dans un navigateur

Remarques

cd src
mkdir mocks 
cd mocks 
touch camera-mock.ts 

export class CameraMock {
    getPicture(params) {
        return new Promise((resolve, reject) => {
            resolve("BASE_64_IMAGE_DATA");
        });
    }
}

import { CameraMock } from "../mocks/camera-mock";

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    CameraMock,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Test dans un navigateur

Utilisez ionic serve à démarrer un serveur de développement local pour le développement et le test des applications. Ceci est utile à la fois pour tester le navigateur de bureau et pour tester dans un navigateur de périphérique connecté au même réseau. En outre, cette commande démarre LiveReload, qui permet de surveiller les modifications du système de fichiers. Dès que vous enregistrez un fichier, le navigateur est automatiquement actualisé. Jetez un coup d’œil aux documents Sass si vous souhaitez également voir les fichiers Sass du projet ionic serve .

$ ionic serve [options]

Pour le navigateur Chrome, vous pouvez inspecter les périphériques (AVD ou Mobiles), tapez la commande suivante dans la barre d'adresse du navigateur Chrome.

chrome://inspect/#devices  

LiveReload

Par défaut, LiveReload surveille les modifications dans votre répertoire www/ , à l’exclusion de www/lib/ . Pour changer cela, vous pouvez spécifier une propriété watchPatterns dans le fichier ionic.project situé dans la racine de votre projet pour regarder (ou ne pas regarder) les modifications spécifiques.

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}

Pour obtenir une référence sur la syntaxe du modèle glob, consultez les modèles de globalisation sur le site Web Grunt.

Remarque:

$ ionic setup sass

ajoutera une watchPatterns watchPatterns avec les valeurs par défaut de votre fichier ionic.project , que vous pourrez ensuite modifier, en plus de la propriété gulpStartupTasks , comme décrit dans la documentation de Sass .

Laboratoire ionique

Laboratoire ionique http://ionicframework.com/img/blog/lab.png

Ionic Lab est une fonctionnalité de ionic serve qui permet de tester facilement votre application dans un cadre téléphonique et avec les plates-formes iOS et Android côte à côte. Pour l'utiliser, lancez simplement

$ ionic serve --lab

Lisez l' annonce de la version complète pour tous les détails!

Spécifier une adresse IP à utiliser

Supposons que vous souhaitiez spécifier l’adresse à laquelle votre navigateur se connectera, par exemple pour les tests ou les utilisateurs externes. Spécifiez l'adresse avec l'argument --address .

$ ionic serve --address 68.54.96.105

Proxies de service

La commande serve peut ajouter des proxies au serveur http. Ces proxy sont utiles si vous développez dans le navigateur et que vous devez passer des appels vers une API externe. Avec cette fonctionnalité, vous pouvez envoyer une requête proxy à l'API externe via le serveur HTTP ionique en empêchant que l'en No 'Access-Control-Allow-Origin' header is present on the requested resource erreur de No 'Access-Control-Allow-Origin' header is present on the requested resource .

Dans le fichier ionic.project , vous pouvez ajouter une propriété avec un tableau de proxies à ajouter. Les proxies sont des objets avec deux propriétés:

• path : chaîne qui sera mise en correspondance avec le début de l'URL de demande entrante.
• proxyUrl : une chaîne avec l'URL de la destination de la demande par proxy.

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

En utilisant la configuration ci-dessus, vous pouvez maintenant envoyer des requêtes à votre serveur local à l' http://localhost:8100/v1 pour qu'il envoie les requêtes de proxy à https://api.instagram.com/v1

Par exemple:

angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL

.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {

  $scope.feed = null;

  $http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
    console.log('data ' , data)
    $scope.feed = data;
  })

})

Voir aussi cet aperçu pour plus d'aide.

Indicateurs / options de ligne de commande

[--consolelogs|-c] ......  Print app console logs to Ionic CLI
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI
[--port|-p] .............  Dev server HTTP port (8100 default)
[--livereload-port|-i] ..  Live Reload port (35729 default)
[--nobrowser|-b] ........  Disable launching a browser
[--nolivereload|-r] .....  Do not start live reload
[--noproxy|-x] ..........  Do not add proxies