Edición de «AngularJS»

{{Ficha de software
|nombre                      =  AngularJS
|logo                        = Angularjsoldicon.png
|desarrollador               = [[Google Inc.]], la comunidad.
|autor                       = 
|modelo_desarrollo           = [[Código abierto]]
|lanzamiento                 = {{fecha de lanzamiento|20|10|2010}}
|web_lanzamiento             = https://github.com/angular/angular.js/releases/tag/v1.6.8
|última_versión              = 1.8.3
|fecha_última_versión        = {{fecha de lanzamiento|8|4|2022}}
|web_última_versión          = https://code.angularjs.org/1.8.3/docs/guide
|género                      = [[JavaScript]], [[Single-page application]] Framework 
|lenguaje_programación       = [[JavaScript]]
|plataforma                  = [[Multiplataforma]]
|licencia                    = [[Licencia MIT|MIT]]
|estado                      = inactivo
|español                     = no
|sitio_web                   = {{url|http://www.angularjs.org/}}
}}
'''AngularJS''' (comúnmente llamado '''Angular.js''' o '''AngularJS 1'''), es un ''[[framework]]'' de [[JavaScript]] de [[código abierto]], mantenido por [[Google]], que se utiliza para crear y mantener [[aplicación web|aplicaciones web]] [[Single-page application|de una sola página]]. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de [[Modelo Vista Controlador]] (MVC), en un esfuerzo para hacer que el desarrollo y las [[Pruebas de software|pruebas]] sean más fáciles.

La biblioteca lee el [[HTML]] que contiene atributos de las etiquetas personalizadas adicionales, entonces obedece a las directivas de los atributos personalizados, y une las piezas de entrada o salida de la página a un modelo representado por las variables estándar de JavaScript. Los valores de las variables de JavaScript se pueden configurar manualmente, o recuperados de los recursos [[JSON]] estáticos o dinámicos.

AngularJS se puede combinar con el entorno en tiempo de ejecución [[Node.js]], el ''framework'' para servidor [[Express.js]] y la base de datos [[MongoDB]] para formar el conjunto [[MEAN]].

== AngularJS ==
AngularJS está construido en torno a la creencia de que la [[programación declarativa]] es la que debe utilizarse para generar [[Interfaz de usuario|interfaces de usuario]] y enlazar [[Componente de software|componentes de software]], mientras que la [[programación imperativa]] es excelente para expresar la [[lógica de negocio]].<ref>{{cita web |url=https://docs.angularjs.org/guide/introduction |título=What Is Angular? |deadurl=no |fechaacceso=12 de febrero de 2013|idioma=en}}</ref> Este framework adapta y amplía el HTML tradicional para servir mejor [[contenido dinámico]] a través de un ''[[data binding]]'' bidireccional que permite la sincronización automática de modelos y vistas. Como resultado, AngularJS pone menos énfasis en la manipulación del [[Document Object Model|DOM]] y mejora la testeabilidad y el rendimiento.

Objetivos de diseño:
* [[Separación de conceptos|Disociar]] la manipulación del DOM de la lógica de la aplicación. Esto mejora la capacidad de prueba del código.
* Considerar a las [[pruebas de software|pruebas]] de la aplicación como iguales en importancia a la escritura de la aplicación. La dificultad de las pruebas se ve reducida drásticamente por la forma en que el código está estructurado.
* Disociar el lado del cliente de una aplicación del lado del servidor. Esto permite que el trabajo de desarrollo avance en paralelo, y permite la reutilización de ambos lados.
* Guiar a los desarrolladores a través de todo el proceso del desarrollo de una aplicación: desde el diseño de la [[interfaz de usuario]], a través de la escritura de la lógica del negocio, hasta las pruebas.

Angular sigue el patrón MVVM (Model View View-Model) de [[ingeniería de software]] y alienta la articulación flexible entre la presentación, datos y componentes lógicos. Con el uso de la [[inyección de dependencias]], Angular lleva servicios tradicionales del lado del servidor, tales como controladores dependientes de la vista, a las aplicaciones web del lado del cliente. En consecuencia, gran parte de la carga en el backend se reduce, lo que conlleva a aplicaciones web mucho más ligeras.

== Directivas en AngularJS ==

Las directivas son marcas en los elementos del árbol DOM, en los nodos del HTML, que indican al compilador de Angular que debe asignar cierto comportamiento a dichos elementos o transformarlos según corresponda. Son útiles para definir nuevos pedazos de código html —como botones o, por ejemplo— un footer completo, como también para crear cosas más complejas que incluyan funciones o variables dinámicas definidas directamente en el DOM.

En cuanto a la tipología nos podemos encontrar con 2 tipos de directivas: Las existentes(nativas de angularjs); y las propias, que son aquellas directivas que creamos nosotros para un uso más personalizado.<div ng-controller="miControlador">

=== Directivas Nativas ===

Algunas directivas nativas que podemos encontrar en angularjs son:
* ngApp (ng-app)
* ngController (ng-controller)
* ngModel (ng-model)
* ngClick (ng-click)
* ngInit (ng-init)
* ngChange (ng-change)
* ngShow (ng-show) | ngHide (ng-hide)
* ngBind (ng-bind)

=== ngApp (ng-app) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Es la directiva encargada de auto arrancar una aplicación Angular, indica el elemento raíz y se debe colocar como atributo en la etiqueta que quieres que sea la raíz de la aplicación. 

La directiva ngApp la declaramos de la siguiente manera:
 <code><html ng-app></code>
ngApp puede contener un módulo de AngularJS, y se declara de la siguiente manera:
 <code><html ng-app="nombre_del_modulo"></code>

=== ngController (ng-controller) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Es la directiva que permite indicarle a la vista donde trabajará nuestro controlador y enlazar un $scope, todo modelo que esté dentro del ámbito de la directiva podrá ser accedido desde el controlador asignado. ngController se declara de la siguiente manera:
 <code><body></code>
    <code><nowiki><div ng-controller="nombre_de_controlador"></nowiki></code>
       <code><nowiki><h1>Hola AngularJS desde @frontendlabs</h1></nowiki></code>
    <code><nowiki></div></nowiki></code> 
 <code><nowiki></body></nowiki></code>

=== ngModel (ng-model) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Es la directiva que representa el modelo o dato, permite obtener la información ingresada por el usuario en algún elemento del formulario, sea un input, select o textarea. Si desea obtener el texto que un usuario ingresa en un input, solo bastará asociarle un modelo y éste podrá ser accedido tanto en el controlador como la vista mediante el nombre del modelo. 

Veamos cómo funciona esto:
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><label>Ingrese su nombre</label></code>
       <code><input type="text" ng-model="nombre"></code>
       <code><nowiki><span>Hola {{nombre}}</nowiki><nowiki></span></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code></body></code>
En el momento en que comencemos a escribir en el input, iremos viendo como se refleja lo escrito dentro del span, esto debido al principio “Two-Way data binding”, por otro lado en el controlador también tenemos acceso al modelo mediante $scope.nombre.

=== ngClick (ng-click) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Esta directiva trabaja directamente relacionado al evento click, se le puede asociar alguna funcionalidad en cuanto el usuario haga click sobre algún elemento. 

Como ejemplo veamos el siguiente código, dentro del html creamos un botón al cual le asociamos la directiva ng-click, en cuanto se detecte el evento se realizará la funcionalidad que tengamos en el método enviar(), que probablemente enviemos el nombre hacia algún servidor o la guardemos en un array:
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><label>Ingrese su nombre</label></code>
       <code><input type="text" ng-model="nombre"></code>
       <code><button ng-click="enviar()">Enviar</button></code>
    <code><nowiki></div></nowiki></code>
 <code><nowiki></body></nowiki></code>

=== ngInit (ng-init) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Esta directiva permite evaluar una expresión en el scope donde se está trabajando; veamos un ejemplo de cómo funciona:
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><nowiki><div></nowiki></code>
          <code><button ng-click="count = count + 1" ng-init="count = 0">Enviar</button></code>
          <code><nowiki><span>{{count}}</nowiki><nowiki></span></nowiki></code>
       <code><nowiki></div></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code></body></code>
=== ngRepeat (ng-repeat) ===
<div ng-controller="nombre_de_controlador"><div ng-controller="miControlador">
Esta directiva permite iterar una colección de datos, generar un template por cada elemento de la colección y pintarlo en la vista, cada template o plantilla recibe su propio ámbito ($scope). 

Vemos en el siguiente ejemplo, como inicializamos una variable que contiene una colección de objetos y luego mediante la directiva ng-repeat iteramos la colección y pintamos una etiqueta “li” por cada elemento de la colección mostrando tanto el nombre como la edad de cada alumno:
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
    <code><div ng-init="alumnos = [</code>
       <code>{nombre:'Paul', edad:12},</code>
       <code>{nombre:'Carlos', edad:13},</code>
       <code>{nombre:'Jan', edad:14},</code>
       <code>{nombre:'Ana', edad:15},</code>
       <code>{nombre:'Victor', edad:16}</code>
       <code>]"></code>
          <code><nowiki><ul></nowiki></code>
             <code><nowiki><li ng-repeat="alumno in alumnos">{{alumno.nombre}}</nowiki>: <nowiki>{{alumno.edad}}</nowiki> años<nowiki></li></nowiki></code>
          <code><nowiki></ul></nowiki></code>
       <code><nowiki></div></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code><nowiki></body></nowiki></code>

== ngChange (ng-change) ==
Esta directiva detecta cualquier cambio que se produzca dentro de una etiqueta de entrada, sean inputs, checkbox, etc., la forma de usarla es la siguiente. 

En el lado de la vista tenemos dos opciones a marcar, si esta a favor o en contra, lo cual incrementará o restará las votaciones según sea el caso, veamos:
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><input type="checkbox" ng-model="total" ng-change="aFavor()"> A favor</code>
       <code><input type="checkbox" ng-model="total" ng-change="enContra()"> En contra</code>
       <code><nowiki><h3>Total Votos: {{total}}</nowiki><nowiki></h3></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code></body></code>
En el lado del controlador sería de la siguiente manera:
 <code>app.controller('miControlador', function($scope){</code>
    <code>$scope.total = 0;</code>
    <code>$scope.aFavor = function (){</code>
       <code>$scope.total++;</code>
    <code>};</code>
    <code>$scope.enContra = function (){</code>
       <code>$scope.total--;</code>
    <code>};</code>
 <code>});</code>

== ngShow (ng-show) | ngHide (ng-hide) ==
Estas directivas permiten mostrar y ocultar alguna parte de la vista según la condición que le asignemos. Como seguramente todos ya deben saber ngShow permite mostrar y ngHide permite ocultar, veamos un ejemplo sencillo de como trabajan estas dos directivas.

Tenemos dos opciones “mostrar” y “ocultar”, y el mensaje a mostrar, como vemos en el código tenemos los dos checkbox y los dos mensajes, uno de los mensajes con la directiva ng-show y la otra con ng-hide, lo que nos indica que en cuanto “dato1″ sea true (esté marcada) se mostrará en caso contrario se ocultará, de forma inversa en el segundo mensaje, donde en caso “dato2″ sea true se ocultará y en caso contrario se mostrará.

En primera instancia al estar ambos sin check, estarán en estado false, por lo cual el único mensaje que se mostrará es el segundo.
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><input type="checkbox" ng-model="dato1"> Mostrar</code>
       <code><input type="checkbox" ng-model="dato2"> Ocultar</code>
       <code><nowiki><h3 ng-show="dato1">@frontendlabs 1</h3></nowiki></code>
       <code><nowiki><h3 ng-hide="dato2">@frontendlabs 2</h3></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code><nowiki></body></nowiki></code>

== ngBind (ng-bind) ==
Esta directiva cumple la misma funcionalidad que las llaves , sin embargo, ng-bind tiene una mejor performance en cuanto a tiempo. En el siguiente ejemplo vemos la forma de uso, y tanto  como ng-bind muestran el texto que se ingresa en la caja de texto.
 <code><body></code>
    <code><nowiki><div ng-controller="miControlador"></nowiki></code>
       <code><input type="text" ng-model="nombre"></code>
       <code><nowiki><span>{{nombre}}</nowiki><nowiki></span></nowiki></code>
       <code><nowiki></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code></body></code>
Existen muchas más directivas, las cuales podrán encontrar en la [https://docs.angularjs.org/guide Documentación oficial de AngularJS]

== Directivas Propias ==
<div ng-controller="nombre_de_controlador">
Pese a que en angular se han implementado todas las posibles directivas, siempre podremos optar a crear nuestra propia directiva y es por esto que en AngularJS nos facilitan esta tarea.

Este es un ejemplo simple para poder implementar nuestra directiva.
 <code>var app = angular.module('MiModulo',[]);</code>
 <code>app.controller('MiControlador', function($scope){</code>
   <code>$scope.cliente = {</code>
     <code>nombre: 'Jhon',</code>
     <code>direccion: 'Av. Jose pardo 481, Miraflores, Lima, Perú'</code>
   <code>};</code>
 <code>});</code>
 
 ''<code>//Aquí creamos la directiva</code>''
 <code>app.directive('miCliente', function() {</code>
   <code>return {</code>
     <code>template: 'Nombre: <nowiki>{{cliente.nombre}}</nowiki> Dirección: <nowiki>{{cliente.direccion}}</nowiki>'</code>
   <code>};</code>
 <code>});</code>
En la parte de la vista usaríamos nuestra directiva así:
 <code><body></code>
    <code><nowiki><div ng-controller="MiControlador"></nowiki></code>
       <code><nowiki></nowiki></code>
    <code><nowiki></div></nowiki></code>
 <code></body></code>
Otra forma de usar nuestra directiva sería usarlo como etiqueta.<div ng-controller="miControlador">

== Referencias ==
{{listaref}}

== Enlaces externos ==
{{Commonscat|AngularJS}}
* [https://www.angularjs.org/ Sitio oficial]
* [https://frontendlabs.io/2287--aprendiendo-directivas-en-angularjs Aprendiendo Directivas] {{Wayback|url=https://frontendlabs.io/2287--aprendiendo-directivas-en-angularjs |date=20160616150534 }}
* [https://offing.es/las-7-razones-para-utilizar-angular-4-en-tus-proyectos-de-desarrollo-web/ Ventajas de utilizar Angular en proyectos de desarrollo web]
* [https://www.campusmvp.es/recursos/post/las-10-principales-diferencias-entre-angularjs-y-angular.aspx Diferencias entre AngularJS y Angular]
{{Control de autoridades}}
[[Categoría:Código abierto]]
[[Categoría:Frameworks para JavaScript]]