ionic-framework
Testare l'app Ionic in un browser

Osservazioni

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 in un browser

Utilizzare ionic serve per avviare un server di sviluppo locale per lo sviluppo e il test delle app. Questo è utile sia per i test del browser desktop, sia per testare all'interno di un browser del dispositivo che è connesso alla stessa rete. Inoltre, questo comando avvia LiveReload che viene utilizzato per monitorare le modifiche nel file system. Non appena si salva un file, il browser viene aggiornato automaticamente. Dai un'occhiata ai documenti di Sass se vuoi anche avere un ionic serve guardare i file Sass del progetto.

$ ionic serve [options]

Per browser Chrome puoi controllare i dispositivi (AVD o cellulari), digitare il comando seguente nella barra degli indirizzi del browser Chrome.

chrome://inspect/#devices  

LiveReload

Per impostazione predefinita, LiveReload controllerà le modifiche nella tua www/ directory, escluso www/lib/ . Per cambiare questo, puoi specificare una proprietà watchPatterns nel file ionic.project che si trova nella root del progetto per guardare (o non guardare) le modifiche specifiche.

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

Per un riferimento sulla sintassi del pattern glob, controlla i pattern globbing sul sito web di Grunt.

Nota:

$ ionic setup sass

aggiungerà watchPatterns correttamente con i valori predefiniti al file ionic.project che è possibile modificare, oltre alla proprietà gulpStartupTasks come descritto nella documentazione di Sass .

Ionic Lab

Ionic Lab http://ionicframework.com/img/blog/lab.png

Ionic Lab è una funzione al servizio di ionic serve che semplifica il test della tua app in una cornice del telefono e con piattaforme iOS e Android affiancate. Per usarlo, basta correre

$ ionic serve --lab

Leggi l' annuncio di rilascio completo per tutti i dettagli!

Specifica di un indirizzo IP da utilizzare

Supponi di voler specificare a quale indirizzo si connetterà il tuo browser, ad esempio per testare o utenti esterni. Specificare l'indirizzo con l'argomento --address .

$ ionic serve --address 68.54.96.105

Proxy di servizio

Il comando serve può aggiungere alcuni proxy al server http. Questi proxy sono utili se stai sviluppando nel browser e devi effettuare chiamate a un'API esterna. Con questa funzione è possibile inoltrare la richiesta al API esterno tramite il server http ionico, impedendo che l' No 'Access-Control-Allow-Origin' header is present on the requested resource sull'errore di No 'Access-Control-Allow-Origin' header is present on the requested resource .

Nel file ionic.project è possibile aggiungere una proprietà con una serie di proxy che si desidera aggiungere. I proxy sono oggetti con due proprietà:

• path : stringa che verrà confrontata con l'inizio dell'URL della richiesta in entrata.
• proxyUrl : una stringa con l'url di dove deve andare la richiesta proxy.

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

Utilizzando la configurazione di cui sopra, ora puoi effettuare richieste al tuo server locale su http://localhost:8100/v1 per fare in modo che le richieste proxy vengano inviate a https://api.instagram.com/v1

Per esempio:

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;
  })

})

Vedi anche questo succo per ulteriore aiuto.

Flag / opzioni della riga di comando

[--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