Shut up Santa!

Pantalla de espera hasta que arranca el evento

Notas del orador

¿Porqué debería aprenderlo?

Impacto que tuvo el primer desarrollo que hizo uso del framework AngularJS

6 meses, 3 dev, 17k lineas de código

3 semanas, 1 dev, 1.5k lineas de código

 

 

Notas del orador

Hola a lo Mundo Angular

<body ng-app>
    <input ng-model="compadrejo" type="text" />
    <h1>Hola {{compadrejo}}!</h1>
    <script src="libs/angular.min.js"></script>
</body>

ng-app inicia la aplicación y crea lo que vendría a ser el ambiente de ejecución global del framework llamado $rootScope

 

angular busca augumentar el lenguaje html mediante la extensión de su lógica

Notas del orador

Scopes / Ambientes

var variableDeScopeGlobal = "Hola";
function ejemplo(){
    var variableDeScopeLocal = variableDeScopeGlobal + "Mundo";
}
<body ng-app>
    <input ng-model="atributoDe$rootScope" type="text" />
    <h1>Hola {{atributoDe$rootScope}}!</h1>
    
    <div ng-controller="SaludoController">
        <input ng-model="atributoDeSaludoController" type="text" />
        <h1>Hola {{atributoDeSaludoController}}!</h1>
        <h1>Chau {{atributoDe$rootScope}}!</h1>
    </div>
    <script src="libs/angular.min.js"></script>
</body>

-> plnk <- a picar teclas se ha dicho

ng-app y el módulo principal de la aplicación

 

herencia prototipal de scopes

 

objetos, arrays y funciones trabajan por referencia

 

el resto de los tipos trabajan por valor

Notas del orador

Scopes, Colecciones y Métodos

  • ng-click: acceso a métodos del $scope
  • ng-if: crea y destruye dom(*) segun condición
  • ng-repeat: foreach en el dom
  • filter-filter: realiza una busqueda sobre la colección

uso de colecciones, filtros y algunas directivas básicas de angularjs

Notas del orador

Rutas y Servicios

&

dependencias modulares

 

definición de rutas

 

los servicios son singleton

 

servicios como forma de compartir datos y logica

Notas del orador

Best practices y tips

minificación y concatenación

 

evitar funciones en interpolaciones

 

objetos indexados en vez de arrays

 

archivo de definición de modulo

 

$timeout > $apply

Notas del orador

Repasando!

$rootScope es el Cletus de los $scope

$scope es el pegamento entre la

vista y el controlador

Los servicios son el pegamento entre controladores, filtros, directivas y + servicios

Proyecto ejemplo con buenas prácticas: https://github.com/HeberLZ/GDG-Client

Comparativa AngularJS - JQuery

https://github.com/GDGMendoza/ajs-event

Feliz Codeada!

FIN

angularjs-101

By Heber López

angularjs-101

Charla introductoria de AngularJS

  • 1,195