AngularJS de Google el Framework

AngularJS es un Framework Open-source sustentado por Google, básicamente es un mejorador del lenguaje HTML. Su objetivo es aumentar aplicaciones basadas en navegador con (MVC) modelo-vista-controlador de capacidad, en un esfuerzo por hacer tanto en el desarrollo y las pruebas.

La biblioteca lee en el HTML los otros atributos de etiquetas personalizadas (de AngularJS), que luego se obedece a las directivas en los atributos personalizados, y se une partes de entrada o de salida de la página a un modelo representado por las variables estándar de JavaScript. Los valores de las variables de JavaScript se puede ajustar manualmente, o se recupera de recursos JSON estáticos o dinámicos.

Para más Información de AngularJS puedes ver su sitio web oficial: http://angularjs.org/

angularjs

 AngularJS es un framework Javascript que corre en el lado del cliente (navegador) y que se centra en intentar dinamizar documentos HTML, lo que comunmente se conoce como DHTML (Dynamic HTML). Normalmente esto se consigue haciendo uso de CSS y Javascript de forma que, en función de los eventos que se produzcan en nuestra página (acciones del usuario, respuestas del servidor vía AJAX o Websockets), se actualizan, crean o eliminan determinados componentes de nuestro DOM (una imagen, un párrafo, o lo que sea…).

El objeto “document” de Javascript nos proporciona una serie de métodos como “getElementById” o “createElement” que nos permiten manipular, crear o eliminar elementos de nuestro documento HTML. No obstante, esto suele ser una tarea relativamente tediosa y muchas veces compleja, sobre todo para la gente que no está acostumbrada a trabajar con Javascript (es cierto que JQuery facilita mucho el trabajo).

Fuente

A simple vista parecería un jQUERY pero es diferente y más potente, aquí un código Ejemplo sencillo:

    <!doctype html>
    <html ng-app>
    <head>
	<title>Demostración de AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    </head>
    <body>
    <div>
    <label>Nombre:</label>
    <input type="text" ng-model="yourName" placeholder="Escriba su nombre">
    <hr>
    <h1>Hola {{yourName}}!</h1>
    </div>
    </body>
    </html>

Como  puedes ver hay etiquetas (tag) adicionales con el prefijo “ng-“ eso es parte de la programación en AngularJS, aquí puedes ver el código en Funcionamiento:

http://www.elcodigofuente.com/ejemplos/angularjs.html

Se puede hacer lo mismo con jQuery pero se necesitan más líneas de código y es más elaborado, como pueden ver con AngularJS es mucho más sencillo.

Aquí el mismo efecto pero usando jQuery

<html>
<head>
<title>Demostración de jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		var name= $('#name');
		var greeting= $('#greeting');
		name.keyup(function() {
			greeting.text('Hola ' + name.val() + '!');
		})
	})
	</script>
</head>
<body>
<div>
    <label>Nombre:</label>
    <input id="name" type="text">
    <hr>
    <h2 id="greeting"></h2>
    </div>
</body>
</html>

Puedes verlo en funcionamiento aquí:

http://www.elcodigofuente.com/ejemplos/jQuery.html


Posted

in

by

Comments

2 respuestas a “AngularJS de Google el Framework”

  1. Ricky Avatar
    Ricky

    Algo importante que hay que notar, si lo han probado es que con el ejemplo en jQuery es mas lento que con Angular… revisenlo.

  2. jose Avatar
    jose

    Soy nuevo en angular y tengo una duda usando un combobox. Al recuperar información de DB necesito pintar el registro dentro de un combobox mencionando tambien que debe ser el que este guardado para x registro y después poder cargar la lista del combo, esto es para un formulario de modificaciones. Si pudieran ayudarme, seria muy bueno, gracias…

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *