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!