ionic-framework
브라우저에서 이오닉 응용 프로그램 테스트
수색…
비고
카메라, 진동 및 기타와 같은 기본 장치 기능 테스트는 Ionic Native 의 설명서에 나와 있으며 대부분 브라우저에서 수행 할 수 없습니다. 이것은 Ionic이 기기의 기본 Android, iOS 및 Windows Mobile API에 액세스 할 수 있도록 의존하는 플랫폼 인 Cordova가 브라우저에서 실행될 수 없다는 사실에 내재 된 한계입니다.
네이티브 플러그인의 기능을 조롱함으로써이 문제를 해결할 수 있습니다.
예
다음은 Camera Plugin을 조롱하는 방법의 예입니다.
프로젝트 루트 폴더에 옵션 폴더를 만듭니다.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
camera-mock.ts 파일을 열고 다음 코드를 붙여 넣습니다.
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
다음으로 src/app.module.ts 열고 mock 클래스 "
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/**/*"
]
}
glob 패턴 구문에 대한 참고 자료는 Grunt 웹 사이트에서 globbing 패턴 을 확인하십시오.
노트 :
$ ionic setup sass
추가합니다 watchPatterns 사용자에 대한 기본 값으로 때에 프로퍼티를 ionic.project 받는 사람뿐만 아니라, 당신이 다음 편집 할 수있는 파일 gulpStartupTasks 에 설명 재산 말대꾸 문서 .
이오닉 연구소
이오닉 연구소 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 않도록 ionic http 서버를 통해 외부 API에 프록시 요청을 보낼 수 있습니다.
ionic.project 파일에 추가 할 프록시 배열이있는 속성을 추가 할 수 있습니다. 프록시는 다음 두 가지 속성을 가진 객체입니다.
-
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 대한 요청을 프록시 아웃 할 수 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