introducción a angularjs
TRANSCRIPT
Introducción a AngularJS
1
Agenda
● Historia de las Apps Webs● ¿Por qué AngularJS?● Building Blocks● Herramientas● ¿De qué trata el Curso?
2
Arquitectura en Apps Webs
● Primera Generacióno HTML + CSS con poco JS
● Segunda Generacióno Ajax + Abuso de jQuery
● Tercera Generacióno Frameworks JavaScript
3
MVC del Lado del Cliente
4
Explosión de Frameworks JS
5
Explosión de Frameworks JS
6
Explosión de Frameworks JS
7
Explosión de Frameworks JS
8
Explosión de Frameworks JS
9
http://todomvc.com/
Aplicaciones Web Modernas
● Mucha UX● Responsibilidad● Single Page App● Mucho JS (Rich Apps)● Frameworks CSS: Less, Sass, Compass● Apps Reactivas (Asincrónicas)
10
¿Por qué AngularJS?
11
¿Por qué AngularJS?
● Es Open Source● Lo Mantiene Google● Enorme Comunidad y Aceptación● 6 Años de Historia● Sigue Evolucionando● Fomenta la Programación Declarativa● Tiene Inyección de Dependencias
12
Mi Experiencia con AngularJS
13
Hello World
<input type="text" ng-model="yourName"><h1>Hello {{yourName}}!</h1>
14
Directives
● ng-app● ng-model● ng-show● ng-hide● ng-click● ng-repeat● ng-controller
15
● ng-change● ng-dblclick● ng-include● ng-focus● ng-disabled● ng-submit● ng-copy
Custom Directives
16
<cent-messageng-model="messages.info"info>
</cent-message>
<div cent-version></div>
Modules
angular.module(‘myModule1’, []);
angular.module(‘myModule2’, []);
var myModule = angular.module(‘myModule’,[‘myModule1,‘myModule2’]);
17
Controllers
myModule.controller(‘TodoCtrl’,function($scope, $interval) {
...}
);
18
Unit Test
19
E2E Test
20
SeleniumWebDriver
Angular Expressions
<span>3 + 5 = {{3 + 5}}</span>
<button ng-click=”window.alert(‘Hello’)”>Greet</button>
<button ng-click=”greet()”>Greet</button>
21
{{ }}
Filters
<span>{{ price | currency }}</span>
<li ng-repeat=”product in products | orderBy: ’price’”>
<span>Now: {{ now | date: ‘dd/MM/yyyy’ }}
22
Custom Filters
myModule.filter(‘myFilter’, function() {return function(input, opt1, opt2) {
…return output;
};});
23
Forms
<form name=”myForm”ng-submit=”formCtrl.submit()”><input ng-model=”author” required><button type=”submit” value=”Submit”
ng-disabled=”myForm.$invalid”></form>
24
Forms
25
Scopes
$scope.sayHello = function() {$scope.greeting = ‘Hello World’;
}
<span>{{ greeting }}</span>
26
Scopes
27
myModule.controller(‘MyController’,function($rootScope, $scope) {
...}
);
Scopes
28
● $scope.$watch(expression, function);● $scope.$broadcast(name, args);● $scope.$emit(name, args);● $scope.$on(event, function);● $scope.$parent● $scope.$new
Comunicación entre Controllers
● Mediante Herencia de Scopes● Mediante Eventos● Mediante Servicios
29
Services
30
● $rootScope● $scope● $timeout● $window● $interval● $http● $resource
● $log● $q● $animate● $filter● $httpBackend● $controller● $document
Custom Services
31
myModule.factory(‘MyService’,function() {
return {method1: function() { … },method2: function() { … }
}});
$http
32
● $http.get● $http.post● $http.head● $http.put● $http.delete● $http.jsonp● $http.patch
$http.get
33
$http.get(‘/someUrl’).success(function(data, status,headers, config) { … }).error(function(data, status, headers,
config) { … })
$http.post
34
$http.post(‘/someUrl’, {user: ‘adrian’, pass: ‘adrian’
}).success(function(data, status, headers,config) { … })
.error(function(data, status, headers,config) { … })
$resource
35
● RESTful server-side data source● Ideal para CRUD de resources● Encapsula $http● Permite usar objs como ActiveRecords● Actions: get, query, save, remove, delete● Permite definir Custom Actions
$resource
36
var Users = $resource(‘/users/:userId’,{ userId: ‘@id’ });var user = Users.get({ userId:123 },
function() {user.name = ‘adrian’;user.$save();});
$resource
37
myModule.factory(‘Users’,function($resource) {
return $resource(‘users/:userId’,{ userId: ‘@_id’ },{ myUpdate: { method: ‘PUT’ } }
);});
$resource
38
myModule.controller(‘MyCtrl’,function(Users) {
var user = Users.get({ userId:123 },function() {
user.name = ‘adrian’;user.$myUpdate();
});});
Herramientas
39
ng-inspector
40
NodeJS y NPM
41
Bower
42
Grunt / Gulp
43
Yeoman
44
Generadores
45
angular-seed
JHipster
generator-angular-fullstack
¿De qué trata el Curso?
46
¿De qué trata el Curso?
47
Recursos
● Mi estante AngularJS en VolKno:o http://www.volkno.com.ar/u/elfrasco/angularjs
● El código fuente que veremos en el curso:o https://github.com/elfrasco/angular-course
● ng-newsletter:o http://www.ng-newsletter.com/
48
49
¡Muchas Gracias!