Framework Angular

FrameWork Angular

Integrantes:Rafael Antonio Cordero Tamara Bayona

Historia

Angular JS comenzó a ser desarrollado en 2009 por Misko Hevery, originalmente era un servicio de almacenamiento online de archivos JSON donde el cobro dependía del peso en megabytes de cada archivo. Tiempo después abandonó el proyecto y relanzó angular como un proyecto open-so urce.

¿Que es angular?

Angular es un Framework de JavaScript de código abierto mantenido por Google que se utiliza para crear y mantener aplicaciones web de una sola página, su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de modelo vista controlador.

¿Que puedo hacer con angular?

Con angular se puede hacer prácticamente todo lo que se puede hacer con HTML, CSS y JavaScript, pero de manera más óptima. Por ejemplo, juegos, sistema de gestión, landing page y sitios web en general.

Lenguaje

El lenguaje principal de programación de Angular es TypeScript, y así toda la sintaxis y el modo de hacer las cosas en el código es el mismo, lo que añade coherencia y consistencia a la información, permitiendo, por ejemplo, la incorporación de nuevos programadores, en caso de ser necesarios, ya que pueden continuar su trabajo sin excesiva dificultad.

¿Porque usar angular?

No hace falta aclararlo mucho, básicamente es intuitivo, está desarrollado en type script, se basa en componentes y hace mucho más fácil y óptima la reutilización de código, es sustentable, es decir, se mantiene a través del tiempo, cosa que con JavaScript nativo siempre fue y actualmente sigue siendo difícil y por último tiene una gran variedad de soportes de herramientas y una comunidad gigante para ayudar a resolver tus dudas junto a un mercado con una salida laboral increíblemente grande.

Softwares que utilizan angular

GitHub (foro), Google, Crunchbase, Nike, Xbox, Udacity , YoutubeTV, Firebase, AT&T y Adobe

Instalación Angular

Primero se debe contar con la instalación de Node, para esto se accede primero a la página oficial de Node.

Una vez descargado comenzamos con la instalación, apretamos next a todo.

Se selecciona la opción dependiendo del sistema operativo que poseamos y la descargamos.

Aceptamos términos y condiciones, así sucesivamente hasta que nos llegue a salir la opción de "install".

Procedemos a la instalación.

Y finalizamos.

Vamos a verificar la instalación abriendo PowerShell en el sistema, una vez ingresado ahí escribimos "NODE --VERSIÓN" y nos debería salir la versión de Node, también verificamos la NPM y nos debería también salir una versión.

Esto lo pegamos en el PowerShell, presionamos enter, luego enter otra vez para aceptar.

Una vez que salgan correctamente las dos versiones, ingresamos a la página oficial de Angular y copiamos el primer comando que sale.

Escribió "ng" y nos debería aparecer todas estas series de comando, de esta forma ya sabemos que ya está instalada la aplicación en el ordenador.

11

Debe aparecernos así después de un rato.

10

Esto es básicamente código HTML y una expresión en Angular JS. Aunque hay que considerar que la vista no se conecta directamente con el modelo, sino con una variable global creada desde el controlador que comentaré ahora.

Ejemplo de MVC en AngularJS

La siguiente parte será la vista, que es la representación de los datos del modelo.

Esto es básicamente código HTML y una expresión en AngularJS. Aunque hay que considerar que la vista no se conecta directamente con el modelo, sino con una variable global creada desde el controlador que comentaré ahora.

Hay que tener en cuenta que el modelo representa cualquier dato, así que un array puede valer perfectamente.

En un caso real, este array estaría compuesto por datos obtenidos de alguna base de datos, pero para este ejemplo no es preciso complicarlo.

Ahora lo que realmente importa y hace que funcione todo, el controlador, que será MiControlador (El nombre empieza con mayúscula y cada palabra tiene la primera letra en mayúscula).

Asignamos los datos del modelo a la propiedad misUsuarios que está en el objeto $scope. Este objeto permite mostrar los datos del modelo en la vista. Es proporcionado por el controlador gracias al framework de Angular y lo único que tenemos que hacer es asignarle los datos que queremos que se muestren en la vista.

Y en la parte del controlador es precisa la parte que cambia en versiones posteriores a la 1.3. Para poder usar el controlador es preciso definirlo a través de un módulo, el cual explicaré en otro post.

En angular.module específico el nombre del módulo («aplicación») y dentro de la función controller defino el nombre del controlador y la función anónima el cual se le pasa el objeto $scope.

El código completo sería el siguiente

ng-app indica desde donde comienza la aplicación con Angular. En este ejemplo se llama desde el <body> para que afecte a toda la página y además llamamos al controlador miControlador. Sin estos 2 atributos, el código no funcionaría.

Fin!