Joan: /* Entrega */

2018-09-20T15:32:30Z

Entrega

Pàgina nova

=Introducció=
A classe hem vist la teoria de Angular JS. En aquesta pràctica volem aprofundir a través d'un exemple senzill, però seguint estrictament el model MVC.
=Desenvolupament=
A classe hem comentat i realitzat el següent exemple:
*https://uno-de-piera.com/mvc-con-angularjs-trabajando-de-forma-ordenada/
Per tal de què funcioni, és important testejar l'exemple a través d'un servidor web (utilitzar http://localhost, no pas file://), i també recordar (i mirar) com funciona l'enrutament.

El punt d'entrada de l'aplicació és: ''#/home'':
*http://localhost/M06/UF2/angular/mvc/#/home

==Aplicació insectes==
En una pràctica anterior (AJAX) has omplert una taula HTML amb la informació de la base de dades d'insectes. Ara adaptarem aquesta pràctica a Angular JS, seguint el model MVC. Has de separar en fitxers el model, la vista i el controlador. Amb Angular faràs una crida Ajax al fitxer PHP que retorna un objecte JSON amb la informació dels insectes contingut en la base de dades.

A continuació se't presenta una solució a través de 4 versions incrementals, que comentem:

'''1. v1'''. Partim de l'exemple anterior ('mvc''), i canviem tota la notació de les variables i els fitxers (bàsicament canviem ''notas'' per ''insectes''). En el model tenim dades en format JSON que representen un array d'insectes, amb els camps ''gènere'', ''espècie'' i ''nom_fitxer''.

'''2. v2'''. Creem dues vistes, dos controladors i dos models. La part més difícil ha estat en el fitxer ''colleccio.js'', veure com puc associar dos controladors diferents a dues vistes, que conviuen en el fitxer de vista ''home.html''

'''3. v3'''. Ara és el moment de substituir el model2 per un accés a la base de dades. El script ''insectes_json.php'' retorna un objecte JSON amb les dades de la família ''Coccinellidae'' (marietes). Si hem sigut ordenats, n'hi ha prou en canviar en el script ''insectesController.js'' una línia en la definició del controlador ''insectesController2'', que ara passa a ser una crida AJAX amb el servei ''http'':

<pre>
//controlador insectesController al qual li injectem el modelo insectesModel
Colleccio.controller("insectesController", function($scope, insectesModel){

//obtenim els insectes
$scope.insectes = insectesModel.getInsectes();
});

//controlador insectesController2 al qual li injectem el modelo insectesModel2
Colleccio.controller("insectesController2", function($scope, $http){

//obtenim els insectes de la base de dades
$http.get("php/insectes_json.php")
.then(function(response) {
$scope.insectes = response.data;
});

});
</pre>
'''4. v4'''. Per acabar l'exemple, ara ja podem visualitzar les fotos dels insectes accedint a les URL absolutes on estan disponibles.

Per al professor, el punts d'entrada de l'aplicació a les diferents versions són:
*http://localhost/insectes_angular/v1/#/home
*http://localhost/insectes_angular/v2/#/home
*http://localhost/insectes_angular/v3/#/home
*http://localhost/insectes_angular/v4/#/home

'''Solució''': [[Fitxer:Angular.zip]]
=Entrega=
Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Schoology: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology]]

{{Autor}}, abril 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Framework Angular JS - Historial de revisió

Joan: /* Entrega */