Introducción a AngularJS

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 y fundamentos en AngularJS
5. Algunas directivas principales de AngularJS

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

¿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

¿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

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)

¿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)

Framework AngularJS
Templates Directives Modelo Scope
Data Binding
Deep
Linking
Routing Views
Filters Controller
Dependency
Injection
Módulos
Servicios …

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

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>

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>

…
$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);
});
};
}

Rutas y servicios
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'TeamsCtrl',
templateUrl:'3teams.html'
})
.when('/new', {
controller:'CreateCtrl',
templateUrl:'3team.html'
})
.otherwise({
redirectTo:'/'
});
})

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('/');
};
});

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

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)

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/

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 ngClass ngSubmit
ngInit …

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

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

ngShow
<body>
<div>
<p>Costa Rica</p>
</div>
<div>
<table>
<tr><td>Costa Rica</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.

ngHide
<body>
<div>
<p>Costa Rica</p>
</div>
<div>
<table>
<tr><td>Costa Rica</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.

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

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>
ngClass permite colocar clases CSS dependiendo de una expresión: objeto, string o arreglo

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}}"/>

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

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)

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

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

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

3-way Data Binding
Fuente: Sitio Web de AngularJS

AngularJS y Cordova (aka PhoneGap)

AngularJS y TDD
Pruebas Unitarias:
Jasmine: BDD Framework para javascript
Karma: Ejecuta pruebas (Test Runner)
Pruebas end-to-end
Protractor
•WebDriverJS

¡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

Introducción a AngularJS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introducción a AngularJS

Ähnlich wie Introducción a AngularJS (20)

Mehr von Leopoldo Rojas Moguel

Mehr von Leopoldo Rojas Moguel (6)

Introducción a AngularJS