Как JSON может быть передан в AngularJS в веб-браузере Android?

Я пытаюсь использовать Android Webview для отображения некоторого «активного» контента (наборы изображений, которые различаются в зависимости от некоторых параметров ввода). Содержимое будет локальным (офлайн).

Я хотел бы использовать Angular.js для управления носителями, которые будут отображаться на странице.

Итак, к проблеме … как мое приложение Angular получит данные JSON при запуске? Проблема, которую я вижу, заключается в том, что веб-просмотр не позволяет загружать дополнительные файлы с угловыми нагрузками (я уже сталкивался с этим, пытаясь использовать html-шаблоны для пользовательской директивы. Это требовало включения HTML-шаблонов в один файл HTML).

Моя активность в Android может записывать варианты где-то, но как Angular сможет их прочитать? Другими словами, существует ли способ настройки безопасности веб-просмотра, который не позволяет Angular.js ленить загружать дополнительные файлы?

Я думаю, что я понял это. Я понял, что могу создать метод в своем коде Java Java, который подвергается JavaScript (через @JavascriptInterface). Это позволило бы мне вызвать этот метод из моего приложения AngularJS, чтобы получить JSON в строке (см. Эту ссылку для информации о JavascriptInterface: http://developer.android.com/guide/webapps/webview.html ). Я отправлю код, как только доказал, что это работает.

Вот код. Он отлично работает.

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> 

app.js

 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 }]); 

Предоставление данных с помощью метода android JavascriptInterface отлично работает.

Intereting Posts