Ejemplo (Hello World)

Notar: attr ng-app, ng-model y expresión en {{ }}

Ejemplo (cont.)

Controllers

• Contiene sólo lógica de negocio
• Expone datos y funciones en objeto $scope, accesibles desde la vista.
• Se asocia al DOM desde la vista con la directiva ng-controller o desde module.config() a traves de los servicios de routing (p.e.: ngRoute o ui-router).

controllers (cont.)

angular.module('MyApp')
  .controller('MyCtrl', function($scope) {
    $scope.texto = 'Hello World';
    $scope.onButtonClick = function() {
			// modify $scope, use services, etc.
    };
  });

controllers (2-way data binding)

directives

• Angular.js nos permite extender HTML con nuevos elementos y atributos mediante directivas
  • Más específicamente, son "marcadores" en un elemento DOM (p.e.: atributos, nombre de elemento, comentario o clase CSS) que le indican al framework que asocie un comportamiento específico a ese elemento DOM y/o transforme ese elemento y sus hijos

Directives

directives

dependency injection

Patrón de diseño que se encarga de cómo los componentes obtienen acceso de sus dependencias. El servicio $injector es el encargado de la creación de estos componentes, resolver sus dependencias y proveerlos a otros componentes cuando sean requeridos.

DI es usado en todos lados a lo largo y ancho de una aplicación angular

dependency injection 2

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

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

dependency injection 3

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

dependency injection 4

Existen 3 formas de inyectar dependencias a un componente

• inline array annotation
  • app.controller('Ctrl', ['$scope', 'greeter', function($scope, greeter) {..}]);
  • es la recomendada
• a través de $inject
  • MyController.$inject = ['$scope', 'greeter'];
• Implícitamente. Podemos inyectar las dependencias simplemente agregando un parametro a la función con el nombre del componente.
  • Puede romperse al ejecutar un minifier o un obfuscator
  • Existen herramientas para pasarlo automáticamente al formato inline array
    • ng-annotate

Scopes

• Qué es el scope?
• • El scope es el objeto que se refiere al application model
  • Es el contexto de ejecución para las {{expressions}} en nuestra vista.
  • La API de scopes provee funciones para observar ($watch) cambios en el modelo y propagar eventos ($apply).

Scopes

Isolated scope en una directiva.

Scopes

scopes

unit tests

• DI facilita el testing porque podemos hacer mocks de cualquier dependencia al testear un componente.
• Herramientas para unit tests
  • Karma - programa de linea que inicia un browser y ejecuta los tests en su runtime.
  • Jasmine - framework de

unit tests

describe("sorting the list of users", function() {
  // individual tests go here
});

describe('sorting the list of users', function() {
  it('sorts in descending order by default', function() {
    // your test assertion goes here
  });
});

describe('sorting the list of users', function() {
  it('sorts in descending order by default', function() {
    var users = ['jack', 'igor', 'jeff'];
    var sorted = sortUsers(users);
    expect(sorted).toEqual(['jeff', 'jack', 'igor']);
  });
});

unit tests

Ejemplo grunt+karma+jasmine

e2e tests

El equipo de Angular.js ha construido una herramienta llamada protractor para ejecutar tests e2e.

• Protractor es un programa node.js que ejecuta tests e2e escritos en javascript
• Los tests usan el formato Jasmine

e2e tests

e2e tests (ejemplo)

describe('TODO list', function() {
  it('should filter results', function() {

    // Find the element with ng-model="user" and type "jacksparrow" into it
    element(by.model('user')).sendKeys('jacksparrow');

    // Find the first (and only) button on the page and click it
    element(by.css(':button')).click();

    // Verify that there are 10 tasks
    expect(element.all(by.repeater('task in tasks')).count()).toEqual(10);

    // Enter 'groceries' into the element with ng-model="filterText"
    element(by.model('filterText')).sendKeys('groceries');

    // Verify that now there is only one item in the task list
    expect(element.all(by.repeater('task in tasks')).count()).toEqual(1);
  });
});