PhoneGapでAngular ng-view/routingが機能しない

PhoneGapのngViewに問題があります。PhoneGapでAngular ng-view/routingが機能しない

すべてがうまくロードされているようで、ng-controllerを使用して基本的なコントローラを操作することもできます。しかし、ngViewでルーティングを使用しようとすると、何も起こりません。

index.htmlを

<!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.js

angular.module('App', []).config(function ($routeProvider) { 

    $routeProvider.when('/test', { 
     controller: TestCtrl, 
     template: '<h1> {{ test }} </h1>'   
    }); 

}); 

function TestCtrl($scope) { 
    $scope.test = "Works!"; 
}

は、EclipseロガーはonMessage(onPageFinished, fle:///android_asset/www/index.html#/test)私がリンクをクリックするたびに示し、#なしでそれをしようとするとちょうどというエラーが発生しますパスが見つかりません。

他のどこからでも私が準備したものから、これはうまくいくはずです。どんな助けでも大歓迎です。

出典

2013-02-27 thewildpendulum

。 –

いくつかの質問やフォーラムを検索した後、私は最終的にそれが確実に働くんです。これは、きれいなPhoneGapプロジェクトから実行するために必要なものです。

index.htmlを

<!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">タグ。アプリケーションはディレクティブの値なしでは読み込まれませんので、必ずディレクティブを含めてください。 PhoneGapのは'ondeviceready'イベントを起動したときに、このファイルには

var app = { 
    initialize: function() { 
     this.bindEvents(); 
    }, 
    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady, true); 
    }, 

    onDeviceReady: function() { 
     angular.element(document).ready(function() { 
      angular.bootstrap(document); 
     }); 
    }, 
};

index.jsは、我々は手動で角度ブートストラップしています。

routers.js

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.js最後に

function TestCtrl($scope) { 
    $scope.status = "It works!"; 
} 

function ViewCtrl($scope) { 
    $scope.status = "Also totally works!"; 
}

、単にいくつかの基本的なコントローラです。

私はこのすべてを使ってgithubレポを作成しましたhere

これは他の人に役立つことを願っています。

出典

2013-03-26 21:50:56 thewildpendulum

+18

他の誰かがこの問題に遭遇した場合、urlSanitizationWhitelistは最新のバージョンである –

の新しいバージョンでaHrefSanitizationWhitelistです。今年は1年後です：このエラーが発生するのは、このエラーが発生します。 '' 'Error：ng：btstrpd Appは既にブートストラップされていますこのElement 'document' '' ' - その角度が既にロードされていることを示します。 – ericpeters0n

私も同様のエラーが発生しました。あなたがangular.bootstrapを呼び出している場合、解決策はHTMLに「ng-app」属性を追加することではありませんでした。どちらか一方を行うことはできますが、両方を行うことはできません。 – hawkharris

私の問題はホワイトリストに登録されたドメインでした。

基本的にはあなたの.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):/); 
});

出典

2013-03-13 00:04:36 forrestranger

角度1。2は方法を提供しません

$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)

とにかく、それはもはや必要ではないようです。私は私の携帯電話でそれをテストし、それなしで動作します。

出典

2013-08-15 18:47:50 akohout

aHrefSanitizationWhitelistを試す –

私はGoogle Chromeのローカルアクセスポリシーフラグを無効にすることで問題を解決できました。

$ open -a Google\ Chrome --args --disable-web-security for Mac OS.

ローカルアクセスファイルポリシーを無効にする方法は、linkです。

出典

2013-08-28 21:18:43

FWIW - ここでは、この問題についての私の2セントです：

...上記の作業をアプリに向けて私を仕事と宣伝するように見えたが、私はまだページ間を移動するための$ routeproviderを得ることができなかったの

すべて

MY FINALの問題は、jqueryMobileライブラリのスクリプトタグ内にインクルードがあり、Angularがそれらを保持する前にURLリクエストをハイジャックしていたことです。私がそれを取り除いたとき、ナビゲーション要求は$ routeproviderにそれをしました、そして、すべてはうまくいまいちです。これは誰かに役立ちます

希望...あなたは `NG-href`の代わりに、URLを正しく書き換えることができますので、角度、通常の` href`を使用する必要があります

出典

2014-10-04 11:44:14 roy650

PhoneGapでAngular ng-view/routingが機能しない

答えて

関連する問題