8. FACTORY - mavira21/CREAR-WEB-CON-PROCESSWIRE GitHub Wiki
Vamos a ver un ejemplo para ver usuarios registrados.
Para acceder a los módulos desde angular vamos a crear una especie de conector:
- Creamos en sublime bajo la carpeta /js o bien /scripts un fichero llamado factories.js
- Importamos este en nuestra cabecera antes de cerrar
- Indicamos que vamos a usar el
factory var app = angular.module('myApp',['ngRoute','factories'])
- Ponemos el nombre de nuestro factory en cada controlador que lo use.
- Paso 0: Crear en Hanna code [ [usuarios] ] y una página usuarios bajo web-service que lo use.
<?php
header("Content-type: application/json");
$arr = array();
$usuarios = $pages->find("template=user");
// add to array
foreach($usuarios as $usuario) {
array_push($arr, array(
'id'=>$usuario->id,
'name'=>$usuario->name,
'email'=>$usuario->email
));
}
//convet to json
echo json_encode($arr);
return;
- Paso 1: factories.js (cambiar la dirección por la de tu servidor)
angular.module('factories', [])
.factory('pw', function($http, $location) {
var webService = "http://"+$location.$$host+"/web-service/";
return {
usuarios: function(){
return $http.get( webService + "usuarios/").then(function(response){
return response.data;
});
},
script: function(id){
return $http.get( webService + "script/" + id).then(function(response){
return response.data;
});
},
}
})
- Paso 2: _init.php o index.html
<script src="<?php echo $config->urls->templates?>js/factories.js"></script>
</head>
- Paso 3: Buscar la linea var app = angular.module y añadir 'factories'
var app = angular.module('myApp',['ngRoute','factories'])
- Paso 4: LLamar al script mediante el factory
app.controller('HomeCtrl',function($scope, pw){
$scope.verUsuarios = function(){
pw.usuarios().then(function(data){
$scope.usuarios = data;
console.log("USUARIOS", $scope.usuarios);
});
}
});
- Paso 5: Visualizar la información
...
<ul>
<li ng-repeat="usuario in usuarios">{{usuario.name}} {{usuario.email}}</li>
</ul>
<button ng-click="verUsuarios()"></button>
...