Angular y directivas

urunet · #1 (**permalink**) 22/05/2014, 12:12

Buenas, estoy empezando con angular y me surgen algunas dudas respecto a las directivas.

Ejemplo:
La directiva ng-show (por nombrar una), que diferencia habria en utilizar la directiva ng-click y en el controlador definirle una funcion que haga desaparecer un <div> ??

Otro concepto que no me queda claro es el de template, si alguien me puede escribir unas lineas al respecto lo agradesco.

Por ultimo, no entiendo realmente cual es el beneficio de utilizarlo si con jQuery podemos realizar practicamente lo mismo sin ensuciar mucho el codigo.

Saludos gracias y disculpen la ignorancia.-

chuidiang · #2 (**permalink**) 22/05/2014, 15:06

Hola:

¿Por qué usar angujar o jQuery si lo puedes hacer con javascript puro y duro?. Hay muchas maneras de hacer las cosas y muchas librerías/frameworks para hacerlo. El elegir uno u otro depende de tus gustos y lo que creas que más te facilita el trabajo.

AnguarJS es más alto nivel que jQuery en el sentido de AngularJS es un framework (te dice cómo tienes que hacer tu aplciación) mientras que jQuery es una librería (no te dice cómo hacer tu aplicación, te da funciones javascript que hacen cosas para que tú las llames cuando quieras).

El objetivo de AngularJS es evitar que tengas que manipular con javascript (o jQuery) directamente los elementos html. Para ello, usas "templates" que son simplemente la plantilla html a usar, con directivas angular como ng-show, ng-if, ng-repeat, etc. Con eso se compone el html final en el momento de visuarlizarlo. En vez de hacer un <table> con todos sus <tr> o hacer un código javascript que añada dinámicamente los <tr> a partir de un conjunto de datos, simplemente usas un <tr ng-repeat> en la plantilla.

En cuanto a ng-show y ng-click más controlador que oculta el div.... lo dicho antes, la idea es que no manipules el html directamente. Si pones <div ng-show="{{variable}}">, te bastará en javascript con cambiar variable a true o false para que el div se oculte/muestre automáticamente, sin necesidad de que tú hagas el código que haga desparecer el div. Tu ng-click en un caso solo tendrá que hacer variable=true o false, mientras que en el otro caso tendrás que manipular el div directamente.

Se bueno.

urunet · #3 (**permalink**) 22/05/2014, 19:35

Excelente, tu respuesta es muy clara y me fue de mucha ayuda!!

Otra duda respecto las directivas, en el caso del ng-show la misma se ejecuta cuando la pagina termina de cargar?
En el caso del ng-click esta se ejecuta cuando se hace click sobre el objeto que la tiene incoorpoada?

Sobre lo controladores, estos son los que implementan la logica, por lo tanto esta bien programarlos utilizando javascript y jquery si es necesario no?

Intente hacer desaparecer un div, pero tengo problemas, que puedo tener mal en el codigo?

Código:

<html ng-app="app">
	<head><title> Desaparecer div </title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script src="js.js"></script>
	</head>
	<body ng-controller="ctrl">
		<div style="border: solid; color-background:red; width:300px; height:300px;" ng-show="ocultar()"></div>
	</body>
</html>

Código:

angular.module('app', []);

var ctrl = function($scope){
	$scope.ocultar() = function(){
		return false;
	};
};

Muchisimas gracias!!!!

chuidiang · #4 (**permalink**) 22/05/2014, 22:52

Hola:

ng-click se ejecuta cuando haces click.

ng-show (y casi todas las directivas angular) se ejecutan, por supuesto, en el momento de cargar, pero no solo en ese momento, sino siempre que cambie el modelo, sin necesidad de recargar la página.

En tu ejemplo, ng-show no debe llamar a una función, sino tener una variable boolean, asi

Código HTML:

Ver original<div ng-show="unaVariable">

y en tu controlador, solo debes hacer esto

Código Javascript:

Ver originalangular.module('app', []);
 
var ctrl = function($scope){
    $scope.unaVariable=false; 
};

Si quieres cambiar de ocultar a visualizar, en algún sitio ( a través de un ng-click por ejemplo) sólo tienes que cambiar $scope.unaVariable a true o false. Mira el ejemplo al final de la documetación de ngShow https://docs.angularjs.org/api/ng/directive/ngShow

Un subcojunto de jQuery viene con AngularJS por defecto y puedes usarlo si lo necesitas. Si no, nadie te impide añadir además jQuery completo y usarlo también.

Se bueno.