Framework Angular JS

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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:

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:

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:

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

});

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:

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


creat per Joan Quintana Compte, abril 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines