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 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).
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í: