[angularjs] from angular to mobile in 30 minutes

ANGULARJS

DEC 2013

¡Quiero ser un superhéroe!

Globant Proprietary | Confidential Information

Angularjs.org

“AngularJS is a toolset for building the framework most suited

to your application development. It is fully extensible and

works well with other libraries.”

Controller

Data Binding

POJO's

Deep linking

Form ValidationServer

Communication

Directives

Components

Localization

Embeddable

Injectable Testable

Conocé tus superpoderes

$scope

Controllers

Dependency Injection

POJO's (Plain Old JavaScript Object)

Modelo

Conocé tus superpoderes | $scope

$scope

No se rige por UAP (Uniform Access Principle)

Flexible

Puente de comunicación

$rootScope

Permite definir el comportamiento detras del DOM

Comportamiento

Conocé tus superpoderes | Comtroller

Mantiene el orden de forma pristina y legible

Encapsulación

Robusto pero sin la necesidad de boilerplate

Expresividad

Controller

Las vistas llevan HTML de lo más común

Conocé tus superpoderes | View

Potente motor de expresiones flexibls

Versatilidad

Agregar componentes especializados nunca fue más fácil

Extensible

Simplicidad para seleccionar componentes

Simple

Conocé tus superpoderes | Dependency Injection

Todo se puede transformar en una depedencia inyectable

Modularizable

No más metodos main() que resultan ser tu peor pesadilla

Mantenible

DependencyInjection

Tomando el control

“Lo esencial es invisible a los ojos.”«Le pettit prince», Antoine de Saint-Exupéry

Tomando el control

<!doctype html><html ng-app> <head> <script src="js/angularjs-1.2.0.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body>  </body></html>

Tomando el control

<!doctype html><html ng-app> <head> <script src="js/angularjs-1.2.0.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body>  </body></html>

Tomando el control

<body> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> </div> </body>

Tomando el control

angular.module('todos').controller('TodoCtrl', ['$scope', function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { //More code };}]);

Tomando el control

¡Aguzando la vista!

Filters Routes

Services Directives

Filters Dan formato a una expresión

Funcionan en controllers, views y services

Se pueden crear filtros custom

Ejemplos: currency date lowercase uppercase

Services Son singletons

Deben cumplir una tarea especifica

Sirven como medio de comunicación entre controllers

Ejemplos: $http $location $animation

Es un servicio (ngRoute)

Enlaza views, controllers y urls

Maneja pasaje de parametros

Adicionalmente, ganamos deep-linking!

Ejemplos: $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCntl });

Routes

Directives Son marcadores especiales dentro del DOM

Pueden adoptar la forma de attributes, elements, css

Menejan el HTML compiler de AngularJS

Ejemplos: <pane> ng-click ng-switch ng-repeat

Una prueba de valor

Utiliza Karma Runner

Podemos usar cualquier testing framework (jasmine, chai, mocha)

Facilita inyectar dependencias y mock services

Unit tests y Tests End-to-End (E2E)

Unit Tests Tests End-to-End (E2E)

Una prueba de valor

var $scope = {};var pc = $controller('PasswordCtrl', { $scope: $scope });

$scope.password = 'abc';$scope.grade();expect($scope.strength).toEqual('weak');

describe('Buzz Client', function() { it('should filter results', function() { input('user').enter('jacksparrow'); element(':button').click(); expect(repeater('ul li').count()).toEqual(10); input('filterText').enter('Bees'); expect(repeater('ul li').count()).toEqual(1); });});

¡Al infinito y más allá!

Validation framework

AJAX support ($http & $resource)

Otros servicios ($apply, $digest, $watch y $q)

Thank You

By yours truly

Thank You

@geronimogarcia

DarkThrone

[email protected]

[angularjs] from angular to mobile in 30 minutes

Technology