Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS Intro

Gerónimo Garcia Sgritta
December 10, 2013
Programming
0
110

AngularJS Intro

AngularJS Introduction for devs @ Globant - Bs As - 2013

Gerónimo Garcia Sgritta

December 10, 2013
Tweet

More Decks by Gerónimo Garcia Sgritta

See All by Gerónimo Garcia Sgritta
Responsive Web Design
geronimogarcia
1
65

Other Decks in Programming

See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
130
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
What We Can Learn From OSS
inouehi
0
420
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
450
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
GitHub Copilotのススメ
marcy731
1
200
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
440
禅の心を手に入れよ
eltociear
1
120

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
The Invisible Customer
myddelton
114
12k
Infographics Made Easy
chrislema
238
18k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
BBQ
matthewcrist
80
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Code Review Best Practice
trishagee
55
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Rails Girls Zürich Keynote
gr2m
91
13k
Building a Scalable Design System with Sketch
lauravandoore
456
32k

Transcript

  1. ANGULARJS DEC 2013

  2. ¡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.”

  3. ¡Quiero ser un superhéroe! Globant Proprietary | Confidential Information

  4. ¡Quiero ser un superhéroe! Globant Proprietary | Confidential Information Controller

    Data Binding POJO's Deep linking Form Validation Server Communication Directives Components Localization Embeddable Injectable Testable

  5. Conocé tus superpoderes Globant Proprietary | Confidential Information $scope Controllers

    Views Dependency Injection

  6. 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

  7. 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

  8. 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

  9. 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 Dependency Injection

  10. Tomando el control Globant Proprietary | Confidential Information “Lo esencial

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

  11. 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>

  12. 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>

  13. 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>

  14. 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>

  15. 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>

  16. 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>

  17. 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>

  18. 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>

  19. 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 }; }]);

  20. 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 }; }]);

  21. 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 }; }]);

  22. 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 }; }]);

  23. 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 }; }]);

  24. 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 }; }]);

  25. 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 }; }]);

  26. ¡Aguzando la vista! Globant Proprietary | Confidential Information Filters Routes

    Services Directives

  27. ¡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

  28. ¡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

  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! 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

  31. 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)

  32. 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); }); });

  33. ¡Al infinito y más allá! Globant Proprietary | Confidential Information

     Validation framework  AJAX support ($http & $resource)  Otros servicios ($apply, $digest, $watch y $q)

  34. Q&A

  35. Thank You By yours truly Thank You @geronimogarcia DarkThrone [email protected]