inyectar php en javascript (angularJS) o convertir objeto php a objeto javascript

Con la función json_encode podemos convertir un objecto php (array multidimensional) en objecto javascript.

/* definición de objecto php */
$arrayPhp = array(
        'key0' => array(
                  atributo1 => valor1,
                  atributo2 => valor2, 
                  atributo3 => valor3
         ), 
         'key1' => array(
                  atributo1 => valor1,
                  atributo2 => valor2, 
                  atributo3 => valor3
         )
);
/* conversión de objeto php a json */

<?php $objJson = json_encode($arrayPhp); ?>

Ahora ya tenemos un objeto json que podemos inyectar en funciones javascript e inicializar nuestros objetos javascript.

/* inicialización de objectos javascript a través del objeto json */

<div data-ng-init='inicializarAngularJs($objJson)'></div>

/* Se supone un entorno que soporta angular en el html. La función inicializarAngularJS puede inicializar objectos de clase en angular
    ejemplo.
*/
 
    $scope.inicializarAngularJS = funcion(pObj){
        $scope.dat.miObjetoAngular = pObj;
     }

/*
    Ahora miObjetoAngular estará inicializado con el contenido de $arrayPhp y podremos accder a propiedades como: $scope.dat.miObjetoAngular.key0.atributo1 cuyo contenido será  valor1
*/

¡Importante! Cuida los detalles. La función inicializarAngularJS va entre comillas simples, debido a que la conversión del objeto json usa internamente comillas dobles y podemos tener problemas. El parámetro se pasa directamente sin entrecomillar.

Nota: Si usamos caracteres que pueden generar conflictos (comillas dobles que rompan la cadena de código...) debemos "limpiar" el contenido del objJson.

Para limpiar caracteres "problemáticos de codificar" podemos usar la función de reemplazo:

$pString = str_replace("'", '', $varALimpiar);
$varALimpiar = preg_replace('/[^a-zA-Z0-9\']/', ' ',$pString);

el contenido de $varALimpiar sería eliminando las comillas simples y todos los caracteres que no fuesen letras de la a-z mayusculas o minusculas y numeros.

Saludos!

jquery $ is not defined in angularjs

Este mensaje me ha dado muchos dolores de cabeza en angularJS y tampoco he encontrado solución por ningún foro o ayuda. Expongo mi experiencia por si ha alguien le es útil. EL objetivo era intentar usar el plugin de Jquery owl-carousel en un proyecto con Angular JS donde obtendriamos la información a mostrar en el owl de forma asíncrona mediante promesas en servicios de angularJS ("peticiones ajax"). Al usar el proyecto en un servidor apache funciona correctamente. Al visualizar el proyecto mediante el motor de ionic con el comando "ionic serve" lanza el error "$ is not defined in angularjs" por la consola y no es capaz de generar correctamente el slider. El motivo es que el script de ionic.bundle "bloquea" los scripts durante el desarrollo como indica en el comentario por defecto que anuncia: Si intentamos visualizar el contenido del jquery.js en la consola de desarrollador de chrome, pestaña de sources. Vemos que no muestra contenido. Ni es capaz de ejecutar setencias de jquery en la consola. Para solucionarlo basta modificar las importaciones locales por recursos no locales: Ejemplo:

comunicacion entre controladores en angularJS

Desde defineProperty ha navegador problema de compatibilidad, creo que podemos pensar en el uso de un servicio.

angular.module('myservice', [], function($provide) {
    $provide.factory('msgBus', ['$rootScope', function($rootScope) {
        var msgBus = {};
        msgBus.emitMsg = function(msg) {
        $rootScope.$emit(msg);
        };
        msgBus.onMsg = function(msg, scope, func) {
            var unbind = $rootScope.$on(msg, func);
            scope.$on('$destroy', unbind);
        };
        return msgBus;
    }]);
});

y lo utilice en el controlador como este:

• el controlador 1

  function($scope, msgBus) {
      $scope.sendmsg = function() {
          msgBus.emitMsg('somemsg')
      }
  }
  

• controlador de 2

  function($scope, msgBus) {
      msgBus.onMsg('somemsg', $scope, function() {
          // your logic
      });
  }
  

Respondido el 17 de Febrero, 2014 por Singo (181 puntos)

Fuente: http://www.iteramos.com/pregunta/7779/cual-es-la-forma-correcta-de-comunicarse-entre-los-controladores-en-angularjs

Mejorar Traducción  

Cambiar la url del navegador sin recargar la página usando javascript o angular js

Yo lo he solucionado para angular Js que es el caso que me atañe, pero la solución pasa por javascript así que bastaría con usar la sentencia:

var objetoEstado;
window.history.pushState(objetoEstado, "titulo web",  "https://jesusmgcia.blogspot.com");

Documentación oficial:

Manipulando el historial del navegador

El objeto DOM window proporciona acceso al historial del browser a través del objeto history . Esto expone métodos útiles y propiedades que te permiten  avanzar y retroceder a través del historial del usuario, asi como, --Iniciando con HTML5-- manipular el contenido del historial de la pila.

Viajando a través de la historia

Retroceder y avanzar a traves del historial del usuario es realizado utilizando los métodos back(), forward(), y go().

Moviendose hacia adelante y hacia atrás

Para moverte hacia atrás, solo debes hacer:

window.history.back();

Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del browser.

De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:

window.history.forward();

Moverse a un punto específico del historial

Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Iniciando con la página actual, por supuesto, relativa al índice 0).

Para moverse atráz una página (el equivalente a un llamado a back()):

window.history.go(-1);

