Cordova + Angularjs + 디바이스 지원
저는 Cordova와 AngularJS를 사용하여 모바일 어플리케이션을 개발하고 있습니다.앵글루어 부트스트래핑을 제한하려면 어떻게 해야 하나요?코르도바 디바이스보다 앞의 JS가 준비되었습니다.기본적으로 Angular는 사용하지 않습니다.디바이스 준비 전 JS 컨트롤러
Angular 앱 수동 부트스트랩:
삭제하다ng-app속성을 HTML 코드에서 추출하면 Angular가 자동으로 시작되지 않습니다.
다음과 같은 내용을 JavaScript 코드에 추가합니다.
document.addEventListener("deviceready", function() {
// retrieve the DOM element that had the ng-app attribute
var domElement = document.getElementById(...) / document.querySelector(...);
angular.bootstrap(domElement, ["angularAppName"]);
}, false);
부트스트래핑 앱에 대한 각진 문서입니다.
난 다음 용액을 사용하고 있어, Angular는JS는 Cordova와 함께 실행할 때와 브라우저에서 직접 실행할 때 부트스트랩됩니다.이것이 제 개발의 많은 부분을 차지하고 있습니다.main index.html 페이지에서 ng-app 디렉티브를 삭제해야 합니다.이는 수동 부트스트래핑이 대체하기 때문입니다.
업데이트: 이후 다음과 같은 방법으로 전환했습니다. 더 깔끔하다고 생각합니다.바닐라 코르도바/PhoneGap 뿐만 아니라 Ionic에도 대응합니다.실행하는 JavaScript의 마지막 비트여야 합니다.아마도 /body 태그 앞에 스크립트 태그가 있을 것입니다.
angular.element(document).ready(function () {
if (window.cordova) {
console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
document.addEventListener('deviceready', function () {
console.log("Deviceready event has fired, bootstrapping AngularJS.");
angular.bootstrap(document.body, ['app']);
}, false);
} else {
console.log("Running in browser, bootstrapping AngularJS now.");
angular.bootstrap(document.body, ['app']);
}
});
사용한 오래된 솔루션은 다음과 같습니다.
// This is a function that bootstraps AngularJS, which is called from later code
function bootstrapAngular() {
console.log("Bootstrapping AngularJS");
// This assumes your app is named "app" and is on the body tag: <body ng-app="app">
// Change the selector from "body" to whatever you need
var domElement = document.querySelector('body');
// Change the application name from "app" if needed
angular.bootstrap(domElement, ['app']);
}
// This is my preferred Cordova detection method, as it doesn't require updating.
if (document.URL.indexOf( 'http://' ) === -1
&& document.URL.indexOf( 'https://' ) === -1) {
console.log("URL: Running in Cordova/PhoneGap");
document.addEventListener("deviceready", bootstrapAngular, false);
} else {
console.log("URL: Running in browser");
bootstrapAngular();
}
웹에서 전화기에 Cordova 앱을 로드하는 등의 이유로 http/https 검출 방식에 문제가 발생한 경우 대신 다음 방법을 사용할 수 있습니다.
function bootstrapAngular() {
console.log("Bootstrapping AngularJS");
// This assumes your app is named "app" and is on the body tag: <body ng-app="app">
// Change the selector from "body" to whatever you need
var domElement = document.querySelector('body');
// Change the application name from "app" if needed
angular.bootstrap(domElement, ['app']);
}
// This method of user agent detection also works, though it means you might have to maintain this UA list
if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) {
console.log("UA: Running in Cordova/PhoneGap");
document.addEventListener("deviceready", bootstrapAngular, false);
} else {
console.log("UA: Running in browser");
bootstrapAngular();
}
첫 번째 예시와 동일한 bootstrapAngular 함수가 여전히 필요합니다.
수동으로 부트스트랩 Angular를 사용하는 이유JS, Cordova/PhoneGap/Ionic 탑재
여기 오는 사람들 중에는 애초에 왜 이런 일을 하려고 하는지 모를 수도 있어요.문제는 네가 Angular를 가질 수 있다는 거야Cordova/PhoneGap/Ionic 플러그인에 의존하는 JS 코드. 이러한 플러그인은 Angular 이후에 준비됩니다.JS는 Cordova가 Angular에 대한 일반적인 이전 Javascript 코드보다 디바이스에서 시작 및 실행하는 데 시간이 더 오래 걸리기 때문에 시작되었습니다.JS는 그래요.
따라서 이 경우 부팅(부트스트랩)하기 전에 Cordova/PhoneGap/Ionic이 준비될 때까지 기다려야 합니다.JS는 Angular가 실행에 필요한 모든 것을 가질 수 있도록 합니다.
예를 들어 브라우저에 데이터를 저장하기 위해 로컬 스토리지를 사용하는 NG-Persist Angular 모듈, iOS에서 실행할 때 iOS 키체인 플러그인, Android에서 실행할 때 cordova-plugin 파일을 사용한다고 가정해 보십시오.Angular 앱이 즉시 무언가를 로드/저장하려고 하면 NG-Persist 체크 온 창이 나타납니다.(디바이스 플러그인의) device.platform은 모바일 코드가 아직 시작되지 않았기 때문에 실패하고 예쁜 앱 대신 흰색 페이지만 표시됩니다.
Ionic을 사용하는 경우 이 솔루션은 브라우저 및 장치에서 작동합니다.이 실타래에 로마가의 공로를 인정.
window.ionic.Platform.ready(function() {
angular.bootstrap(document, ['<your_main_app']);
});
DOM 요소에서 ng-app을 제거해야 합니다.
이 솔루션은 다음을 사용했을 때 더욱 견고해졌습니다.
angular.element(document).ready(function () {
var domElement = document.getElementById('appElement');
angular.bootstrap(domElement, ["angularAppName"]);
});
갱신하다
상기의 내용을 적절한 디바이스 레디 기능에 포함시키는 것을 추천합니다.예를 들어 다음과 같습니다.
document.addEventListener("deviceready", function() {
angular.element(document).ready(function () {
var domElement = document.getElementById('appElement');
angular.bootstrap(domElement, ["angularAppName"]);
});
}, false);
The Hippo의 솔루션을 사용하는 경우:
document.addEventListener("deviceready", function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(...) / document.querySelector(...); angular.bootstrap(domElement, ["angularAppName"]); }, false);
"cordova.js"는 Cordova 또는 Phonegap 빌드 프로세스에서 해결되며 로컬 호스트 또는 에뮬레이트된 테스트 환경에서 사용할 수 없기 때문에 브라우저에서 작동하지 않습니다.
따라서 "deviceready" 이벤트는 실행되지 않습니다.브라우저 콘솔에서 수동으로 실행할 수 있습니다.
var customDeviceReadyEvent = new Event('deviceready');
document.dispatchEvent(customDeviceReadyEvent);
또한 angular 모듈/컨트롤러/팩토리/지시 등을 모두 설정한 후 angular의 부트스트랩이 트리거되는지 확인하십시오.
대부분의 경우 각진 앱 로딩은 디바이스 레이디 후까지 차단할 필요가 없습니다(플러그인이 많을 경우 디바이스 레이디 시작까지 몇 초 정도 걸릴 수 있음).
대신 이 lib(https://github.com/arnesson/angular-cordova)를 사용하면 콜을 자동으로 버퍼링하여 디바이스 레이디 문제를 해결하고 디바이스 레이디 실행 후 실행할 수 있습니다.
언급URL : https://stackoverflow.com/questions/21556090/cordova-angularjs-device-ready
'programing' 카테고리의 다른 글
| Angular의 다른 필드와 함께 FormData 전송JS (0) | 2023.03.02 |
|---|---|
| Java 9에서 클래스 및 리소스 로드 (0) | 2023.03.02 |
| 리피터 필드에 의한 ACF 쿼리 투고가 비어 있지 않음 (0) | 2023.03.02 |
| java.util 인스턴스를 역직렬화할 수 없습니다.ArrayList가 VALUE_STRING을 벗어남 (0) | 2023.03.02 |
| 반응하는 라디오 버튼을 기본값으로 켜려면 어떻게 해야 합니까? (0) | 2023.03.02 |