Your SlideShare is downloading. ×
0
×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BarCamp CR 2013 - Angularjs - Brian Salazar

775

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
775
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJS HTML enhanced for web apps!Tuesday, February 12, 13
  • 2. Potencia o amplía HTML. Google. Forma de uso.Tuesday, February 12, 13
  • 3. Curso de AngularJS. Part I • Básico • Model • Bucles • Controllers • Events • Propiedades • Modificadores • FiltrosTuesday, 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-modelTuesday, February 12, 13
  • 7. Bucles ng-repeat ng-switch on (ng-switch-when | ng-switch-default)Tuesday, February 12, 13
  • 8. Controllers ng-controller Metodos y atributos (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-include src ng-init ng-list (input explode“,”)Tuesday, February 12, 13
  • 12. Modificadores Para agregar expresiones en los atributos ng-href (a) ng-src (img) ng-style (any) ng-submit (form function submit)Tuesday, February 12, 13
  • 13. Modificadores ng-pluralize <ng-pluralize count="personCount" offset=2 when="{0: Nobody is viewing., 1: {{person1}} is viewing., 2: {{person1}} and {{person2}} are viewing., one: {{person1}}, {{person2}} and one other person are viewing., other: {{person1}}, {{person2}} and {} other people are viewing.}"> </ng-pluralize>Tuesday, February 12, 13
  • 14. Filtros filter: | limitTo: | number: orderBy:OPTION:reverse currency date (varios formatos) json lowercase uppercaseTuesday, February 12, 13
  • 15. TODO list push | splice | filterTuesday, 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.urlTuesday, February 12, 13
  • 19. Formularios Siempre con nombre (name). Solo una variable. También: NameForm.$validTuesday, February 12, 13
  • 20. Objetos $document | $window | $log $location $browser $index $http $scope (puente) | $rootScope $timeout $routeTuesday, 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 function NAME_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() { return function(text){ return text; //Methods } }).Tuesday, February 12, 13
  • 25. Modulo II filter("NAME_FILTER", function(){ return function() { return "FILTER"; //Format }; }). directive("TAG",function(){ return function(element){ return element; //Custom tags ng } });Tuesday, February 12, 13
  • 26. Además Se puede usar junto a JQuery o angular.forEach angular.fromJson angular.isArray angular.isDate angular.isDefined angular.isElement angular.isFunction angular.isNumber angular.isObject angular.isString angular.isUndefined angular.lowercase angular.toJson angular.uppercase angular.versionTuesday, February 12, 13
  • 27. ACore 5.1 (FE) A::script(“jquery,angular”,”js/”); A::ng_params(); Instalador GUITuesday, February 12, 13
  • 28. GraciasTuesday, February 12, 13

×