¿Cuáles son algunos consejos para ahorrar tiempo que todo usuario de AngularJS debe saber?

Answer 1

Después de haber trabajado en AngularJS durante más de 2 años, estos son algunos de mis puntos principales:

En un nivel alto / de arquitectura:

0.) Escribe tus pruebas ! Lo digo en serio. Detente ahora mismo. Ve a escribir tus pruebas unitarias. En Javascript, no tienes el compilador para agarrarte y decirte que hiciste algo mal. Y querrá arrancarse el cabello la próxima vez que su aplicación se rompa debido a una letra faltante. ¡Y cuanto más grande sea su aplicación, tener la comodidad de realizar cambios y refactorizaciones a gran escala sin preocuparse por la funcionalidad rota es increíble! ¡Y escribir sus pruebas unitarias es la única forma de llegar allí!

1.) No ponga demasiadas cosas en el alcance . El alcance es costoso, ya que es el que se somete a cheques sucios. Simplemente coloque exactamente lo que se mostrará en la interfaz de usuario en el ámbito y deje el resto como variables en el controlador, pero no en el ámbito.

2.) Como se mencionó en otra respuesta, ¡ los datos son la verdad ! Deje que los datos conduzcan la aplicación, y no de otra manera. Debería centrarse exclusivamente en obtener los datos en los lugares correctos. La lógica de control de ruta, los relojes y el enlace de datos deben conducir lo que es visible en la interfaz de usuario

3.) Si necesita un widget de interfaz de usuario (por ejemplo, un selector de fecha, un autocompletado), piense en la directiva . Envuelva todos los componentes de terceros en directivas para una fácil reutilización, así como para que su aplicación sea modular. Poder escribir es mucho mejor que escribir y luego en JS, $ (‘# something’). Datepicker ()

4.) No manipules DOM en tus controladores , así como en tus servicios. Intenta restringir ese trabajo a las Directivas. Si está haciendo manipulación DOM en sus controladores, ¡DETÉNGASE! Estas haciendo algo mal

5.) Si necesita comunicarse entre controladores , existen básicamente dos opciones. Cree un servicio (que es singleton) y úselo para comunicarse. O dispare eventos en el osciloscopio y haga que el otro controlador vigile. No cree su propia nueva forma fuera de estos dos.

6.) Inyección de dependencia : Comprenderlo, amarlo, respirar y vivirlo. Esa debería ser la única forma en que solicita y trabaja con servicios o dependencias de cualquiera de sus códigos.

7.) Para directivas , intente aislar los ámbitos (Guía de directivas de AngularJS) para que pueda reutilizarlos sin preocupaciones. Aislar el alcance asegura que su directiva no dependa de algún método / variable particular en un alcance padre, y por lo tanto puede ser reutilizado. Pase lo que necesite como argumentos a la directiva. Use el enlace de datos para asegurarse de obtener el valor actualizado en lugar del valor en ese instante.

Pensamientos de bajo nivel / Gotchas / Consejos

1.) Aprende y ama los registros de tu consola. A veces, especialmente con los ciclos de resumen y el ciclo de vida angular, a veces es más fácil imprimir sus debugs en console.logs en lugar de agregar puntos de interrupción. ¡Es mas rapido!

2.) Obtenga Batarang, la extensión de Chrome. Esa es, con mucho, la mejor manera de entrar en las entrañas de AngularJS, y algunos de los detalles que proporciona (rendimiento, dependencias) harán que su vida sea súper simple y fácil.

3.) Comience a ejecutar sus pruebas unitarias en cada guardado. Hará el trabajo del compilador, y la próxima vez que rompa cualquier funcionalidad, puede solucionarlo con un simple Deshacer en su IDE

4.) Use la notación [] para enumerar sus dependencias. Es decir