Para moverse una página hacia adelante, como si llamaras forward():

window.history.go(1);

De manera similar, puedes avanzar 2 páginas pasándo 2, y así sucesivamente.

Puedes obtener el número de páginas en el historial de la pila mirando el valor de la propiedad length:

var numberOfEntries = window.history.length;

Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.

Añadiendo y modificando historial de entradas

HTML5 introdujo los métodos history.pushState() e history.replaceState(), los cuales te permiten añadir y modificar entradas de historial, respectivamente. Estos métodos trabajan en conjunto con el evento window.onpopstate .

Ejemplo

Suponga que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge load.bar ni tampoco que se verifique si bar.html existe.

Suponga ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás.  En este punto, la barra de URL mostraráhttp://mozilla.org/bar.html, y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.

Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.

El método pushState()

pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado), y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:

• object estado —  El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada asociada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.
  El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify.  Porque Firefox guarda los objetos estado en el disco del usuario, entonces puede ser restaurado después de que el usuario reinicie su navegador, imponemos  un tamaño límite de 640K caracteres en representacion JSON  de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a pushState(), el método arrojará una excepción. Si necesitas más espacio, te recomendaos usar sessionStorage y/o localStorage.
• título — Firefox frecuentemente ignora este parámetro, aunque podriá usarse en el futuro. Pasar una cadena de caracteres vacia aqui podría asegurar en un futuro estar a salvo en contra a futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estas moviendo.
• URL — El nuevo historial de entradas  URL está dado por este parámetro. Note que el browser no permitirá cargar esta URL después de llamar apushState(),  pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador.  La nueva URL no necesita ser absoluta; si es relativ, es resuelta relativamente a la actual URL.  La nueva URL debe ser del mismo origen de la actual URL; de otra forma, pushState()no lanzará una excepción. Este parámetro es opcional; si no se especifica, se sitúa a la URL actual del documento.

En un sentido, llamar pushState() es similar a asignar window.location = "#foo",en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState() tiene las siguientes ventajas:

• La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar window.location te mantiene en el mismo documentsolamente si modificas unicamente el hash.
• Tu no tienes que cambiar la URL si no deseas. En contraste, asignar window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es #foo.
• Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.

Note que pushState() nunca provoca un evento hashchange para ser notificado, inclusive si la nueva URL difiere de la antigua URL únicamente en su hash.

El método replaceState()

history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.

replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.

El evento popstate

Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fué creada por un llamado apushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.

Problemas con las imagenes en angular. %7B%7B %7D%7D

Si desarrollamos una aplicación con angular e intentamos insertar dinámicamente imágenes en una etiqueta <img src="{{ ruta_dinamica_de_la_imagen }}" podemos encontrarnos errores de redsimilar a la imagen de abajo. (Developer Tool de chrome)

Estos errores producen demoras de tiempo en nuestras peticiones, ralentizando nuestras aplicaciones. Esto se debe a que la etiqueta src no soporta los caracteres {{ }} que necesitamos para definir la variable de angular. La representacion hexadecimal de los caracteres {{ }} se traducen en %7B%7B %7D%7D produciendo el error en cuestión. 

Solución: Para solucionarlo, basta con cambiar la etiqueta <img src .. por <img ng-src .. esta directiva de angular evitará nuestro problema. Mas abajo se completa la información con documentación oficial extraida de Angular Js. 

Nota: análogamente podemos encontrar el problema con la etiqueta HREF y la solución es usar la directiva <a ng-href="{{ ruta_dinamica_angular }}"

Información extraida de la documentacion oficial de angular JS,

https://docs.angularjs.org/api/ng/directive/ngSrc

ngSrc

1. - directive in module ng

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrcdirective solves this problem.

The buggy way to write it:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

The correct way to write it:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Directive Info

• This directive executes at priority level 99.

Usage

• as attribute:

  <IMG
    ng-src="">
  ...
  </IMG>

Arguments

Param	Type	Details
ngSrc	template	any string which can contain {{}} markup.

Angular JS Repetir una estructura un numero de veces. ng-repeat

Sabemos que ng-repeat itera sobre array de elementos pero nosotros queremos que itere un numero específico de veces que nosotros especificaremos. Por ejemplo. Repetir un elemento <li> de una lista un numero de veces fijado.

 El codigo de la vista que se nos ocurriría sería algo como...

<ul>
    <li ng-repeat="i in number"><span>{{$index+1}}</span></li> 
</ul>
Como "number" es un entero en lugar de un array. Esto no funciona.

La solución es un pequeño "truco". Convertir nuestro "number" en algo que pueda entender ng-repeat. Esto es, un array. 




Para ello inicializaremos un array javascript con el numero deseado que queremos que se realiza la iteración en el ng-repeat. Estamos construyendo un array para que pueda ser interpretado con el convenio que espera la sentencia ng-repeat. Para ello en el controlador que gestionara la parte del codigo de nusetra vista tendremos algo como...

El codigo del vista quedaría así

<div ng-controller="myController">

   <ul>
       <li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
   </ul>

</div>




El codigo del controlador:

.controller('myController', function ( $scope) {
   ....

     $scope.number = 5;
     $scope.getNumber = function(num) {
          return new Array(num);   
     }

  ...

 }

En las nuevas versiones de angular. A partir de la 1.2 angular no itera sobre los elementos repetidos por ello es necesario realizar la iteración la modifcación: track by $index así podremos iterar sobre elementos "repetidos" del array

<li ng-repeat="i in getNumber(number) track by $index">

Solución proporcionada en:
http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array por el usuario sh0ber

Suerte!!