ݺߣ

ݺߣShare a Scribd company logo

BarCamp CR 2013 - Angularjs - Brian Salazar

•
•
B
barcampcr

The document contains slides from a presentation on AngularJS. It introduces AngularJS as a way to enhance HTML for building web apps. It covers basic concepts like directives, controllers, filters and forms. It also discusses more advanced topics like modules, routes, custom directives and integrating with services like $http. The presentation is divided into two parts, with the second part focusing on forms, objects, AJAX calls, modules and routes.

1 of 28
Download to read offline
AngularJS HTMLenhancedforwebapps! Tuesday, February 12, 13
PotenciaoamplíaHTML. Google. Formadeuso. Tuesday, February 12, 13
Curso de AngularJS. Part I • Básico • Model • Bucles • Controllers • Events • Propiedades • Modificadores • Filtros Tuesday, February 12, 13
<script src=/slideshow/angularjs-16489262/16489262/"/ajax.googleapis.com/ ajax/libs/angularjs/1.0.3/ angular.min.js"></script> Tuesday, February 12, 13
Básico ng-app {{1+2}} Tuesday, February 12, 13
Model ng-model Tuesday, February 12, 13
Bucles ng-repeat ng-switch on(ng-switch-when|ng-switch-default) Tuesday, February 12, 13
Controllers ng-controller Metodosyatributos(clases) Tuesday, February 12, 13
Eventos ng-click ng-dblclick ng-change(input) ng-mouseover|mouse* Tuesday, February 12, 13
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
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
Modificadores Paraagregarexpresionesenlosatributos ng-href(a) ng-src(img) ng-style(any) ng-submit(formfunctionsubmit) Tuesday, February 12, 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
Filtros filter: | limitTo: | number: orderBy:OPTION:reverse currency date(variosformatos) json lowercase uppercase Tuesday, February 12, 13
TODO list push|splice|filter Tuesday, February 12, 13
Curso de AngularJS. Part II • Formularios • Objetos • “AJAX” • Modules • Routes • Metodos y propiedades • Filtros y directivas (Custom Tags) Tuesday, February 12, 13
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
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
Formularios Siempre con nombre (name). Solo una variable. También: NameForm.$valid Tuesday, February 12, 13
Objetos $document|$window|$log $location $browser $index $http $scope(puente)|$rootScope $timeout $route Tuesday, February 12, 13
“AJAX” $http.post("FILE_MODEL.PHP",{PARAMS:"VALUE"}). success(function(data){ $scope.ATTRIBUTE=data; }). error(function(){ console.log("error"); }) Tuesday, February 12, 13
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
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
Module I run(function(){//Init}). value("CONSTANT",123). factory("METHOD",function(){ returnfunction(text){ returntext;//Methods } }). Tuesday, February 12, 13
Modulo II filter("NAME_FILTER",function(){ returnfunction(){ return"FILTER";//Format }; }). directive("TAG",function(){ returnfunction(element){ returnelement;//Customtagsng } }); Tuesday, February 12, 13
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
ACore 5.1 (FE) A::script(“jquery,angular”,”js/”); A::ng_params(); InstaladorGUI Tuesday, February 12, 13
Gracias Tuesday, February 12, 13

More Related Content

BarCamp CR 2013 - Angularjs - Brian Salazar