angularApp.controller(['$scope', function($scope) ...

en lugar de

angularApp.controller(function($scope)...

Ambos funcionan de manera idéntica, excepto que el primero funciona incluso cuando minimiza / uglifica su código.

5.) angular.module('myApp') usa un módulo existente llamado ‘myApp’, y arroja un error si no lo encuentra.

angular.module('myApp', []) crea un nuevo módulo llamado ‘myApp’

La diferencia entre estos dos causa la mayoría de los dolores de cabeza al iniciar una nueva aplicación.

Esto es todo lo que puedo pensar en la parte superior de mi cabeza. ¡Espero que esto ayude y buena suerte!

Answer 2

Suponiendo que ya conozca los conceptos básicos, aquí hay algunas cosas que recomendaría:

1. No diseñe su aplicación y sus operaciones de acuerdo con el DOM. Si está pensando en términos de jQuery, olvide todo lo que sabe. Piense en términos de datos y su estructura natural y “conecte” estos datos al $ alcance.
2. Deje que Angular maneje el DOM y el enlace de datos por usted. No luches, y serás liberado.
3. Deje que el estado de los datos conduzca la presentación del DOM. No piense en términos de jQuery y haga que el DOM maneje los datos.
4. Divide tu aplicación en widgets y módulos. No cree páginas monolíticas controladas por un controlador.
5. Mantenga sus controladores lo más limpios posible. Trate de tener la menor lógica de negocios posible.
6. Descargue el trabajo pesado a los servicios y aproveche al máximo la inyección de dependencia de Angular.
7. Aproveche los objetos prometedores de Angular. ¡Te salvarán la cordura!
8. No toque el DOM en los controladores. Si necesita hacer alguna manipulación DOM, hágalo en directivas. Incluso entonces, minimice todas las acciones DOM.
9. Hablando de directivas, aprovéchalas y aprende los detalles de sus características (sí, esta no es una tarea pequeña). Comience ahora, tomará un tiempo.
10. Comparta datos entre controladores a través de servicios e inyección de dependencia.
11. Cuando las aplicaciones son grandes, tenga un controlador global liviano que sea responsable de las funciones que se usan con frecuencia y en todo el mundo. Los módulos y widgets deben ser específicos y pequeños. Heredarán las funciones globales.

Creo que es un buen comienzo. ¡Disfrutar!

Answer 3

He leído muchos consejos, la mayoría de ellos son iguales, algunos provienen del momento en que angular era nuevo y todos estaban preocupados por volver a jQuery. Ahora, esto es lo que aprendí:

– Use la ruta desde el principio, continúe e incluya ui-route y cree sus páginas en torno a la idea de la ruta, no tenga miedo de usar rutas secundarias / estados secundarios

– Incluya jQuery , para una “aplicación grande” es probable que la necesite de todos modos, y a veces el comportamiento cambia cuando se incluye (por ejemplo, una mala de hecho, históricamente al menos ng-touch para dispositivos móviles no detiene el Retraso de clic de 300 ms cuando se incluye jQuery). Si está creando una aplicación móvil, quizás esto sea diferente, pero lea la siguiente si lee esto

– Escribir directivas (y filtros) . No tengas miedo de escribirlos. ¿Conoces todos los consejos sobre no hacer DOM y esas cosas? No se preocupe tanto por esto, solo asegúrese de que cada vez que lo haga, lo haga en una directiva. Y sí, no se preocupe por tener “demasiadas directivas”, la mayoría de las personas tienen el problema opuesto; tampoco te preocupes por recordar la sintaxis, casi siempre la copio de otra o documentos, no dejes que eso te haga escribir menos directivas.
Lo mismo se aplica a los filtros, por cierto, escriba tantos de estos como crea que necesita, a veces querrá mantenerlos junto al controlador en el que se usan, eso está bien, de verdad.

– Utilice los servicios , siempre que el controlador se sienta demasiado tiempo (¿qué es tan largo? Depende de usted, compare con una acción del controlador MVC del servidor normal, o una clase en Java / C # y aplique las reglas que use allí), o parezca tener tantas las dependencias (demasiados parámetros de función) consideran encapsular la mayor parte de la lógica en un servicio o más. Piense en los servicios como una forma de dividir el código más que como una forma de reutilizarlo, es decir, no tema crear uno o más servicios para servir a un controlador.

– Escriba un archivo CSS diferente por vista de ruta , y use clases claras o para asegurarse de que el CSS no entre en conflicto cuando todos se combinen / minimicen juntos (porque, por supuesto, usa algún tipo de combinación / agrupación y minifcación, ¿verdad?) . Por supuesto, también tendrá algunos archivos compartidos (por sitio y por módulo de aplicación / función / ruta) para cosas valiosas.

– Crear carpetas por función , no por tipo de archivo. Esto se llama corte vertical a veces. La idea, en lugar de tener carpetas nombradas como “Controladores”, “Vistas”, “Servicios”, etc., tiene las carpetas nombradas después de la función en su lugar (esa es la ruta más a menudo, pero no necesariamente, siéntase libre de tener algunos nombres de ruta coincidentes y algunos no, está bien), y deje que tenga el controlador relevante (o controladores, si tiene uno secundario), vista y cualquier archivo de soporte, como servicios, directivas, etc.

Descargo de responsabilidad: tenga en cuenta que esto no se trata de ser nuevo en Angular o hacer JS en general. Esto es lo que más ayudará para las aplicaciones “grandes”, aunque, por supuesto, también puede usar algunas de ellas en aplicaciones más pequeñas.

Answer 4

Las directivas poco conocidas de Angular.js es un resumen escrito por Adam Stankiewicz que ha demostrado ser muy útil en nuestro trabajo diario.

ACTUALIZAR
Dariusz Gertych de nuestro equipo publicó 5 consejos sobre cómo usar AngularJS con Rails que cambiaron la forma en que trabajamos:

• Estamos utilizando rails-assets
• Estamos pasando la configuración por módulo JsEnv y constante angular
• Aprovechamos las ruedas dentadas y los interceptores AngularJs
• Estamos utilizando angular-translate con cargador personalizado
• Estamos usando el caché del lado del cliente

Answer 5

Estos son mis consejos sobre cómo abordar un nuevo proyecto angular y mantener las cosas simples para ahorrar tiempo y energía (especialmente con futuras revisiones):

1) Use WebStorm
WebStorm es un gran ahorro de tiempo. Es un IDE muy inteligente y a menudo te encuentras usando sus atajos y herramientas para acelerar las cosas.

2) Mantenga las cosas modulares
Cuando regrese después de un tiempo a una aplicación angular desordenada, se sentirá muy frustrado consigo mismo por no haber hecho que su aplicación sea modular. Tiendo a dividir diferentes funcionalidades en módulos separados. Por ejemplo, mi funcionalidad de formulario de contacto es modular. Es su propio módulo, con sus propios controladores, servicios, estilos y plantillas. Esto me permite reutilizar la funcionalidad común en nuevos proyectos y sé exactamente dónde encontrar el código que necesito cambiar.

3) Usar directivas para la funcionalidad de la interfaz de usuario
Cuando crea widgets como componentes de la interfaz de usuario que desea ejecutar por sí solo con su propia funcionalidad y comportamiento, use directivas. Será tentador usar controladores, pero este no es el enfoque correcto hacia una solución. Y mientras estamos en el tema, aprenda a vivir sin jQuery. Ya estamos acostumbrados, pero en su lugar, intente usar las funciones angulares internas y JS de vainilla.

