ngVenezuela

¿Eres nuevo con Angular? Este repo te guiará un poco sobre cómo empezar a conocer este maravilloso framework. Aquí podrás encontrar:

• Conceptos Básicos.
• Códigos de Ejemplo Documentados.
• Enlaces y Referecias a Librerias.
• Recursos en Linea.
• Libros

Somos una comunidad que promueve el aprendizaje colectivo, con miembros dispuestos a enseñar, aprender y compartir conocimientos. Queremos invitarte a que formes parte de ella. Encuentranos en nuetsras redes:

• Google Groups : Tienes alguna duda sobre el framework ven y participa en nuestro foro.
• Telegram: Ḿantente en contacto con los demas mienbros, enterete y comparte recursos y enlaces de interes con nosotros.
• Github: Conoce, aprende, participa y comparte aportes de la comunidad para la comunidad.

Que necesito para comenzar a Aprender AngularJS

• Conocimientos de Javascript *
• Tu editor de Texto o IDE Favorito (Como Sublime,Atom o NotePad)
• Un Navegador Web.
• Motivación por aprender y dominar este magnifico Framework

Nota: Te recomendamos antes de aprender un framework dominar el lenguaje en el que esta basado para aprovechar todas sus bondades.

Recursos para aprender Javascript

• En Español:

  • Codecademy : Un excelente recurso para aprender lo básico del lenguaje.
  • Guía de Javascript de MDN: la gente de Mozilla nos ofrece esta excelente guía sobre el lenguaje.

• English:

  • JavaScript for Cats: So easy your human companion could do it too !

Primeros Pasos

Conceptos Basicos

• ¿Que es un Framework?
• ¿Que es AngularJS?
• ¿Ventajas de usar AngularJS?
• Instalar AngularJS
• Directives (Directivas )
• Module (Modulos)
• Scope
• Controllers (Controladores)
• Models (Modelos)
• Filters (Filtros)
• Data Binding
• Dependecy Injection (Inyección de Dependencias)
• Services (Servicios)
• Templates (Plantillas)
• Forms (Formularios)

Volver

Que Es Un Framework

Un Framework es un entorno o ambiente de trabajo para desarrollo; dependiendo del lenguaje normalmente integra componentes que facilitan el desarrollo de aplicaciones como el soporte de programa, bibliotecas, plantillas y más.

Fuente: Nubelo Blog

Volver Indice

Que es AngularJS

AngularJS es un framework javascript estructural para el desarrollo de aplicaciones web dinamicas del lado del cliente, basado en el patrón de diseño MVVM (Modelo - Vista - Vista - Modelo) y el desarrollo de sitios SPA (Aplicaciones de una sola página). AngularJs te permite extender la sintaxis de HTML para expresar clara y concisa tus componentes de aplicacion, esto es gracias a que Angular le enseña al navegador una nueva sintaxis a través de la contrucción de directivas, así como también de contar con características como el Data-Binding y Dependecy Injection puede ahorrarte líneas de código que de otra forma tendrías que escribir. Todo esto ocurre dentro del navegador, haciendo de AngularJS el compañero ideal de cualquier tecnología del lado del servidor. Volver Indice

Ventajas de usar AngularJS

Volver Indice

Instalar AngularJS

Para comenzar a usar Angular en tus proyectos tienes diferentes opciones:

Desde CDN:

• Puede comenzar a usar angular desde un cdn agregando esta linea a tu HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/{version}/angular.min.js"></script>

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

• Debes estar conectado siempre a internet para el desarrollo o puedes ir la direccion en el CDN y copiar el contenido en un archivo de texto plano y guardalo como angular.min.js y agregar a tu html.

<script src="js/angular.min.js"></script>

Version zip

• Puedes ir a la pagina oficial de Angular al elegir la opcion de download y descargar la version .zip tendras la opcion minificada y los modulos adicionales.

Usando Bower

$ bower install angular#version

ejemplo:

$ bower install angular#1.5.3

Usando NPM

• Tambien puedes usar npm para tener Angular en tus proyectos:

$ npm install angular@version

ejemplo:

$ npm install angular@1.5.3

Volver Indice

Directives

Volver Indice

Module

Volver Indice

Scope

Volver Indice

Controllers

Volver Indice

Models

Volver Indice

Filters

Un filtro da formato al valor de una expresion para la visualizacion de los usuarios. Los filtros pueden ser usados en las plantillas de vistas, controladores o servicios. AngularJS cuenta con vaios filtros predeterminados para dar formato como el caso de modena (currency), fecha (Date), mayusculas (uppercase), minisculas (lowercase), json (json) e incluso nos brinda la facilidad de crear nuestros propios filtros. Para aplicar filtros lo podemos hacer de la siguiente forma:

{{ valor | filtro }}

{{ 100 | currency }}

puedes aplicar varios filtros con la siguiente sintaxis:

{{ valor | filtro1:arg1:arg2:argN }}

Puedes ver un pequeno ejemplo de codigo AQUI. Para crear tus propios filtros puedes guiarte por este ejemplo en la documentacion oficial

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = "";
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  };
})

primero se define el modulo de nuestra aplicación angular, luego se usa el método filter el cual recibe como primer parámetro el nombre de nuestro filtro personalizado y como segundo una función que retorna una nueva función en donde se especificaran los argumentos y la lógica que definirá nuestro nuevo formato. Volver Indice

Data Binding

Data-bindig en aplicaciones Angular hace referencia a la sincronización automática entre los los componentes del modelo (Model) y las vista (Views). Lo cual conlleva a que todo cambio realizado en el modelo estos serán reflejados en la vista y viceversa. Este proceso es conocido como Two-Way Data Binding, donde podemos considerar la vista como una proyección instantánea del modelo, lo que deja a el controlador (controller) completamente separador de la vista e inconsciente de esta, facilitando las tareas de testing debido a que testear el controlador de forma aislada sin la vista y lo relacioando con dependecias DOM/Browser. Volver Indice

Dependecy Injection

Volver Indice

Services

Volver Indice

Templates

Volver Indice

Forms

Volver Indice

Modulos Adicionales

• Angular-resource: el módulo ngResource provee soporte para interactuar con servicios REST-Full por medio del servicio $resource.
• Angular-route: el modulo ngRoute provee servicios de enrutemiento y enlazado profundo, asi como tambien directivas para Aplicaciones Angular.
• UI Bootstrap: el módulo UI Bootstrap provee de una gran cantidad de útiles directivas para nuestros proyectos.

Volver

Recursos En Linea

• Guia para Desarrolladores oficial de AngularJS (Inglés)
• Referencia del API oficial de AngularJS (Inglés)
• Curso de AngularJS en codecademy (Inglés)
• Shaping up with angular.JS (Inglés)

Volver

Libros

• Etiqueta "angular" en www.allitebooks.com
• Desarrollo de aplicaciones web con AngularJS

Volver