Introducción a AngularJS, ¡Super Heróico!

AngularJS es un poderoso framework JavaScript de desarrollo de aplicaciones web en el lado cliente, apoyado por Google.
4.7 (26 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
202 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 20
  • Length 2.5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 Spanish

Course Description

AngularJS es un poderoso framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones 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 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áticas o dinámicas.

En este curso abordaremos AngularJS desde sus inicios, la forma de instalarlo en tu computadora y realizar el famoso y tradicional programa de "Hola Mundo". Un punto fundamental en este framework será el patrón MVC o Modelo-Vista-Controlador el cual nos dará una enorme fortaleza en nuestros desarrollos.

Sobre este marco crearemos los módulos, las directivas y servicios de daos equivalentes a los de AJAX, como es el servicio $http.

En la segunda parte nos dedicaremos a utilizar los mismos elementos para desarrollar una sencilla aplicación que comunicaremos a una base de datos de tipo MySQL para poder extraer y mostrar los datos en pantalla, cerrando así el aprendizaje básico al desarrollo de aplicaciones con AngularJS.

What are the requirements?

  • HTML y CSS
  • JavaScript
  • Conocimientos básicos de XML y JSON

What am I going to get from this course?

  • Instalar el framework AngularJS en su computadora
  • Realizar un programa de Hola Mundo
  • Comprender el patrón Modelo-Vista-Controlador
  • Realizar un modelo con AngularJS
  • Manejar la directiva ng-repeat
  • Utilizar el servicio $http de AngularJS
  • Aplicar los controladores de AngularJS

What is the target audience?

  • Desarrolladores Web
  • Diseñadores Web

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Introducción al curso de AngularJS
Preview
03:23
Section 1: Introducción a AngularJS
05:55
Creado por Miško Hevery y Adam Abrons en 2009, AngularJS es un “framework” de código abierto, del lado del cliente JavaScript. El nombre del “Angular” fue dado por Adam Abrons, y se inspiró en los símbolos angulares <> de los elementos HTML.
08:24
Instalación del framework AngularJS Bajar el archivo. Ligar el archivo por medio de la etiqueta
05:43
En este video introduciremos algunos de los principios del Framework para realizar un ejercicio equivalente al "hola Mundo" en otros lenguajes.
08:56
Por medio del patrón de diseño conocido como MVC, Model-View-Control podremos hacer aplicaciones mucho más grandes de forma ordenada y fáciles de mantener.
11:23
Crearemos archivos independientes con su “nameSpace” o nombre de espacio para evitar colisiones entre los nombres de las variables y de los objetos. Creamos un archivo nuevo. Escribimos la función del Controller. Nombramos la aplicación. Creamos un “nameSpacing”. Ligamos el namespace y el controlador. Llamamos al archivo por medio de una etiqueta
07:59
La directiva “ng-repeat” nos permitirá recorrer o iterar una colección, ya sea un arreglo, un arreglo de objetos u objetos tipo JSON, entre otros.
07:51
Con este servicio podremos cargar archivos externos en formato JSON. Nos permitirá detectar si la carga fue o no exitosa.
08:31
Los controladores son mucho más que un almacén de nuestra información. Ahora añadiremos una función y la llamaremos desde la “vista” (el archivo html).
Section 2: Las partes de AngularJS
09:31
  • Las expresiones “ligan” los datos con los elementos HTML.
  • Son similares a la directiva “ng-bind”.
  • Las expresiones en AngularJS pueden contener literales, variables y operadores.
  • Las expresiones se escriben entre dobles llaves: {‌{ }}
08:46
  • Con las directivas de AngularJS extendemos los atributos de las etiquetas HTML.
  • Las directivas inician con ng-
    • ng-app inicializa la aplicación con AngularJS
    • ng-init inicializa el valor de una variable.
    • ng-model liga un elemento HTML con un dato.
    • ng-repeat itera sobre un objeto.
08:43
  • Los controladores nos sirven para contener los datos de la aplicación.
  • Los controladores son Objetos tipo JavaScript.
  • La directiva ng-controller define los datos de una aplicación.
07:17
  • Los filtros se utilizan en AngularJS para transformar los datos.
  • Los filtros pueden ser añadidos a expresiones o directivas, por medio del símbolo pipe-line (|)
09:55
  • El servicio $http nos lee información remota.
  • $http.get(url) es la instrucción que lanza el servicio de lectura de datos remotos en formato JSON.
  • $http utiliza el objeto XMLHttpRequest de JavaScript.
07:47
  • A parte de las etiquetas de HTML para hacer una tabla, AngularJS tiene algunas directivas que nos pueden ser de utilidad.
  • $index: no da un número consecutivo
  • $even y $odd: nos dan el renglón par o impar de una tabla.
09:42
  • Por medio de AngularJS podemos manipular elementos HTML con las siguientes directivas:
    • ng-disabled: desactiva un elemento HTML
    • ng-show: muestra un elemento HTML
    • ng-hide: oculta un elemento HTML
    • ng-click: evento de cuando un elemento es seleccionado con el cursor
17:23
  • $dirty: el usuario está utilizando el campo.
  • $pristine: el usuario no utiliza el campo.
  • $valid: el contenido es válido.
  • $invalid: el contenido no es válido.
05:44
  • Las funciones del API se llaman a partir del objeto “angular”.
  • Algunas de las funciones del API incluyen:
    • angular.lowerCase()
    • angular.upperCase()
    • angular.isString()
    • angular.isNumber()
Section 3: Fin del curso
Despedida del curso AngularJS
01:36
Ejercicios del curso Introducción a AngularJS
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

Ready to start learning?
Take This Course