4) Use un corredor de tareas para automatizar tareas
Use Gulp o Grunt para automatizar su flujo de trabajo. Pídales que vean los archivos en busca de cambios y recarguen automáticamente la ventana del navegador cuando las tareas hayan terminado de compilar los cambios. Esto es un gran ahorro de tiempo y dedico al menos una hora cuando comienzo un proyecto para configurar un archivo decente y de trabajo.

5) Aprende la forma angular de hacer las cosas
Esta es una declaración muy general, pero debes saber que las convenciones angulares están ahí por una razón. Por lo general, lo guían hacia las mejores prácticas y he descubierto en Angular que, cuanto más sepa y más aprenda sobre él, más fáciles serán las cosas. Use filtros cuando sea posible, use directivas cuando sea posible. Use emisiones y transmisiones para comunicarse entre controladores o use un servicio singleton.

6) Por último, PRUEBA
Las pruebas son una excelente manera de garantizar que su código funcione como se esperaba y evitará que regrese y continúe modificando el código de trabajo. Una vez que sus pruebas pasen y cubran la funcionalidad requerida, continúe.

Estos son los puntos que uso en mis propias aplicaciones de Angular y hasta ahora he tenido un gran éxito con ellas.

Answer 6

1. Dejar que sus datos dicten la aplicación
Una de las claves para una arquitectura “buena” en AngularJS es comprender cómo se utilizarán sus datos en la aplicación. Demasiadas aplicaciones de Angular.js dependen de la manipulación DOM de estilo jQuery para lograr su apariencia, lo que puede ser lento y problemático ya que la manipulación DOM es una operación costosa. La estructuración de su aplicación basada en los datos que se presentan le permite tener un código más legible y permite que AngularJS funcione como estaba previsto.
John Papa ofrece algunos buenos recursos sobre la mejor forma de estructurar su código en GitHub en su Guía de estilo AngularJS y en los repositorios de demostraciones angulares.

