Introduccion a Angular.JS

Christian Gill / @gillchristian

Contenido

Intro
Patron MVW
Data binding
Modulos
Componentes del framework
Dependency Injection
Ejemplos practicos
Recursos

Model View Que?

Modelo

Contenido, informacion (server, DB)

Vista

Interface donde se presenta la informacion (modelo)

Whatever

Relaciona o une el modelo con la vista

Controller
ViewModel
Presenter

Lo que sea significa "lo que sea que te funcione mejor".

- Igor Minar, Angular team

Data binding

Data-binding es la sincronización automática de datos entre los componentes del modelo y la vista.

Módulos

Un modulo define una aplicaccion.
Contiene las diferentes partes de la aplicacion (controller, directives, services, etc.), estas partes no pueden ser definidas fuera de un modulo.

Creacion vs Referencia

// --- app.js ---
(function(){
  angular.module('appModule', []); // creacion
})();

// --- app.controller.js ---
(function(){
  angular.module('appModule'); // referencia
})();


// --- evitar ---

// --- app.js ---
var app = angular.module('appModule', []); // creacion

// --- app.controller.js ---
app.module('appModule'); // referencia

Run y Config

Config: configurar los providers antes de que sean creados.
Run: el código que debe ejecutar para poner en marcha la aplicación. Ejecuta después de que todos los servicios se han configurado y el inyector se ha creado.

Orden de ejecucion

config()
run()
controller()

Services:

Provider
Service
Factory
Constant
Value

Componentes

Objectos especializados:

Creados via Factory
- Animation
- Directive
- Filter
Creados via Constructor
- Controller

Controller

Es definido por un constructor y usado para aumentar el Scope:

Set up del stado inicial del $scope
Darle nuevo comportamiento al $scope

Es un service construido por una funcion que puede recibir como parametros a otros services, las instancias de este service son el objeto que la funcion devuelve.

Uso:

Manejo de la logica de la applicacion
Comunicacion entre Controllers

Factory

Permiten expandir el DOM agregando nuevas funcionalidades.

Todo el manejo del DOM deberia hacerce en las directives.

Directives

Inyeccion de dependencias

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

El objeto recibe las dependencias, en lugar de crearlas. Se trata de la eliminación de las dependencias no modificables (hardcodeadas), por lo que es posible cambiarlas cuando sea necesario.

Creación separada del consumo.
Sólo es necesario saber como usar la dependencia.
Permiter cambiarlas facilmente cuando se necesita.
Desarrollo concurrente/independiente de la dependencia y la entidad dependiente.
Permitir la inyección mocks para testeo.

Por que?

Se puede usar tanto al definir componentes como en los bloques run y config de un modulo.

Donde?

Services, directives, filters, y animations: se les inyecta services y values.

angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

Controllers, se les inyecta services y values.

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', 
    function($scope, dep1, dep2) {
      ...
      $scope.aMethod = function() {
        ...
      }
      ...
    }]);

Al metodo run se le inyecta services, values y constants. Pero no providers.

Al metodo config se le inyecta providers y constants. Pero no services ni values.

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}]);

Modulos como contenedor de dependencias

angular.module('myModule', ['myModule.services', 'myModule.controllers']);

angular.module('myModule.services', [])
  .services('productsService', productsService);


angular.module('myModule.controllers', ['productsService'])
  .controller('ProductController' ['productsService',
    function(productsService) {

    }
  ]);