Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS Fácil: Introducción

Jesús Lucas
  • Escrito por Jesús Lucas el 27 de Junio de 2014
  • <1 min de lectura | Frontend
Aprender AngularJS Fácil: Introducción

AngularJS es un framework de JavaScript. Es una librería escrita en JavaScript y puede ser agregada a una página HTML con una etiqueta <script> . AngularJS extiende atributos HTML con directivas, y une datos al HTML con expresiones.

Es una buena idea colocar los scripts en la parte inferior del elemento <body> , justo antes de la etiqueta </body> . Esto mejora la carga de la página, ya que la carga de HTML no está bloqueado por los scripts de carga.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>

AngularJS en HTML

AngularJS extiende HTML con ng-directives (Directivas de AngularJS), y enlaza datos a HTML con expresiones {{}} Ejemplo:
<div ng-app="">
<p>Mi primera expresion: {{ 5 + 5 }}</p>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Explicación del ejemplo: AngularJS se iniciar automáticamente cuando la página ha cargado. La directiva ng-app le dice a AngularJS que el elemento <div> es el "propietario" de una aplicación AngularJS. las llaves {{ }} definen una expresión AngularJS. La expresión 5 + 5 se evalua como 10 .
Si eliminas la directiva ng-app , el HTMLmostrará la expresión tal como es, sin resolverla.

¿Qué es AngularJS?

  • AngularJS hace que sea fácil de desarrollar aplicaciones web modernas de una sola página (ZEPA).
  • AngularJS integra datos de aplicación a elementos HTML.
  • AngularJS puede clonar y repetir elementos HTML.
  • AngularJS puede ocultar y mostrar elementos HTML.
  • AngularJS puede añadir código "detrás" de los elementos HTML.
  • AngularJS admite la validación de entrada.

Expresiones en AngularJS

Las expresiones en AngularJS se escriben dentro de llaves dobles: {{expresión}} . Las expresiones en AngularJS enlaza datos a elementos HTML. AngularJS mostrará el resultado de las expresiones exactamente donde se escribió la expresión. Las expresiones en AngularJS se parecen mucho a las expresiones de JavaScript. Las expresiones en AngularJS pueden contener literales, operadores y variables (al igual JavaScript). Ejemplo:
{{nombre + "" + apellido}}

Directivas de AngularJS

Las directivas en AngularJS son atributos HTML con el prefijo ng . La directiva ng-app inicializa una aplicación AngularJS. La directiva ng-init inicializa datos de AngularJS. Ejemplo:
<div ng-app="" ng-init="nombre='Paco'">

<p>El nombre es: {{ nombre }}</p>

</div>
Si queremos que el código sea HTML5 Válido podemos usar también:
<div data-ng-app="" data-ng-init="nombre='Paco'">

<p>El nombre es: {{ nombre }}</p>

</div>
HTML5 permite atributos extendidos (hechos por ti), a partir de data- . Los atributos de AngularJS comienzan con ng- , pero también se puede usar data-ng- , para hacer que su página esté validada con HTML5.

Enlace de Datos en AngularJS

La expresión {{ nombre }}, en el ejemplo de arriba, es una expresión de enlace de datos de AngularJS. El enlace de datos en AngularJS, sincroniza las expresiones de AngularJS con datos de AngularJS. Si no te gusta que la expresión {{ nombre }} sea visible al comienzo, puedes usar la directiva ng-bind en su lugar:
<div ng-app="" ng-init="nombre='Paco'">

<p>El nombre es: <span ng-bind="nombre"></span></p>

</div>

<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>
  <p checked="" class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
Os dejo aquí un tutorial que he encontrado en Github bastante interesante y completo: Fuente: http://tombatossals.github.io/angularjs-tutorial/#/

Ver Indice Tutorial

Descargar Tutorial en PDF de AngularJS

Compártelo con los botones sociales que aparecen a continuación y podrás descargar el tutorial de AngularJS

A continuación tenéis el enlace al Tutorial en PDF de AngularJS

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars