[angularjs] from angular to mobile in 30 minutes
Post on 02-Dec-2014
352 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.”
¡Quiero ser un superhéroe!
Globant Proprietary | Confidential Information
¡Quiero ser un superhéroe!
Globant Proprietary | Confidential Information
Controller
Data Binding
POJO's
Deep linking
Form ValidationServer
Communication
Directives
Components
Localization
Embeddable
Injectable Testable
Conocé tus superpoderes
Globant Proprietary | Confidential Information
$scope
Controllers
Views
Dependency Injection
Conocé tus superpoderes
POJO's (Plain Old JavaScript Object)
Modelo
Conocé tus superpoderes | $scope
$scope
Globant Proprietary | Confidential Information
No se rige por UAP (Uniform Access Principle)
Flexible
Puente de comunicación
Nexo
$rootScope
Conocé tus superpoderes
Permite definir el comportamiento detras del DOM
Comportamiento
Conocé tus superpoderes | Comtroller
Globant Proprietary | Confidential Information
Mantiene el orden de forma pristina y legible
Encapsulación
Robusto pero sin la necesidad de boilerplate
Expresividad
Controller
Conocé tus superpoderes
Las vistas llevan HTML de lo más común
HTML
Conocé tus superpoderes | View
Globant Proprietary | Confidential Information
Potente motor de expresiones flexibls
Versatilidad
Agregar componentes especializados nunca fue más fácil
Extensible
View
Conocé tus superpoderes
Simplicidad para seleccionar componentes
Simple
Conocé tus superpoderes | Dependency Injection
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
“Lo esencial es invisible a los ojos.”«Le pettit prince», Antoine de Saint-Exupéry
Tomando el control
Globant Proprietary | Confidential Information
<!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> <!-- We have some hidden awesomeness here --> </body></html>
Tomando el control
Globant Proprietary | Confidential Information
<!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> <!-- We have some hidden awesomeness here --> </body></html>
Tomando el control
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
<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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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 };}]);
¡Aguzando la vista!
Globant Proprietary | Confidential Information
Filters Routes
Services Directives
¡Aguzando la vista!
Globant Proprietary | Confidential Information
Filters Dan formato a una expresión
Funcionan en controllers, views y services
Se pueden crear filtros custom
Ejemplos: currency date lowercase uppercase
¡Aguzando la vista!
Globant Proprietary | Confidential Information
Services Son singletons
Deben cumplir una tarea especifica
Sirven como medio de comunicación entre controllers
Ejemplos: $http $location $animation
¡Aguzando la vista!
Globant Proprietary | Confidential Information
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
¡Aguzando la vista!
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
function PasswordCtrl($scope) { $scope.password = ''; $scope.grade = function() { var size = $scope.password.length; if (size > 8) { $scope.strength = 'strong'; } else if (size > 3) { $scope.strength = 'medium'; } else { $scope.strength = 'weak'; } };}
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á!
Globant Proprietary | Confidential Information
Validation framework
AJAX support ($http & $resource)
Otros servicios ($apply, $digest, $watch y $q)
Q&A
Thank You
By yours truly
Thank You
@geronimogarcia
DarkThrone
geronimo.garcia@globant.com
top related