PhoneGap에서 각도 ng뷰/루팅이 작동하지 않음
PhoneGap의 ngView에 문제가 있습니다.
모든 것이 정상적으로 로딩되고 있는 것 같고, ng-controller를 사용하여 기본적인 컨트롤러도 작동시킬 수 있습니다.단, ngView에서 루팅을 사용하려고 하면 아무 일도 일어나지 않습니다.
index.displaces를 표시합니다.
<!doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="lib/cordova-2.4.0.js"></script>
<script type="text/javascript" src="lib/angular-1.0.4.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<a href="#/test">Test</a>
<div ng-view></div>
</body>
</html>
app.module
angular.module('App', []).config(function ($routeProvider) {
$routeProvider.when('/test', {
controller: TestCtrl,
template: '<h1> {{ test }} </h1>'
});
});
function TestCtrl($scope) {
$scope.test = "Works!";
}
에 「」가 됩니다.onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)마다, 하지 않고 합니다.#경로를 찾을 수 없다는 오류가 발생합니다.
내가 다른 곳에 준비해 둔 걸로 봐서는, 이게 효과가 있을 거야.어떤 도움이라도 주시면 감사하겠습니다.
몇 가지 질문이나 포럼을 검색한 결과, 신뢰성 있게 동작할 수 있었습니다.이게 바로 제가 깨끗한 PhoneGap 프로젝트에서 실행하는데 필요한 것입니다.
index.displaces를 표시합니다.
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<a href="#/">Main View</a>
<a href="#/view">New View</a>
<div ng-view></div>
<!-- Libs -->
<script type="text/javascript" src="lib/cordova-2.5.0.js"></script>
<script type="text/javascript" src="lib/angular-1.0.5.js"></script>
<!-- App -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routers.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
해 주세요.<html ng-app="App">명령어 값이 없으면 앱이 로드되지 않으므로 반드시 포함시키십시오.
index.displaces를 표시합니다.
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
이 "PhoneGap"을 할 때 "Angular"를 수동으로 'ondeviceready'
routers.displaces
angular.module('App', [])
.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl,
templateUrl: 'partials/main.html'
})
.when('/view', {
controller: ViewCtrl,
templateUrl: 'partials/view.html'
});
});
이 파일에는 두 가지 중요한 것이 들어 있습니다.요.<html np-app="App">다음으로 파일 URI를 화이트리스트에 포함하도록 라우터를 설정할 필요가 있습니다.저는 개인적으로 이것이 필요하지 않았지만, 여러 사람이 이 문제를 접한 것 같아서 포함시켰습니다.
controllers.controllers.displaces
function TestCtrl($scope) {
$scope.status = "It works!";
}
function ViewCtrl($scope) {
$scope.status = "Also totally works!";
}
마지막으로 몇 가지 기본적인 컨트롤러만 있으면 됩니다.
이 모든 것을 가지고 기투브 레포(github repo)를 만들었습니다.
이게 다른 사람에게 도움이 되길 바라.
나의 문제는 도메인 화이트리스트였다.
기본적으로 .config는 다음과 같이 되어 있어야 합니다.
angular.module('App', []).config(function ($routeProvider, $compileProvider) {
$routeProvider.when('/test', {
controller: TestCtrl,
template: '<h1> {{ test }} </h1>'
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
WWIW - 이 문제에 대한 2센트입니다.
위의 모든 것이 기능하고 있는 것 같았지만, $routerovider가 페이지를 네비게이트 할 수 없었습니다.
최종적인 문제는 jquery Mobile 라이브러리의 스크립트 태그 안에 include가 있는데 Angular가 URL 요청을 입수하기 전에 URL 요청을 가로채고 있었다는 것입니다.제거했을 때 내비게이션 요청이 $routerovider에 도달하여 모든 것이 정상적으로 동작하고 있습니다.
이게 도움이 됐으면 좋겠는데...
Google Chrome에서 로컬 액세스 정책 플래그를 비활성화하여 문제를 해결할 수 있었습니다.
$ open -a Google\ Chrome --args --disable-web-security for Mac OS.
로컬 액세스파일 정책을 디세블로 하는 방법에 대한 링크를 다음에 나타냅니다.
각도 1.2는 다음 방법을 제공하지 않습니다.
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)
어쨌든, 더 이상 필요하지 않은 것 같아.모바일로 테스트해 봤는데 필요 없어요.
언급URL : https://stackoverflow.com/questions/15105910/angular-ng-view-routing-not-working-in-phonegap
'programing' 카테고리의 다른 글
| 교차 도메인 에이잭스 요청 허용 (0) | 2023.03.26 |
|---|---|
| iOS의 파일에서 JSON을 해석하려면 어떻게 해야 합니까? (0) | 2023.03.26 |
| jsTree - 요청 시 Ajax를 통해 하위 노드 로드 (0) | 2023.03.26 |
| 여러 식에서 ng-click을 사용하는 방법 (0) | 2023.03.26 |
| AngularJS $resource RESTful 예시 (0) | 2023.03.26 |