HTML enhanced for web apps!
Ing. Leopoldo Rojas Moguel, MBA
leopoldo.rojas@arckanto.com
Agenda: Día 1
1. Introducción a AngularJS
2. Single-page apps (SPA)
3. Características generales de AngularJS
4. Conceptos...
Agenda: Día 2
Creando una aplicación
AngularJS
Agenda: Día 3
1. Integrando AngularJS con servicios de servidor Web
2. Tópicos relacionados con el desarrollo en SPA
3. Wr...
Trend Topic - AngularJS
¿Qué es AngularJS?
Es un framework de javascript para crear aplicaciones web
dinámicas, el cual utiliza el HTML como mecan...
AngularJS en acción
¿Qué es entonces AngularJS?
• Un framework de javascript
• Es tecnología server-agnostic ya que todo lo ejecuta del lado
d...
La filosofía base de AngularJS
• Desacoplar la manipulación del DOM de la lógica de la
aplicación (Presentation vs Busines...
¿Para qué NO es AngularJS?
• No es una tecnología de aplicaciones Web del lado del
servidor, sino que debe complementarse ...
Framework AngularJS
Templates Directives Modelo Scope
Data Binding
Deep
Linking
Routing Views
Filters Controller
Dependenc...
Single-page Apps (SPAs)
• Una aplicación web que está conformada por una sola página
HTML
• La aplicación se carga en una ...
Inicialización y Data-binding
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<...
Controladores y directivas
<body>
<h2>Teams in World Cup Brazil 2014</h2>
<div ng-controller="TeamsCtrl">
<span>{{remainin...
Controladores y directivas
function TeamsCtrl($scope) {
$scope.teams = [
{name:'Costa Rica', eliminated:false},
{name:'Bra...
Controladores y directivas
…
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.teams, function(team) {...
Rutas y servicios
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'TeamsCtrl',
templateUrl:'3tea...
Rutas y servicios
.controller('TeamsCtrl', function($scope, Teams) {
$scope.teams = Teams.getTeams();
})
.controller('Crea...
Rutas y servicios
.factory('Teams', function($http) {
teams = [
{"name":"Costa Rica", "starPlayer": "Joel Campbell", "site...
Lo usual para AngularJS
• Browser reciente (Chrome, Safari, Firefox, IE9+)
• Servidor web
• Editor de Texto (ejemplo: Subl...
Por cierto, ¿qué es MEAN stack?
Data Binding
AngularJSFuente: Sitio Web de AngularJS
Model-View-Controller (MVC)
AngularJS
Fuente: Sitio Web de AngularJS
Arquitectura general de AngularJS
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
Arquitectura general de AngularJS
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
Rutas y Deep Linking
Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngInit
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngChange
<div>
<input type="checkbox" ng-model="costaRica" ng-change="change()" id="ng-
change-example1" />
<input type="c...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngShow
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div...
ngHide
<body>
<h1>World Cup Brasil 2014</h1>
<div>
<label>Which team will win the group D?</label>
<p>Costa Rica</p>
</div...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngClick
<div ng-init="count=0">
<button ng-click="count = count + 1">
Votes for Costa Rica will win the group
</button>
<b...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngClass
<p ng-class="{strike: deleted, bold: important, red: alert}">Definitely
Costa Rica!!</p>
<input type="checkbox" ng...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngSrc
Breve correción en el uso del tag <img src=“…” />
Uso normal:
<img src="http://www.oursite.com/{{brazilImg}}"/>
Uso ...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngDisabled
<div ng-init="count=0">
<button ng-disabled="checked" ng-click="count = count + 1">
Votes for Costa Rica will w...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
ngSubmit
<div>
<form ng-submit="submit()" ng-controller="Ctrl">
Enter the teams that you think could win the World Cup and...
Principales Directivas en AngularJS
ngApp ngSrc ngDisabled ngModel
ngChange ngController ngClick ngRepeat
ngShow ngHide ng...
Gran cantidad de Directivas
ngBind, ngBindHtml, ngBindTemplate, ngBlur, ngChange, ngChecked,
ngClass, ngClassEven, ngClass...
SPA vs Aplicación Web tradicional
AngularJS y una RESTful API
Servicio
$http
• Si el API no es
completamente RESTful
• Otorga más flexibilidad
pero quizá se...
$http y $resource en AngularJS
$http.get('teams/teams.json').success(function(data) {
teams = data;
$scope.team = teams.fi...
3-way Data Binding
Fuente: Sitio Web de AngularJS
Aplicaciones Móviles
AngularJS y Cordova (aka PhoneGap)
AngularJS más móvil
AngularJS más móvil
Test-Driven Development
AngularJS y TDD
Pruebas Unitarias:
Jasmine: BDD Framework para javascript
Karma: Ejecuta pruebas (Test Runner)
Pruebas end...
¡Muchas Gracias!
Ing. Leopoldo Rojas Moguel, MBA
leopoldo.rojas@arckanto.com
“Me lo contaron y lo olvidé; lo vi y lo enten...
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Introducción a AngularJS
Upcoming SlideShare
Loading in …5
×

Introducción a AngularJS

1,176 views

Published on

Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.

Published in: Software
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,176
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
25
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a AngularJS

  1. 1. HTML enhanced for web apps! Ing. Leopoldo Rojas Moguel, MBA leopoldo.rojas@arckanto.com
  2. 2. 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
  3. 3. Agenda: Día 2 Creando una aplicación AngularJS
  4. 4. Agenda: Día 3 1. Integrando AngularJS con servicios de servidor Web 2. Tópicos relacionados con el desarrollo en SPA 3. Wrap-up
  5. 5. Trend Topic - AngularJS
  6. 6. ¿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
  7. 7. AngularJS en acción
  8. 8. ¿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
  9. 9. 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)
  10. 10. ¿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)
  11. 11. Framework AngularJS Templates Directives Modelo Scope Data Binding Deep Linking Routing Views Filters Controller Dependency Injection Módulos Servicios …
  12. 12. 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
  13. 13. 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>
  14. 14. 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>
  15. 15. Controladores y directivas function 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 = ''; }; …
  16. 16. 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); }); }; }
  17. 17. Rutas y servicios .config(function($routeProvider) { $routeProvider .when('/', { controller:'TeamsCtrl', templateUrl:'3teams.html' }) .when('/new', { controller:'CreateCtrl', templateUrl:'3team.html' }) .otherwise({ redirectTo:'/' }); })
  18. 18. 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('/'); }; });
  19. 19. 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); } } })
  20. 20. 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)
  21. 21. Por cierto, ¿qué es MEAN stack?
  22. 22. Data Binding AngularJSFuente: Sitio Web de AngularJS
  23. 23. Model-View-Controller (MVC) AngularJS Fuente: Sitio Web de AngularJS
  24. 24. Arquitectura general de AngularJS Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
  25. 25. Arquitectura general de AngularJS Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
  26. 26. Rutas y Deep Linking Fuente: Dan Wahlin Blog - http://weblogs.asp.net/dwahlin/
  27. 27. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  28. 28. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  29. 29. 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
  30. 30. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  31. 31. 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
  32. 32. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  33. 33. 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.
  34. 34. 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.
  35. 35. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  36. 36. 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
  37. 37. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  38. 38. 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
  39. 39. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  40. 40. 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}}"/>
  41. 41. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  42. 42. 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
  43. 43. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  44. 44. 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)
  45. 45. Principales Directivas en AngularJS ngApp ngSrc ngDisabled ngModel ngChange ngController ngClick ngRepeat ngShow ngHide ngClass ngSubmit ngInit …
  46. 46. 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
  47. 47. SPA vs Aplicación Web tradicional
  48. 48. 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
  49. 49. $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} }); }]);
  50. 50. 3-way Data Binding Fuente: Sitio Web de AngularJS
  51. 51. Aplicaciones Móviles
  52. 52. AngularJS y Cordova (aka PhoneGap)
  53. 53. AngularJS más móvil
  54. 54. AngularJS más móvil
  55. 55. Test-Driven Development
  56. 56. AngularJS y TDD Pruebas Unitarias: Jasmine: BDD Framework para javascript Karma: Ejecuta pruebas (Test Runner) Pruebas end-to-end Protractor •WebDriverJS
  57. 57. ¡Muchas Gracias! Ing. Leopoldo Rojas Moguel, MBA leopoldo.rojas@arckanto.com “Me lo contaron y lo olvidé; lo vi y lo entendí; lo hice y lo aprendí” Confucio

×