Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Intro to tsql unit 14
Next
Download to read offline and view in fullscreen.

6

Share

Download to read offline

[AngularJS] From Angular to Mobile in 30 minutes

Download to read offline

By Gerónimo García (Software Designer Mobile
Studio @Globant)

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

[AngularJS] From Angular to Mobile in 30 minutes

  1. 1. ANGULARJS DEC 2013
  2. 2. ¡Quiero ser un superhéroe! “AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and Globant Proprietary | Confidential Information Angularjs.org works well with other libraries.”
  3. 3. ¡Quiero ser un superhéroe! Globant Proprietary | Confidential Information
  4. 4. ¡Quiero ser un superhéroe! Controller Injectable Testable Globant Proprietary | Confidential Information Data Binding POJO's Deep linking Form Validation Server Communication Directives Components Localization Embeddable
  5. 5. Conocé tus superpoderes Globant Proprietary | Confidential Information $scope Controllers Views Dependency Injection
  6. 6. Conocé tus superpoderes Modelo Conocé tus superpoderes | $scope POJO's (Plain Old JavaScript Object) $scope Globant Proprietary | Confidential Information Flexible No se rige por UAP (Uniform Access Principle) Nexo Puente de comunicación $rootScope
  7. 7. Conocé tus superpoderes Comportamiento Conocé tus superpoderes | Comtroller Permite definir el comportamiento detras del DOM Globant Proprietary | Confidential Information Encapsulación Mantiene el orden de forma pristina y legible Expresividad Robusto pero sin la necesidad de boilerplate Controller
  8. 8. Conocé tus superpoderes HTML Conocé tus superpoderes | View Las vistas llevan HTML de lo más común Globant Proprietary | Confidential Information Versatilidad Potente motor de expresiones flexibls Extensible Agregar componentes especializados nunca fue más fácil View
  9. 9. Conocé tus superpoderes Simple Conocé tus superpoderes | Dependency Injection Simplicidad para seleccionar componentes Globant Proprietary | Confidential Information Modularizable Todo se puede transformar en una depedencia inyectable Mantenible No más metodos main() que resultan ser tu peor pesadilla Dependency Injection
  10. 10. Tomando el control “Lo esencial es invisible a los ojos.” Globant Proprietary | Confidential Information «Le pettit prince», Antoine de Saint-Exupéry
  11. 11. 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> <!-- We have some hidden awesomeness here --> </body> </html> Globant Proprietary | Confidential Information
  12. 12. 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> <!-- We have some hidden awesomeness here --> </body> </html> Globant Proprietary | Confidential Information
  13. 13. 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> Globant Proprietary | Confidential Information
  14. 14. 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> Globant Proprietary | Confidential Information
  15. 15. 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> Globant Proprietary | Confidential Information
  16. 16. 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> Globant Proprietary | Confidential Information
  17. 17. 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> Globant Proprietary | Confidential Information
  18. 18. 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> Globant Proprietary | Confidential Information
  19. 19. 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 }; }]); Globant Proprietary | Confidential Information
  20. 20. 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 }; }]); Globant Proprietary | Confidential Information
  21. 21. 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 }; }]); Globant Proprietary | Confidential Information
  22. 22. 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 }; }]); Globant Proprietary | Confidential Information
  23. 23. 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 }; }]); Globant Proprietary | Confidential Information
  24. 24. 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 }; }]); Globant Proprietary | Confidential Information
  25. 25. 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 }; }]); Globant Proprietary | Confidential Information
  26. 26. ¡Aguzando la vista! Filters Routes Services Directives Globant Proprietary | Confidential Information
  27. 27. ¡Aguzando la vista! Filters  Dan formato a una expresión Globant Proprietary | Confidential Information  Funcionan en controllers, views y services  Se pueden crear filtros custom  Ejemplos:  currency  date  lowercase  uppercase
  28. 28. ¡Aguzando la vista! Services  Son singletons Globant Proprietary | Confidential Information  Deben cumplir una tarea especifica  Sirven como medio de comunicación entre controllers  Ejemplos:  $http  $location  $animation
  29. 29. ¡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
  30. 30. ¡Aguzando la vista! Directives  Son marcadores especiales dentro del DOM Globant Proprietary | Confidential Information  Pueden adoptar la forma de attributes, elements, css  Menejan el HTML compiler de AngularJS  Ejemplos:  <pane>  ng-click  ng-switch  ng-repeat
  31. 31. 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) Globant Proprietary | Confidential Information
  32. 32. Una prueba de valor Unit Tests Tests End-to-End (E2E) 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'); Globant Proprietary | Confidential Information 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); }); });
  33. 33. ¡Al infinito y más allá!  Validation framework  AJAX support ($http & $resource)  Otros servicios ($apply, $digest, $watch y $q) Globant Proprietary | Confidential Information
  34. 34. Q&A
  35. 35. Thank You By yours truly @geronimogarcia DarkThrone geronimo.garcia@globant.com
  • jimimattingly

    May. 31, 2015
  • NickShwaery1

    May. 19, 2015
  • baboha

    Apr. 25, 2015
  • abhinjain

    Jan. 30, 2015
  • darxx

    Oct. 21, 2014
  • GastnFernandez2

    Oct. 18, 2014

By Gerónimo García (Software Designer Mobile Studio @Globant)

Views

Total views

1,329

On Slideshare

0

From embeds

0

Number of embeds

28

Actions

Downloads

29

Shares

0

Comments

0

Likes

6

×