1. AngularJS
HTMLenhancedforwebapps!
Tuesday, February 12, 13

2. PotenciaoamplíaHTML.
Google.
Formadeuso.
Tuesday, February 12, 13

3. Curso de AngularJS. Part I
• Básico
• Model
• Bucles
• Controllers
• Events
• Propiedades
• Modificadores
• Filtros
Tuesday, February 12, 13

4. <script src="//ajax.googleapis.com/
ajax/libs/angularjs/1.0.3/
angular.min.js"></script>
Tuesday, February 12, 13

5. Básico
ng-app
{{1+2}}
Tuesday, February 12, 13

6. Model
ng-model
Tuesday, February 12, 13

7. Bucles
ng-repeat
ng-switch
on(ng-switch-when|ng-switch-default)
Tuesday, February 12, 13

8. Controllers
ng-controller
Metodosyatributos(clases)
Tuesday, February 12, 13

9. Eventos
ng-click
ng-dblclick
ng-change(input)
ng-mouseover|mouse*
Tuesday, February 12, 13

10. Propiedades
(TRUE o FALSE)
ng-hide|ng-show
ng-checked(input)
ng-disabled(input|button)
ng-multiple(select)
ng-readonly(input)
ng-selected(option)
Tuesday, February 12, 13

11. Modificadores
ng-class(clase)|ng-class-odd|ng-class-even
ng-bind(set)|ng-bind-template({{}})
ng-includesrc
ng-init
ng-list(inputexplode“,”)
Tuesday, February 12, 13

12. Modificadores
Paraagregarexpresionesenlosatributos
ng-href(a)
ng-src(img)
ng-style(any)
ng-submit(formfunctionsubmit)
Tuesday, February 12, 13

13. Modificadores
ng-pluralize
<ng-pluralizecount="personCount"offset=2
when="{'0':'Nobodyisviewing.',
'1':'{{person1}}isviewing.',
'2':'{{person1}}and{{person2}}areviewing.',
'one':'{{person1}},{{person2}}andoneotherpersonareviewing.',
'other':'{{person1}},{{person2}}and{}otherpeopleareviewing.'}">
</ng-pluralize>
Tuesday, February 12, 13

14. Filtros
filter: | limitTo: | number:
orderBy:OPTION:reverse
currency
date(variosformatos)
json
lowercase
uppercase
Tuesday, February 12, 13

15. TODO list
push|splice|filter
Tuesday, February 12, 13

16. Curso de AngularJS. Part II
• Formularios
• Objetos
• “AJAX”
• Modules
• Routes
• Metodos y propiedades
• Filtros y directivas (Custom Tags)
Tuesday, February 12, 13

17. Formularios
INPUT, SELECT & TEXTAREA
Tipos: text, number, url, email, radio,
checkbox.
Validar: name, required, ng-pattern,
ng-minlength, ng-maxlength,
min, max.
Tuesday, February 12, 13

18. Formularios
(devuelve true o false)
NameForm.Name.$error.required
NameForm.Name.$error.email
NameForm.Name.$error.number
NameForm.Name.$error.pattern
NameForm.Model.$error.url
Tuesday, February 12, 13

19. Formularios
Siempre con nombre (name).
Solo una variable.
También:
NameForm.$valid
Tuesday, February 12, 13

20. Objetos
$document|$window|$log
$location
$browser
$index
$http
$scope(puente)|$rootScope
$timeout
$route
Tuesday, February 12, 13

21. “AJAX”
$http.post("FILE_MODEL.PHP",{PARAMS:"VALUE"}).
success(function(data){
$scope.ATTRIBUTE=data;
}).
error(function(){
console.log("error");
})
Tuesday, February 12, 13

22. Routes
angular.module("main",[]).
config(function($routeProvider,$locationProvider){
$routeProvider.
when("/OPTION_URL/:OPTION",{templateUrl:
"TEMPLATE.HTML", controller:NAME_CONTROLLER}).
otherwise({redirectTo:"/OPTION_URL"});
$locationProvider.html5Mode(true);
})
Tuesday, February 12, 13

23. Route
functionNAME_CONTROLLER($scope,$routeParams,
$location,$http){
$scope.ATTRIBUTE=$routeParams.OPTION;
$scope.METHOD=function(){
$location.path("/OPTION_URL");
}
$http.post("FILE_MODEL.PHP",{PARAMS:"VALUE"}).
success(function(data){
$scope.ATTRIBUTE=data;
})
})
Tuesday, February 12, 13

24. Module I
run(function(){//Init}).
value("CONSTANT",123).
factory("METHOD",function(){
returnfunction(text){
returntext;//Methods
}
}).
Tuesday, February 12, 13

25. Modulo II
filter("NAME_FILTER",function(){
returnfunction(){
return"FILTER";//Format
};
}).
directive("TAG",function(){
returnfunction(element){
returnelement;//Customtagsng
}
});
Tuesday, February 12, 13

26. Además
SepuedeusarjuntoaJQuery
o
angular.forEachangular.fromJson
angular.isArrayangular.isDate
angular.isDefinedangular.isElement
angular.isFunctionangular.isNumber
angular.isObjectangular.isString
angular.isUndefinedangular.lowercase
angular.toJsonangular.uppercase
angular.version
Tuesday, February 12, 13

27. ACore 5.1 (FE)
A::script(“jquery,angular”,”js/”);
A::ng_params();
InstaladorGUI
Tuesday, February 12, 13

28. Gracias
Tuesday, February 12, 13