¿Cómo se puede pasar JSON a AngularJS en la vista web de Android?

Estoy intentando utilizar una vista Web de Android para mostrar algún contenido "activo" (conjuntos de imágenes que varían dependiendo de algunos ajustes de entrada). El contenido será local (sin conexión).

Me gustaría usar Angular.js para controlar los medios que se mostrarán en la página.

Por lo tanto, para el problema … ¿cómo puede mi aplicación angular recibir datos JSON en el inicio? El problema que veo es que la webview no permite archivos adicionales de carga angular a perezosos (ya me encontré con esto mientras trataba de usar plantillas html para una directiva personalizada. Esto requería incluir las plantillas HTML en el único archivo HTML).

Mi actividad de Android puede escribir las opciones en algún lugar, pero ¿cómo va a poder leerlas Angular? En otras palabras, ¿hay alguna forma de evitar la configuración de seguridad de la webview que no permite a Angular.js cargar archivos adicionales de modo lento?

Creo que he descubierto esto. Me di cuenta de que puedo crear un método en mi código Java de Android que está expuesto a JavaScript (a través de @JavascriptInterface). Esto me permitiría llamar a este método de mi aplicación AngularJS para obtener el JSON en una cadena (ver este enlace para obtener información sobre JavascriptInterface: http://developer.android.com/guide/webapps/webview.html ). Voy a publicar algún código una vez que he demostrado que esto funciona.

Aquí está el código. Funciona muy bien.

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

Exponer los datos a través del método JavascriptInterface android funciona muy bien.

  • Android WebView eliminarCookie
  • Llamar al servicio web WSDL mediante el uso de retrofit android
  • WebViewClient shouldInterceptRequest Congela el WebView
  • Notificación de empuje en Web móvil
  • Fondo-adjunto: fijo no funciona en android / móvil
  • ¿Cuál es la mejor manera de apoyar métodos obsoletos que son reemplazados por otros nuevos?
  • Descargar archivo dentro de WebView
  • Eliminar márgenes en webView
  • Cambios en una página web a través de JavaScript que no aparecen en WebView. ¿Hay una manera de forzar el WebView para volver a dibujar su contenido?
  • Cómo habilitar la depuración remota / inspector de la aplicación Android de WebKit mediante WebView?
  • Obtener el precio de un sitio web minorista
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.