2. Hacer uso de pruebas unitarias
La estructura de AngularJS a menudo significa que el código que escribe no se ejecuta hasta que el navegador lo necesita. Si bien esto es excelente desde el punto de vista de la disponibilidad del código, ya que no necesita rebotar el servidor web para mostrar información de una manera diferente, esto también significa que su código recién implementado puede tener errores que no aparecieron durante la publicación pruebas de desarrollo. Tener un conjunto de pruebas de unidad robusto puede ayudar a descubrir estos errores antes de que su sitio caiga en producción.
Afortunadamente, AngularJS está escrito teniendo en cuenta las pruebas, y existen marcos de prueba de unidad, como el karma, lanzado por el equipo de Google responsable de AngularJS en primer lugar, que hacen que todo el proceso sea relativamente indoloro. Simplemente adopte un enfoque de prueba que tenga sentido para sus objetivos de desarrollo y comience a probar. La cobertura máxima es el objetivo aquí: en ausencia de un compilador, debe asegurarse de que los errores de sintaxis se detecten lo más rápido posible.

Algunos buenos ejemplos de pruebas unitarias se pueden encontrar en la documentación de AngularJS, así como en egghead.io – Aprenda AngularJS con videos tutoriales y capacitación en las pruebas “Hello World” .

3. Depuración activa, no pasiva
Una práctica de desarrollo front-end común es usar “Console.log (…)” como el principal medio de depuración. Esto surgió por necesidad, ya que los primeros navegadores carecían por completo de herramientas de desarrollo para el código front-end. Sin embargo, la mayoría de los navegadores modernos tienen un conjunto bastante robusto de herramientas de desarrollo integradas, lo que hace que esta lógica sea algo obsoleta. Las herramientas de desarrollo de Chrome, por ejemplo, permiten toda la funcionalidad de depuración de un IDE estándar, desde la depuración línea por línea hasta la creación de perfiles. Un punto de interrupción establecido en el punto problemático de una función puede proporcionar mucha más información que una simple declaración de registro.

Si aún desea usar registros de consola, o si la pila de llamadas es demasiado tediosa para trabajar, aquí hay un consejo rápido: use una llamada de registro de consola en un punto de interrupción condicional. La llamada de registro de la consola se evalúa como falsa, por lo que el punto de interrupción nunca se activará; esto le permite obtener un registro rápido en la pila de llamadas que conduce a la función que se está probando sin tener que actualizar la página.

Para obtener más consejos, consulte el Atrás y el blog.

Answer 7

Aquí hay un buen tutorial para comenzar con un proyecto AngularJS usando algunas herramientas interesantes como yeoman, bower, gulp.
¡Echale un vistazo! Django a AngularJS

Answer 8

Esto no es específico de Angular, pero he tenido una muy buena experiencia con Angular y Typecript en mi último proyecto. Funcionan bien juntos y, en general, el Script mecanografiado es Javascript, pero si está utilizando Visual Studio, la escritura segura y otras características IDE son muy convenientes. Esto me sorprendió.

Otro consejo útil es asegurarse de comprender las diferencias entre vincular a un primitivo y a un objeto o matriz en un servicio. El siguiente enlace me pareció muy útil y, sinceramente, creo que la documentación y las demostraciones de Angular perjudican enormemente a los desarrolladores al no explicar que incluso una aplicación de ejemplo de Hello World sería más instructiva si utilizara un servicio.

Cuando comienza a usar Angular, normalmente construye una vista … y luego construye un controlador … y luego construye un servicio … pero realmente debería construir una vista, luego un servicio y luego un código de controlador para conectarlos. Creo que eso confunde a las personas.

Una historia de Frankenstein y enlaces a valores de servicio en Angular.js

Answer 9

Pocas cosas a nivel de arquitectura:
1. No ponga muchas cosas en el objeto $ scope. Cada elemento agregado al alcance agrega un $ watch al elemento que escucha los cambios y los actualiza / procesa entre el controlador y la vista.
2. Saber y comprender cuándo es eficiente usar directivas.
3. si necesita hablar entre controladores, hay dos opciones simples de eventos de incendio ($ broadcasts) o crear un Servicio
4. Inyección de dependencia: Comprenda, ame y respire con ella.
5. Pruebe su código (Prueba de unidad)

