Guía de estilo de AngularJS

Guia de estilo de AngularJS

Antonio Chávez @The_NaoX

Software Engineer

Super heroic JavaScript MVW framework

MVW? Model View Whatever

Extender el vocabulario de HTML de una manera expresiva.

<!doctype html> <html ng-app="WDTApp"> <head> </head> <body> <div ng-controller="SpeakersController"> <div
ng-repeat="speaker in speakers"> <p>{{ speaker.talk }}</p> <p>{{ speaker.name }}</p> </div> </div> </body> </html>

angular.module('WDTApp', []) .controller(“SpeakersController", function($scope) { $scope.speakers = [ { talk:
"Tecnología con cau...”, name: "Carlos Hugo Gonzalez" }, { talk: "Programación reactiva", name: "Oscar Swanros" }, { talk: "Extending app's ar...”, name: "Tonatiuh Núñez" }, { talk: "Guia de estilo de ...”, name: "Antonio Chávez" } ] });

¿Qué es una guia de estilo?

Mejores prácticas

Arquitectura mas concisa

Patrones de diseño

1. Responsabilidad única

angular .module('WDTApp', []) .controller('SpeakersController', SpeakersController) .factory('Speaker', Speaker); function SpeakersController() {
// Magic... } function Speaker() { // Magic... }

// app.module.js angular .module('WDTApp', []); // speakersController.js angular .module('WDTApp') .controller('SpeakersController',
SpeakersController); function SpeakersController() { /* Magic... */ } // speaker.js angular .module('WDTApp') .factory('Speaker', Speaker); function Speaker() { /* Magic... */ }

2. IIFE Immediately Invoked Function Expression

O JavaScript Closures

(function(){ })();

!function(){}();

// speakers.js angular .module('WDTApp') .factory('Speaker', Speaker); // Declaración de función
global function Speaker() { } // speakersController.js angular .module('WDTApp') .factory('SpeakersController', SpeakersController); // Declaración de función global function SpeakersController() { }

// speakers.js !function() { "use strict"; angular .module('WDTApp') .factory('Speaker', Speaker);
function Speaker() { } }(); // speakersController.js !function() { "use strict"; angular .module('WDTApp') .factory('SpeakersController', SpeakersController); function SpeakersController() { } }();

3. Modules

// module.js var WDTApp = angular.module('WDTApp',[ 'ngResource', 'WDTApp.registration' ]); //
speakersController.js WDTApp.controller('SpeakersController', SpeakersController); function SpeakersController() { }

// module.js angular.module('WDTApp',[ 'ngResource', 'WDTApp.registration' ]); // speakersController.js angular .module('WDTApp')
.controller('SpeakersController', SpeakersController); function SpeakersController() { }

Separar partes de la aplicación por dominios

// registrations/module.js angular.module('WDTApp.registration',['ngResource']); // registrationController.js angular .module('WDTApp.registration') .controller('RegistrationController', RegistrationController) function
RegistrationController(){ }

4. ControllerAs

<div ng-controller="SpeakersController"> <div ng-repeat="speaker in speakers"> <p>{{ speaker.talk }}</p> <p>{{
speaker.name }}</p> </div> </div>

<div ng-controller="SpeakersController as speakers"> <div ng-repeat="speaker in speakers.collection"> <p>{{ speaker.talk
}}</p> <p>{{ speaker.name }}</p> </div> </div> angular .module('WDTApp') .controller("SpeakersController", SpeakersController); function SpeakersController(){ this.collection = [ { talk: "Tecnología con cau...", name: "Carlos Hugo Gonzalez" }, { talk: "Programación reactiva", name: "Oscar Swanros" }, { talk: "Extending app's ar...", name: "Tonatiuh Núñez" }, { talk: "Guia de estilo de ...", name: "Antonio Chávez" } ] });

