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
Feliz Codeada!
FIN
angularjs-101
By Heber López
angularjs-101
Charla introductoria de AngularJS
- 1,195