[AngularJS] From Angular to Mobile in 30 minutes
•
6 gefällt mir•1,368 views
By Gerónimo García (Software Designer Mobile Studio @Globant)
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie [AngularJS] From Angular to Mobile in 30 minutes
Ähnlich wie [AngularJS] From Angular to Mobile in 30 minutes (20)
Mehr von Globant
Mehr von Globant (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
[AngularJS] From Angular to Mobile in 30 minutes
- 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. ¡Quiero ser un superhéroe! Globant Proprietary | Confidential Information
- 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. Conocé tus superpoderes Globant Proprietary | Confidential Information $scope Controllers Views Dependency Injection
- 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. 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. 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. 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. Tomando el control “Lo esencial es invisible a los ojos.” Globant Proprietary | Confidential Information «Le pettit prince», Antoine de Saint-Exupéry
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ¡Aguzando la vista! Filters Routes Services Directives Globant Proprietary | Confidential Information
- 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. ¡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. ¡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. ¡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. 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. 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. ¡Al infinito y más allá! Validation framework AJAX support ($http & $resource) Otros servicios ($apply, $digest, $watch y $q) Globant Proprietary | Confidential Information
- 34. Q&A
- 35. Thank You By yours truly @geronimogarcia DarkThrone geronimo.garcia@globant.com