ionic-framework
Probando la aplicación jónica en un navegador

Observaciones

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 {}

Pruebas en un navegador

Utilice el ionic serve para iniciar un servidor de desarrollo local para el desarrollo y la prueba de aplicaciones. Esto es útil tanto para la prueba del navegador de escritorio como para la prueba dentro de un navegador de dispositivo que está conectado a la misma red. Además, este comando inicia LiveReload, que se utiliza para monitorear los cambios en el sistema de archivos. Tan pronto como guarde un archivo, el navegador se actualizará automáticamente. Eche un vistazo a los documentos de Sass si también desea que el ionic serve vea los archivos de Sass del proyecto.

$ ionic serve [options]

Para el navegador Chrome puede inspeccionar dispositivos (AVD o móviles), escriba el siguiente comando en la barra de direcciones del navegador Chrome.

chrome://inspect/#devices  

LiveReload

Por defecto, LiveReload observará los cambios en su directorio www/ , excluyendo www/lib/ . Para cambiar esto, puede especificar una propiedad watchPatterns en el archivo ionic.project que se encuentra en la raíz de su proyecto para ver (o no ver) cambios específicos.

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

Para obtener una referencia sobre la sintaxis de patrón global , revise los patrones globales en el sitio web Grunt.

Nota:

$ ionic setup sass

agregará una watchPatterns con los valores predeterminados a su archivo ionic.project que luego puede editar, además de la propiedad gulpStartupTasks como se describe en la documentación de Sass .

Laboratorio Iónico

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

Ionic Lab es una característica del ionic serve que facilita la prueba de su aplicación en el marco de un teléfono y con las plataformas iOS y Android una al lado de la otra. Para usarlo, solo ejecuta

$ ionic serve --lab

Lea el anuncio de la versión completa para todos los detalles!

Especificando una dirección IP para usar

Diga que desea especificar a qué dirección se conectará su navegador, por ejemplo, para pruebas o usuarios externos. Especifique la dirección con el argumento --address .

$ ionic serve --address 68.54.96.105

Proxies de servicio

El comando serve puede agregar algunos proxies al servidor http. Estos proxies son útiles si está desarrollando en el navegador y necesita hacer llamadas a una API externa. Con esta función, puede enviar una solicitud de proxy a la api externa a través del servidor http iónico, evitando que el No 'Access-Control-Allow-Origin' header is present on the requested resource error de No 'Access-Control-Allow-Origin' header is present on the requested resource .

En el archivo ionic.project puede agregar una propiedad con una matriz de proxies que desee agregar. Los proxies son objeto con dos propiedades:

• path : cadena que se comparará con el comienzo de la URL de solicitud entrante.
• proxyUrl : una cadena con la URL de donde debe ir la solicitud de proxy.

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

Usando la configuración anterior, ahora puede hacer solicitudes a su servidor local en http://localhost:8100/v1 para que las solicitudes de proxy sean https://api.instagram.com/v1

Por ejemplo:

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

})

Vea también esta esencia para más ayuda.

Indicadores de línea de comando / opciones

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