---

Pocas cosas en un nivel inferior :
1. Registros de consola, a veces es más fácil depurar su código con console.logs, especialmente con ciclos de resumen.
2. Utilice Batarang – extensión de Chrome que permite al usuario ver datos dentro del alcance de la página actual.
3. imprimir el elemento en formato json en la vista para fines de depuración ({{item | json}})

Answer 10

Yeoman: Yo, Grunt y Bower, todos encima de NodeJS. Esta configuración le permitirá no solo generar sus plataformas AngularJS con pruebas completas ya construidas para usted, sino que también puede crear sus propios generadores para expandir sus aplicaciones web, ahorrándose mucho trabajo repetitivo y tedioso. También es posible que desee pagar Café , Jade y Brújula para prácticas de producción extremadamente rápidas.

¡Feliz codificación!

Answer 11

Puede aprender el idioma utilizando tutoriales en línea, asistir a cursos de institutos de capacitación y empresas en JS en caso de que necesite un entrenador que lo ayude a aprender. Me gusta especialmente este enlace: http://www.w3resource.com/javasc… . Recomendaría los siguientes libros: JavaScript elocuente, de Marijn Haverbecke
El libro de JavaScript, segunda edición, por Dave Thau!
JavaScript, The Definitive Guide, 6th Ed. David Flanagan (este es mi favorito personal)
JavaScript efectivo, de David Herman (¡otra compra inteligente si me preguntas!)
Pro JavaScript Performance, de Tom Barker
JavaScript de alto rendimiento, por Nicholas Zakas
Patrones JavaScript, de Stoyan Stefanov
JavaScript: The Good Parts, por Douglas Crockford
JavaScript y JQuery de Murach, Zak Rubalcaba y Mike Murach

Answer 12

Las siguientes prácticas al desarrollar una aplicación angular pueden ayudarlo a ahorrar mucho tiempo:

1. Aquí encontrará algunos widgets y componentes muy útiles para su IU: Directivas angulares para Bootstrap. Estos pueden ser útiles mientras se desarrolla una aplicación angular.
2. Asegúrese de estar usando directivas personalizadas para insertar las mismas plantillas en varias páginas y usar servicios para hacer llamadas ajax para reducir la repetición de escribir el mismo código una y otra vez.
3. No use demasiados ámbitos en una sola página, ya que puede afectar el rendimiento de sus aplicaciones y puede terminar gastando mucho tiempo en mejorarlo, por lo que la prevención desde el inicio ayudará.
   El equipo angular ha recomendado no más de 2000 observadores / página.
4. Evite usar el código Jquery en su aplicación, por lo que ser jquery y angular no funciona bien.

Comprenda AngularJS en breve aquí:
http://angularjstutorials.in/

Answer 13

Debe consultar este video de Misko Hevery (creador de AngularJS) sobre las mejores prácticas:

Answer 14

Para usar cualquier complemento jQuery en su código angular, simplemente busque una directiva y aplique su código jQuery en la función de enlace, ya que la función de enlace funciona como una devolución de llamada para la directiva.

Answer 15

Mi consejo es estructurar su aplicación con el desacoplamiento adecuado de modelos y vistas. Esto hace que su aplicación sea mucho más flexible y resistente al cambio. También ayuda mucho con las pruebas unitarias.
Aquí hay un ejemplo de lo que quiero decir con eso:
Modelos de objetos desacoplados en JavaScript

También te animo a que solo confíes en Angular donde agrega valor directo. El uso de JavaScript simple en lugares donde Angular no es necesario garantizará que su código sea portátil en el futuro si decide utilizar otro marco.

Answer 16

El mayor consejo para ahorrar tiempo: use la herramienta de andamiaje de la web para aplicaciones web modernas
Así que quieres aprender AngularJS

Answer 17

Cloud make es mucho más accesible Implemente la aplicación angularjs con capistrano en la nube

Answer 18

Batarang – Extensión de cromo Angularjs

Answer 19

Use variables de alcance solo si es necesario para el alcance.
Para desarrollar la interfaz de usuario, use la mayoría de las directivas bootstrap angularjs.

Answer 20

Use Webstorm El IDE JavaScript más inteligente
te ahorrará mucho tiempo