ionic-framework
ブラウザでのイオンアプリケーションのテスト

備考

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

ブラウザでのテスト

ionic serveを使用して、アプリケーションの開発とテストのためのローカル開発サーバーを起動します。これは、デスクトップブラウザのテストと、同じネットワークに接続されているデバイスブラウザ内でのテストの両方に役立ちます。さらに、このコマンドは、ファイルシステムの変更を監視するために使用されるLiveReloadを開始します。ファイルを保存するとすぐに、ブラウザは自動的に更新されます。 ionic serveにプロジェクトのSassファイルを見たい場合は、 Sass docsを見てください。

$ ionic serve [options]

クロムブラウザの場合、デバイス（AVDまたはMobiles）を調べるには、chromeブラウザのアドレスバーに次のコマンドを入力します。

chrome://inspect/#devices  

LiveReload

デフォルトでは、LiveReloadは、あなたの変更を監視しますwww/を除く、ディレクトリwww/lib/ 。これを変更するには、プロジェクトルートにあるionic.projectファイルのwatchPatternsプロパティを指定して、特定の変更を監視する（または監視しない）ことができます。

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

グロブパターンの構文については、Gruntウェブサイトのグロブニングパターンを参照してください。

注意：

$ ionic setup sass

ionic.projectファイルにデフォルト値のwatchPatternsプロパティを追加します。 ionic.projectファイルは、 Sassのドキュメントに記載されているgulpStartupTasksプロパティに加えて編集できます 。

イオニックラボ

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

Ionic Labは、iOSとAndroidプラットフォームを並行して使用して、携帯電話のフレームでアプリを簡単にテストできるようにする、 ionic serve上にある機能です。それを使用するには、

$ ionic serve --lab

すべての詳細については、 完全リリースの発表をお読みください！

使用するIPアドレスの指定

あなたのブラウザが接続するアドレスを指定したいとしましょう。たとえば、テストや外部ユーザーです。 --address引き数を指定してアドレスを指定します。

$ ionic serve --address 68.54.96.105

サービスプロキシ

serveコマンドは、httpサーバにいくつかのプロキシを追加できます。これらのプロキシは、ブラウザで開発しており、外部APIを呼び出す必要がある場合に便利です。この機能を使用するNo 'Access-Control-Allow-Origin' header is present on the requested resourceエラーにNo 'Access-Control-Allow-Origin' header is present on the requested resource 、イオンhttpサーバーを介して外部APIにプロキシ要求をプロキシできます。

ionic.projectファイルでは、追加するプロキシの配列を持つプロパティを追加できます。プロキシは2つのプロパティを持つオブジェクトです。

• path ：着信リクエストURLの先頭と一致する文字列。
• proxyUrl ：プロキシされたリクエストを送信するURLの文字列。

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

上記の設定を使用すると、 http://localhost:8100/v1ローカルサーバーにリクエストを送信して、 https://api.instagram.com/v1 http://localhost:8100/v1へのリクエストをプロキシアウトできるようになりhttps://api.instagram.com/v1

例えば：

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

})

詳細については、 この要点も参照してください。

コマンドラインフラグ/オプション

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