DanLevy.net

Trucos de AngularJS

AngularJS PUEDE ser divertido!

Hero image for Trucos de AngularJS

AngularJS PUEDE SER Divertido!

Para: AngularJS v1.x

  1. Los desarrolladores de AngularJS descubren rápidamente que sus aplicaciones medianas y grandes se ven abrumadas por el peso de los disparos de $watch y el bastón engordado conocido como $scope.
  2. Mantén tu $scope libre de estado UI excesivo, intenta limitar el tamaño y la profundidad de tu jerarquía general.

Enlace de datos de dos vías: Espada de doble filo

El enlace de datos de dos vías solo hace que venir desde otros marcos como Backbone sea, bien, una auténtica maravilla.

El problema es: muchos sitios abusan crónicamente de los patrones de diseño de Angular. Esto lleva a una proliferación de directivas y un $scope/rootScope que fácilmente tiene miles de instancias, y pueden aferrarse a objetos enormes, impidiendo cualquier posibilidad de recolección de basura efectiva.

Sabes adónde va esto: ¡un navegador agotado! Condenado para siempre a trabajar a un ritmo frenético ejecutando recompilaciones interminables e redundantes de la interfaz de usuario/DOM.

Deja de sobre-Angularizar

“Si tu única herramienta es un martillo, entonces todo problema parece un clavo.”

¿Tu aplicación tiene problemas con directivas?

current-user-status-label
  div(ng-if='loggedIn')
    view-user-surplusage(ng-if='!editMode')
      .head: contact-details(user='user')
      .tool: contact-buttons(loggedIn='loggedIn')
      a.edit-icon(ng-click='editMode = true')
    edit-user-surplusage(ng-if='editMode')
      .head: avatar-edit(user='user')
      .body: edit-contact-details(user='user')
      a.save-icon(ng-click='editMode = false')

Diseñemos un widget de usuario flexible que ayude:

  1. Componentización versátil con código Angular DRY
  2. Directivas comprensibles, con tamaño y profundidad mínimos de directiva (cuida tus ng-repeats)
  3. Capa de servicio simple
  4. Poco código real para implementar, solo código HTML/Vista
// jade
user-widget
  div(ng-if='loggedIn')
    div.edit(ng-if='editMode')
      h4.email-icon: input(type='email', ng-model='user.email')
      h4.phone-icon: input(type='email', ng-model='user.phone')
      a.save-icon(ng-click='editMode = false')
    div.show(ng-if='!editMode')
      h1.users-icon {{ user.name  }}
      h4.email-icon {{ user.email }}
      h4.phone-icon {{ user.phone }}
      a.edit-icon(ng-click='editMode = true')
  div(ng-if='!loggedIn')
    h5: i Bienvenido usuario
    a.btn(href='/login') Iniciar sesión

Soluciones

Consejos de Angular

  1. Usa enlace de una vía (ej. {:: title} )
  2. Limita el anidamiento recursivo de directivas
  3. Y si debes anidar directivas, NUNCA lo hagas dentro de un ng-repeat - El rendimiento empeorará de manera exponencial ;) I. Usa código JS/DOM nativo en un patrón de fábrica para crear fragmentos básicos de DOM/UI, ejemplos: Cuadro de mensaje modal, barra de estado. Llama a fábricas de UI desde directivas o controladores.
  4. Bonus: Comprende el costo y los disparadores del ciclo de renderizado del navegador: animación, renderizado compuesto, reflujos

Usa Browserify para organizar el proyecto

No específicamente para Angular, pero esencial para la resolución simple de dependencias.

Browserify hace que los proyectos JS sean manejables con virtualmente ninguna sobrecarga de código adicional (bueno, unos cientos de caracteres más).

Lee solo esta sección del Manual de Browserify.

Alternativas

ReactJS de Facebook

Si tienes muchos componentes UI reutilizables pequeños - ReactJS podría ser una mejor opción:

Proyecto Polymer de Google

Enfoque más puro de JavaScript

Loading comments...