如何在Android webview中将JSON传递给AngularJS?
我正在尝试使用Android Webview来显示一些“活动”内容(图像集根据某些输入设置而变化)。内容将是本地(脱机)的 我想使用Angular.js控制页面上显示的媒体 所以,对于这个问题。。。我的Angular应用程序如何在启动时接收JSON数据?我看到的问题是webview不允许angular延迟加载其他文件(我在尝试将html模板用于自定义指令时遇到了这个问题。这需要将html模板封装到单个html文件中)如何在Android webview中将JSON传递给AngularJS?,android,json,angularjs,webview,Android,Json,Angularjs,Webview,我正在尝试使用Android Webview来显示一些“活动”内容(图像集根据某些输入设置而变化)。内容将是本地(脱机)的 我想使用Angular.js控制页面上显示的媒体 所以,对于这个问题。。。我的Angular应用程序如何在启动时接收JSON数据?我看到的问题是webview不允许angular延迟加载其他文件(我在尝试将html模板用于自定义指令时遇到了这个问题。这需要将html模板封装到单个html文件中) 我的Android活动可以在某处写出选项,但Angular如何才能读取它们呢?
我的Android活动可以在某处写出选项,但Angular如何才能读取它们呢?换句话说,有没有办法绕过webview的安全设置,不允许Angular.js延迟加载其他文件?我想我已经解决了这个问题。我意识到我可以在Android Java代码中创建一个暴露于JavaScript的方法(通过@JavascriptInterface)。这将允许我从AngularJS应用程序调用此方法,以获取字符串形式的JSON(有关JavascriptInterface:的信息,请参阅此链接)。一旦我证明了这是可行的,我将发布一些代码 这是代码。它工作得很好 MainActivity.java
public class MainActivity extends Activity {
private String MY_JSON_EXAMPLE = "{\"name\":\"John Doe\",\"email\":\"jdoe@testco.com\"}";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView) findViewById(R.id.myWebView);
wv.getSettings().setJavaScriptEnabled(true);
wv.addJavascriptInterface(this, "AndroidMainAct");
wv.loadUrl("file:///android_asset/mypage.html");
}
@JavascriptInterface
public String getMyJSONData() {
return MY_JSON_EXAMPLE;
}
}
mypage.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h3>Load Test</h3>
<div ng-controller="MyController">
<div id="dataWaiting" ng-show="!myData.length">
Loading JSON...
</div>
<div id="dataLoaded" ng-show="myData.length">
Data Loaded: {{myData}}
</div>
</div>
</body>
</html>
通过android JavascriptInterface方法公开数据效果很好。如何在此构建系统中使用angular ES6控制器代码由于未定义
var myApp=angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.myData = '';
this.loadData = function() {
// get the data from android
return AndroidMainAct.getMyJSONData();
};
$scope.myData = this.loadData(); // load data on instantiation
}]);