Introducción a AngularJS
-
Upload
leopoldo-rojas -
Category
Software
-
view
807 -
download
0
description
Transcript of Introducción a AngularJS
![Page 2: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/2.jpg)
Agenda: Día 1
1. Introducción a AngularJS
2. Single-page apps (SPA)
3. Características generales de AngularJS
4. Conceptos y fundamentos en AngularJS
5. Algunas directivas principales de AngularJS
![Page 3: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/3.jpg)
Agenda: Día 2
Creando una aplicación AngularJS
![Page 4: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/4.jpg)
Agenda: Día 3
1. Integrando AngularJS con servicios de servidor Web
2. Tópicos relacionados con el desarrollo en SPA
3. Wrap-up
![Page 5: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/5.jpg)
Trend Topic - AngularJS
![Page 6: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/6.jpg)
¿Qué es AngularJS?
Es un framework de javascript para crear aplicaciones web dinámicas, el cual utiliza el HTML como mecanismo de lenguaje de template de las aplicaciones y permite extender el lenguaje base de HTML para representar los distintos componentes de la aplicación.
“Es lo que el HTML hubiera sido, si hubiera sido diseñado para crear aplicaciones web”
AngularJS Team
![Page 7: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/7.jpg)
AngularJS en acción
![Page 8: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/8.jpg)
¿Comentarios?
![Page 9: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/9.jpg)
¿Qué es entonces AngularJS?• Un framework de javascript
• Es tecnología server-agnostic ya que todo lo ejecuta del lado del browser
• Intenta definir el comportamiento de la aplicación mediante nuevas “construcciones” dentro del HTML mismo
• Define lineamientos claros de cómo estructurar una aplicación web (client-side)
• Orientado a aplicaciones web CRUD
![Page 10: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/10.jpg)
La filosofía base de AngularJS• Desacoplar la manipulación del DOM de la lógica de la
aplicación (Presentation vs Business Logic)
• Desacoplar la lógica de la aplicación del lado del cliente, de la lógica de la aplicación del lado del servidor
• El framework debe guiar a los Developers en cómo ir estructurando los diferentes componentes de una aplicación client-side
• Le otorga mucha importancia a las pruebas (TDD y Testing-ready)
![Page 11: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/11.jpg)
¿Para qué NO es AngularJS?• No es una tecnología de aplicaciones Web del lado del
servidor, sino que debe complementarse con una de ellas
• No es óptima para aplicaciones con alta manipulación del DOM del browser, tales como los juegos o los editores de textos
• No depende de jQuery (aunque puede utilizarse y son perfectamente compatibles) y no intenta competir con los problemas que jQuery resuelve adecuadamente (manipulación detallada del DOM del browser)
![Page 12: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/12.jpg)
Framework AngularJS
Templates Directives Modelo Scope
Data Binding Deep Linking Routing Views
Filters Controller Dependency Injection Módulos
Servicios …
![Page 13: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/13.jpg)
Single-page Apps
![Page 14: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/14.jpg)
Single-page Apps (SPAs)• Una aplicación web que está conformada por una sola página
HTML• La aplicación se carga en una sola llamada al server• No es necesario refrescar la página para ir utilizando la aplicación• No se transfiere el control a ninguna otra página
• Provee una experiencia similar a las aplicaciones desktop-only
![Page 15: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/15.jpg)
AngularJSCaracterísticas y ejemplos
![Page 16: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/16.jpg)
Inicialización y Data-binding<!doctype html>
<html ng-app> <head>
<script src="angular.min.js"></script> </head> <body> <div> <label>What do you think about AngularJS:</label>
<input type="text" ng-model="angularIMHO" placeholder="Please, tell us"> <hr>
<h1>{{angularIMHO}}</h1> </div> </body></html>
![Page 17: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/17.jpg)
Controladores y directivas <body> <h2>Teams in World Cup Brazil 2014</h2>
<div ng-controller="TeamsCtrl"> <span>{{remaining()}} with possibilities to be champion, of {{teams.length}} teams</span>
[ <a href="" ng-click="restart()">Restart only with classified teams</a> ] <ul class="unstyled">
<li ng-repeat="team in teams"> <input type="checkbox" ng-model="team.eliminated"> <span class="reject-{{team.eliminated}}">{{team.name}}</span> </li> </ul>
<form ng-submit="addTeam()"> <input type="text" ng-model="teamName" size="30" placeholder="add new team here"> <input class="btn-primary" type="submit" value="add"> </form> </div> </body>
![Page 18: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/18.jpg)
Controladores y directivasfunction TeamsCtrl($scope) { $scope.teams = [ {name:'Costa Rica', eliminated:false}, {name:'Brazil', eliminated:true}]; $scope.addTeam = function() { $scope.teams.push({name:$scope.teamName, eliminated:false}); $scope.teamName = ''; };
…
![Page 19: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/19.jpg)
Controladores y directivas…
$scope.remaining = function() { var count = 0; angular.forEach($scope.teams, function(team) { count += team.eliminated ? 0 : 1; }); return count; }; $scope.restart = function() { var oldTeams = $scope.teams; $scope.teams = []; angular.forEach(oldTeams, function(team) { if (!team.eliminated) $scope.teams.push(team); }); };}
![Page 20: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/20.jpg)
Rutas y servicios.config(function($routeProvider) { $routeProvider .when('/', { controller:'TeamsCtrl', templateUrl:'3teams.html' }) .when('/new', { controller:'CreateCtrl', templateUrl:'3team.html' }) .otherwise({ redirectTo:'/' });})
![Page 21: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/21.jpg)
Rutas y servicios
.controller('TeamsCtrl', function($scope, Teams) { $scope.teams = Teams.getTeams(); })
.controller('CreateCtrl', function($scope, $location, Teams) { $scope.save = function() { $scope.teams = Teams.includeTeam($scope.team); $scope.team = {}; $location.path('/'); };
});
![Page 22: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/22.jpg)
Rutas y servicios.factory('Teams', function($http) { teams = [ {"name":"Costa Rica", "starPlayer": "Joel Campbell", "site": "http://www.fifa.com/worldcup/teams/team=43901/index.html"}, {"name":"Brasil", "starPlayer": "Neymar", "site": "http://www.fifa.com/worldcup/teams/team=43924/index.html"} ];
return { getTeams: function() { return teams; }, includeTeam: function(team) { return teams.push(team); } }
})
![Page 23: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/23.jpg)
La infraestructura de desarrollo para
AngularJS
![Page 24: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/24.jpg)
Lo usual para AngularJS• Browser reciente (Chrome, Safari, Firefox, IE9+)
• Servidor web
• Editor de Texto (ejemplo: SublimeText)
• Control de versiones (ejemplo: Git)
• Servicios de BackEnd (p.ej: Base de Datos; Aplicación server-side con un API RESTful JSON-based)
• Para pruebas (TDD) : Jasmine (javascript) y Karma (Task runner)
![Page 25: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/25.jpg)
Por cierto, ¿qué es MEAN stack?
MongoDB
Express
AngularJS
Node.js
![Page 26: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/26.jpg)
Conceptos de AngularJS
![Page 27: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/27.jpg)
Data Binding
AngularJSFuente: Sitio Web de AngularJS
![Page 28: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/28.jpg)
Model-View-Controller (MVC)
AngularJS
Fuente: Sitio Web de AngularJS
![Page 29: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/29.jpg)
Arquitectura general de AngularJS
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
![Page 30: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/30.jpg)
Arquitectura general de AngularJS
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
![Page 31: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/31.jpg)
Rutas y Deep Linking
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
![Page 32: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/32.jpg)
AngularJS Directivas Principales
![Page 33: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/33.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 34: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/34.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 35: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/35.jpg)
ngInit<body> <h1>World Cup Brasil 2014</h1> <div> <label>Which team will win the group D?</label> <p>Costa Rica</p> </div> <div ng-init="firstTeam = 'Costa Rica' "> <table> <tr><td>{{firstTeam}}</td></tr> <tr><td>England</td></tr> <tr><td>Italy</td></tr> <tr><td>Uruguay</td></tr> </table> </div></body>
ngInit evalúa una expresión en el scope actual
![Page 36: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/36.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 37: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/37.jpg)
ngChange <div> <input type="checkbox" ng-model="costaRica" ng-change="change()" id="ng-change-example1" /> <input type="checkbox" ng-model="costaRica" id="ng-change-example2" /> <label for="ng-change-example2">Costa Rica?</label><br /> <tt>Costa Rica? = {{costaRica}}</tt><br/> <tt>Cambios de opinion? = {{counter}}</tt><br/> </div></body>
<script> function Controller($scope) { $scope.counter = 0; $scope.change = function() { $scope.counter++; }; }</script>
ngChange evalúa una expresión cuando el usuario cambio el input
![Page 38: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/38.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 39: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/39.jpg)
ngShow<body> <h1>World Cup Brasil 2014</h1> <div> <label>Which team will win the group D?</label> <p>Costa Rica</p> </div> <div> <table> <tr><td>Costa Rica</td></tr> <tr><td>England</td></tr> <tr><td>Italy</td></tr> <tr><td>Uruguay</td></tr> </table> </div> <div> <input type="checkbox" ng-model="costaRica" /> <label>Costa Rica?</label><br /> <tt ng-show="costaRica">Yes! I think Costa Rica will win the group!!</tt> </div></body>
ngShow muestra o esconde un elemento dado dependiendo de la expresión. Si la expresión es verdadera, muestra el elemento.
![Page 40: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/40.jpg)
ngHide<body> <h1>World Cup Brasil 2014</h1> <div> <label>Which team will win the group D?</label> <p>Costa Rica</p> </div> <div> <table> <tr><td>Costa Rica</td></tr> <tr><td>England</td></tr> <tr><td>Italy</td></tr> <tr><td>Uruguay</td></tr> </table> </div> <div> <input type="checkbox" ng-model="costaRica" /> <label>Costa Rica?</label><br /> <tt ng-hide="costaRica">Mmm... No, I think is some kind of difficult.</tt> </div></body>
ngHide muestra o esconde un elemento dado dependiendo de la expresión. Si la expresión es verdadera, esconde el elemento.
![Page 41: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/41.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 42: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/42.jpg)
ngClick
<div ng-init="count=0"> <button ng-click="count = count + 1"> Votes for Costa Rica will win the group </button> <br /> <button ng-click="count = count - 1"> Votes for Costa Rica won´t win the group </button> <br /> count: {{count}} </div>
ngClick permite especificar un comportamiento cuando un elemento es clickeado
![Page 43: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/43.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 44: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/44.jpg)
ngClass <p ng-class="{strike: deleted, bold: important, red: alert}">Definitely Costa Rica!!</p> <input type="checkbox" ng-model="deleted"> I don't think so (apply "strike" class)<br> <input type="checkbox" ng-model="important"> Obvious (apply "bold" class)<br> <input type="checkbox" ng-model="alert"> Red Alert (apply "red" class) <hr> <p ng-class="style">Usando Strings</p> <input type="text" ng-model="style" placeholder="Type: bold strike red"> <hr> <p ng-class="[style1, style2, style3]">Using Arreglos</p> <input ng-model="style1" placeholder="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red"><br> <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
ngClass permite colocar clases CSS dependiendo de una expresión: objeto, string o arreglo
![Page 45: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/45.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 46: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/46.jpg)
ngSrc
Breve correción en el uso del tag <img src=“…” />
Uso normal:<img src="http://www.oursite.com/{{brazilImg}}"/>
Uso en AngularJS:<img ng-src="http://www.oursite.com/{{brazilImg}}"/>
![Page 47: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/47.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 48: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/48.jpg)
ngDisabled <div ng-init="count=0"> <button ng-disabled="checked" ng-click="count = count + 1"> Votes for Costa Rica will win the group </button> <br /> <button ng-disabled="checked" ng-click="count = count - 1"> Votes for Costa Rica won´t win the group </button> <br /> count: {{count}} </div> <p>Do you want to disable the buttons? <input type="checkbox" ng-model="checked"></p>
ngDisabled permite deshabilitar botones utilizando expresiones de AngularJS
![Page 49: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/49.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 50: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/50.jpg)
ngSubmit <div> <form ng-submit="submit()" ng-controller="Ctrl"> Enter the teams that you think could win the World Cup and hit enter: <input type="text" ng-model="text" name="text" /> <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre> </form> </div>
<script> function Ctrl($scope) { $scope.list = []; $scope.text = 'Costa Rica'; $scope.submit = function() { if ($scope.text) { $scope.list.push(this.text); $scope.text = ''; } }; } </script>
ngSubmit ejecuta expresiones de AngularJS cuando un Form es “enviado” (o submitted)
![Page 51: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/51.jpg)
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ngClass ngSubmit
ngInit …
![Page 52: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/52.jpg)
Gran cantidad de Directivas
ngBind, ngBindHtml, ngBindTemplate, ngBlur, ngChange, ngChecked,
ngClass, ngClassEven, ngClassOdd, ngClick, ngCloak, ngController,
ngCopy, ngCsp, ngCut, ngDblclick, ngDisabled, ngFocus, ngForm, ngHide,
ngHref, ngIf, ngInclude, ngInit, ngKeydown, ngKeypress, ngKeyup, ngList,
ngModel, ngMousedown, ngMouseenter, ngMouseleave,
ngMousemove, ngMouseover, ngMouseup, ngNonBindable, ngOpen,
ngPaste, ngPluralize, ngReadonly, ngRepeat, ngSelected, ngShow, ngSrc,
ngSrcset, ngStyle, ngSubmit, ngSwitch, ngTransclude, ngValue
![Page 53: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/53.jpg)
Creando una aplicación AngularJS
![Page 54: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/54.jpg)
$scope vs this
![Page 55: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/55.jpg)
AngularJS y una aplicación Web
server-side RESTful
![Page 56: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/56.jpg)
SPA vs Aplicación Web tradicional
¿Dónde está el MVC?
![Page 57: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/57.jpg)
Ejemplo CRUD
![Page 58: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/58.jpg)
AngularJS y una RESTful API
Servicio $http
• Si el API no es completamente RESTful
• Otorga más flexibilidad pero quizá se deba escribir más código
Servicio $resource
• Mejor con RESTful APIs
• Viene con el módulo ngResource
• Métodos de más alto nivel de abstracción
![Page 59: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/59.jpg)
$http y $resource en AngularJS$http.get('teams/teams.json').success(function(data) { teams = data;
$scope.team = teams.filter(function(team){ return team.id == $routeParams.teamId; })[0]; });
worldCupServices.factory('Team', ['$resource', function($resource){ return $resource('teams/:teamId.json', {}, { query: {method:'GET', params:{teamId:'teams'}, isArray:true} }); }]);
$http
$resource
![Page 60: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/60.jpg)
AngularJS y3-way Data Binding
![Page 61: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/61.jpg)
3-way Data Binding
Fuente: Sitio Web de AngularJS
![Page 62: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/62.jpg)
AngularJS yApps Móviles
![Page 63: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/63.jpg)
Aplicaciones Móviles
![Page 64: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/64.jpg)
AngularJS y Cordova (aka PhoneGap)
+
![Page 65: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/65.jpg)
AngularJS más móvil
![Page 66: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/66.jpg)
AngularJS más móvil
![Page 67: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/67.jpg)
AngularJS y TDD(Test-Driven Development)
![Page 68: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/68.jpg)
Test-Driven Development
![Page 69: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/69.jpg)
AngularJS y TDD
Pruebas Unitarias:
Jasmine: BDD Framework para javascript
Karma: Ejecuta pruebas (Test Runner)
Pruebas end-to-end
Protractor•WebDriverJS
![Page 70: Introducción a AngularJS](https://reader036.fdocuments.in/reader036/viewer/2022070318/55762394d8b42a4e1c8b4e69/html5/thumbnails/70.jpg)
¡Muchas Gracias!
Ing. Leopoldo Rojas Moguel, [email protected]
“Me lo contaron y lo olvidé; lo vi y lo entendí; lo hice y lo aprendí”
Confucio