<div ng-controller="SpeakersController as vm"> <div ng-repeat="speaker in vm.speakers"> <p>{{ speaker.talk
}}</p> <p>{{ speaker.name }}</p> </div> </div> angular .module('WDTApp') .controller("SpeakersController", SpeakersController); function SpeakersController(){ var vm = this; vm.speakers = [ { talk: "Tecnología con cau...", name: "Carlos Hugo Gonzalez" }, { talk: "Programación reactiva", name: "Oscar Swanros" }, { talk: "Extending app's ar...", name: "Tonatiuh Núñez" }, { talk: "Guia de estilo de ...", name: "Antonio Chávez" } ] });

5. Services y Factories

Uso de Factories sobre Services

// service angular .module('app') .service('logger', logger); function logger() { this.logError
= function(msg) { /* */ }; }

// factory angular .module('app') .factory('logger', logger); function logger() { return
{ logError: function(msg) { /* */ } }; }

6. Data Services

angular .module('WDTApp') .factory('speakersRepository', speakersRepository); dataservice.$inject = ['$http', 'logger']; function speakersRepository($http,
logger) { return { getSpeakers: getSpeakers }; function getSpeakers() { return $http.get('/api/speakers') .then(getSpeakersComplete) .catch(getSpeakersFailed); function getSpeakersComplete(response) { return response.data.results; } function getSpeakersFailed(error) { logger.error('XHR Failed for getSpeakers.' + error.data); } } }

angular .module('WDTApp') .controller('SpeakersController', SpeakersController); SpeakersController.$inject = ['dataservice', 'logger']; function SpeakersController(dataservice,
logger) { var vm = this; vm.speakers = []; activate(); function activate() { return dataservice.getSpeakers().then(function(data) { vm.speakers = data; return vm.speakers; }); } }

7. Directives

Manipular DOM sólo en una directiva.

angular .module('WDTApp') .directive('wdtTooltip', wdtTooltip); function wdtTooltip() { return { link:
function($scope, $element, $attributes) { $element.on("click", function(e) { e.preventDefault(); }); } }; }

<a href="javascript:void(0)" wdt-tooltip>Hover me!</a>

8. Estructura de la aplicación LIFT

¿Qué es LIFT? • Locating our code is easy •
Identify code at a glance • Flat structure as long as we can • Try to stay DRY (Don’t Repeat Yourself) or T-DRY

Localizar Código /bower_components /client /app /speakers speakersController.js speakers.js /blocks /core
/dashboard /data /layout /widgets /content index.html .bower.json

Identiﬁcar código Cuando observas el archivo debes saber lo que
contiene y representa al instante

Flat structure (estructura plana) Si tus carpetas hacen un nesting
de mas de 7 niveles, es tiempo de considerar hacer otro top level.

Try DRY Don't Repeat Yourself, sin sacriﬁcar ninguno de los
principios anteriores.

Separar carpetas por funcionalidad

/** * recommended */ app/ app.module.js app.config.js app.routes.js components/ calendar.directive.js
calendar.directive.html user-profile.directive.js user-profile.directive.html layout/ shell.html shell.controller.js topnav.html topnav.controller.js people/ attendees.html attendees.controller.js speakers.html speakers.controller.js speaker-detail.html speaker-detail.controller.js services/ data.service.js localstorage.service.js logger.service.js spinner.service.js sessions/ sessions.html sessions.controller.js session-detail.html session-detail.controller.js /* * avoid * Alternative folders-by-type. * I recommend "folders-by-feature", instead. */ app/ app.module.js app.config.js app.routes.js controllers/ attendees.js session-detail.js sessions.js shell.js speakers.js speaker-detail.js topnav.js directives/ calendar.directive.js calendar.directive.html user-profile.directive.js user-profile.directive.html services/ dataservice.j localstorage.js logger.js spinner.js views/ attendees.html session-detail.html sessions.html shell.html speakers.html speaker-detail.html topnav.html

Hay como otros 20 tips

https://github.com/johnpapa/angularjs-styleguide

¡Gracias! #YaSeQueNoAplauden

Guía de estilo de AngularJS

Guía de estilo de AngularJS

Other Decks in Programming

Featured

Transcript